docs: getting started (#188)

Co-authored-by: Pooya Parsa <pyapar@gmail.com>
This commit is contained in:
Daniel Roe 2021-06-08 22:09:36 +01:00 committed by GitHub
parent f6dbfd3872
commit 44aeaae941
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 105 additions and 7 deletions

View 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`

View 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.

View File

@ -1 +0,0 @@
# What is Nuxt?

View File

@ -1 +0,0 @@
# Installation

View File

@ -1 +0,0 @@
# Deployemnt

View File

@ -1 +0,0 @@
# Directory Structure

View File

@ -1 +1 @@
[Getting Started](/getting-started/intro)
[Get Started](/get-started/installation)

View File

@ -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 {}
}
}