VueJS: Cài đặt

Using create-nuxt-app

To fast start, Nuxt.js team created a scaffolding tool create-nuxt-app.

To ensure you installed npx (npx was transformed by default from NPM 5.2.0)

$ npx create-nuxt-app <project-name>

Or with yarn:

yarn create nuxt-app <my-project>

It will ask you some questions:

1. Choose between frameworks on integrated server:
   • None (default server Nuxt)
   • Express
   • Koa
   • Hapi
   • Feathers
   • Minify
   • Adonis (WIP)
2. Choose your favorite UI framework:
   • None (please add one later)
   • Bootstrap
   • Vuetify
   • Bulma
   • Tailwind
   • Element UI
   • Ant Design Vue
   • Buefy
3. Choose your favorite test framework:
   • None (feel free to add one later)
   • Jest
   • AVA
4. Nuxt modes you wanna (Universal or SPA)
5. Add axios module to easy execute HTTP Request in your app.
6. Ad EsLint to Lint your code when save.
7. Add Prettier to make your code beauty when save.

When answer, it will install all of dependencies, so next step is starting your project with command:

$ npm run dev

Add currently running on http://localhost:3000.

To learn more about folder config of project: directory constructure documentation.

Start from scratch

Create a Nuxt.js app from start in fact very easy, it only needs one file and one folder. Making empty directory to start working on app:

$ mkdir <project-name>
$ cd <project-name>

.json package

Project need a package.json file for specify how to start nuxt:

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

scripts will run Nuxt.js throught out npm run dev.

Install nuxt

When package.json had created, adding nuxt into project by npm:

npm install --save nuxt

pages directory

Nuxt.js will convert every *.vue file in pages directory as routes for app.

Creates pages directory:

$ mkdir pages

then create the first page in pages/index.vue:

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

and start project with:

$ npm run dev

Current app is running on http://localhost:3000.

To learn more about directory config of project: Directory structure documentation.