Difference between revisions of "Nuxt.JS Installation"

From WikiOD
Line 73: Line 73:
 
Note: Nuxt.js will monitor file changes in the pages directory, so there is no need to restart the application when adding a new page.
 
Note: Nuxt.js will monitor file changes in the pages directory, so there is no need to restart the application when adding a new page.
  
Learn more about the directory structure of Nuxt.js applications:  [https://www.nuxtjs.cn/guide/directory-structure Directory structure .]
+
Learn more about the directory structure of Nuxt.js applications: [https://nuxtjs.org/docs/2.x/directory-structure/nuxt Directory structure.]
 
[[Category:Nuxt.js_Tutorials|2]]
 
[[Category:Nuxt.js_Tutorials|2]]

Revision as of 09:51, 24 August 2021

Nuxt.js is very simple and easy to use. A simple project only needs to add nuxt as a dependent component.

Run create-nuxt-app

To get started quickly, the Nuxt.js team created the scaffolding tool  create-nuxt-app .

Ensure that npx is installed (npx is installed by default in NPM version 5.2.0):

$ npx create-nuxt-app <Project name>

Or use yarn:

$ yarn create nuxt-app <Project name

It will let you make some choices:

  1. Choose between integrated server-side frameworks: None (Nuxt default server) Express Koa Hapi Feathers Micro Fastify Adonis  (WIP)
  2. Choose your favorite UI framework: None Bootstrap Vuetify Bulma Tailwind Element UI Ant Design Vue Buefy iView Tachyons
  3. Choose your favorite test framework: None (feel free to add one) Jest AVA
  4. Choose the Nuxt mode you want (Universal or SPA)
  5. Add the  axios module  to easily send HTTP requests to your application.
  6. Add  EsLint  to check your code for code specifications and errors when saving.
  7. Add  Prettier  to format/beautify your code when saving.


When it finishes running, it will install all dependencies, so the next step is to start the project:

$ cd <project-name>
$ npm run dev

The application is now running on  http://localhost:3000  .

Note: Nuxt.js will monitor file changes in the pages directory, so there is no need to restart the application when adding a new page.

Understanding the directory structure of the template project:  Directory structure .

Create a new project from scratch

If we don't use the starter template provided by Nuxt.js, we can also create a new Nuxt.js application project from scratch. The process is very simple and only requires 1 file and 1 directory. As shown below:

$ mkdir <Project name>
$ cd <Project name>

Tip: Replace <project name> with the actual project name you want to create.

Create a new package.json file

The package.json file is used to set how to run nuxt:

{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt"
  }
}

The above configuration allows us to run nuxt by running npm run dev.

Install nuxt

Once package.json is created, you can install nuxt into the project with the following npm command:

$ npm install --save nuxt
pages directory

Nuxt.js will generate the routing configuration of the application based on all *.vue files in the pages directory.


Create the pages directory:

$ mkdir pages

Create our first page pages/index.vue:

<template>
  <h1>Hello world!</h1>
</template>


Then start the project:

$ npm run dev

Now our application is running on  http://localhost:3000  .

Note: Nuxt.js will monitor file changes in the pages directory, so there is no need to restart the application when adding a new page.

Learn more about the directory structure of Nuxt.js applications: Directory structure.