mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-29 09:02:03 +00:00
docs: getting started (#188)
Co-authored-by: Pooya Parsa <pyapar@gmail.com>
This commit is contained in:
parent
f6dbfd3872
commit
44aeaae941
47
docs/content/1.get-started/1.installation.md
Normal file
47
docs/content/1.get-started/1.installation.md
Normal file
@ -0,0 +1,47 @@
|
||||
# Installation
|
||||
|
||||
Getting started with Nuxt3 is straightforward.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Before installing Nuxt, you'll need to have a local development environment.
|
||||
|
||||
Recommended setup is:
|
||||
|
||||
* **NodeJS** <sup>*</sup> (latest LTS version) [[Download](https://nodejs.org/en/download/)]
|
||||
* **Visual Studio Code** [[Download](https://code.visualstudio.com/)]
|
||||
* **Vetur extension** [[Download](https://marketplace.visualstudio.com/items?itemName=octref.vetur)]
|
||||
* **Yarn package manager** [[Download](https://classic.yarnpkg.com/en/docs/install#windows-stable)]
|
||||
|
||||
<sup>*</sup> If you already have NodeJS installed, check with `node --version` to ensure using `v14` or `v16`.
|
||||
|
||||
|
||||
## Create project
|
||||
|
||||
From visual studio code, open an [integrated terminal](https://code.visualstudio.com/docs/editor/integrated-terminal) and use the following command to create a new starter project:
|
||||
|
||||
```bash
|
||||
npx degit nuxt/starter#v3 my-nuxt3-project
|
||||
```
|
||||
|
||||
Open `my-nuxt3-project` folder in visual studio code:
|
||||
|
||||
```bash
|
||||
code -r my-nuxt3-project
|
||||
```
|
||||
|
||||
Install dependencies using yarn:
|
||||
|
||||
```bash
|
||||
yarn install
|
||||
```
|
||||
|
||||
## Start Development Server
|
||||
|
||||
Now you'll be able to use `yarn dev` to start nuxt app in development mode:
|
||||
|
||||
```bash
|
||||
yarn dev -o
|
||||
```
|
||||
|
||||
✨Well done! A browser window should automatically open to `http://localhost:3000`
|
55
docs/content/1.get-started/2.structure.md
Normal file
55
docs/content/1.get-started/2.structure.md
Normal file
@ -0,0 +1,55 @@
|
||||
# Directory Structure
|
||||
|
||||
The Nuxt application structure is intended to provide a great starting point for both small and large applications. You are free to organize your application however you like and can create them as and when you need.
|
||||
|
||||
## The `app.vue` file
|
||||
|
||||
The `app.vue` file, is used as main component for your application ([learn more](/app/app)).
|
||||
|
||||
## The `pages/` directory
|
||||
|
||||
The `pages/` directory contains your application's views and routes. If it exists, Nuxt reads all the `.vue` files inside this directory and uses them to create the application router ([learn more](/app/pages)).
|
||||
|
||||
## The `plugins/` directory
|
||||
|
||||
Nuxt will automatically read the files in your `plugins/` directory and load them. ([learn more](/app/plugins)).
|
||||
|
||||
|
||||
## The `/server` directory
|
||||
|
||||
The `server/` directory contains API endpoints and server middleware for your project. ([learn more](/server/api)).
|
||||
|
||||
## The `components/` directory
|
||||
|
||||
The `components/` directory is where you put all your Vue components which can then be imported inside your pages or other components.
|
||||
|
||||
## The `assets/` directory
|
||||
|
||||
The `assets/` directory contains your uncompiled assets such as your styles or fonts.
|
||||
|
||||
## The `static/` directory
|
||||
|
||||
The `static/` directory is directly served at server root and contains public files that have to keep their names (e.g. `robots.txt`) _or_ likely won't change (e.g. `favicon.ico`).
|
||||
|
||||
|
||||
|
||||
|
||||
## The `nuxt.config` file
|
||||
|
||||
The `nuxt.config` (`js` or `ts`) file is the single point of configuration for Nuxt. If you want to add modules or override default settings, this is the place to apply the changes.
|
||||
|
||||
### The `package.json` file
|
||||
|
||||
The `package.json` file contains all the dependencies and scripts for your application.
|
||||
|
||||
### The `yarn.lock` or `package.lock.json` file
|
||||
|
||||
This file is automatically generated and keeps exactly installed version of packages. So that next time you or another one wants to try project, will install same versions.
|
||||
|
||||
### The `.nuxt` directory
|
||||
|
||||
This is the directory used by nuxt to put temporary build files.
|
||||
|
||||
### The `.output` directory
|
||||
|
||||
When using `nuxt build`, this directory will be created and is meant to be deployed to production server.
|
@ -1 +0,0 @@
|
||||
# What is Nuxt?
|
@ -1 +0,0 @@
|
||||
# Installation
|
@ -1 +0,0 @@
|
||||
# Deployemnt
|
@ -1 +0,0 @@
|
||||
# Directory Structure
|
@ -1 +1 @@
|
||||
[Getting Started](/getting-started/intro)
|
||||
[Get Started](/get-started/installation)
|
||||
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<nuxt-link to="/getting-started/intro">
|
||||
<nuxt-link to="/get-started/installation">
|
||||
Getting Started
|
||||
</nuxt-link>
|
||||
</template>
|
||||
@ -7,7 +7,7 @@
|
||||
<script>
|
||||
export default {
|
||||
asyncData ({ redirect }) {
|
||||
redirect('/getting-started/intro')
|
||||
redirect('/get-started/installation')
|
||||
return {}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user