This is the 9th day of my participation in the August Changwen Challenge. For details, see: August Changwen Challenge (already 9 days).

Nuxt.js is a lightweight application framework based on Vue.js that can be used to create server-side rendering (SSR) applications or as a static site engine to generate static site applications. Nuxt.js is a lightweight application framework based on VUe.js that can be used to create server-side rendering (SSR) applications or as a static site engine to generate static site applications.

SPA and SSR have been introduced in front of the difference, here is not much to repeat, and today’s NUXT. js development page is in the form of SPA, such as gold is greatly used nuXT development

nuxtAdvantages of development

  • Based on the Vue. Js
  • Automatic code layering
  • Server-side rendering
  • Powerful routing function, support asynchronous data
  • Static file service
  • ES6/ES7 syntax support
  • Package and compress JS and CSS
  • HTML header tag management
  • Native development supports hot loading
  • Integrated ESLint
  • Support for various style preprocessors: SASS, LESS, Stylus, and more

Environment configuration

First, ensure that the node is installed, and the version is generally not lower than V12. After the node is installed, install the VUe-CLI scaffolding

npm install vue-cli -g
Copy the code

Of course, the installation speed depends on your image, NPM is downloaded from a foreign website dependency package, if the network is not good, it will be very slow, then you can use taobao mirror CNPM and YARN for installation is ok

The installationnuxt

You can customize nuXT installation, custom build template files

yarn add nuxt 
Copy the code

Once vue-cli is installed, you can use the init command to initialize the nuxt.js project.

vue init nuxt/starter
Copy the code

He’ll download a template on Github and ask you what the name of the project is, the author, whatever you like.

3. Run the NPM install command to install the dependency packages

npm install
Copy the code

This process will take a while, and if you fail to install, don’t panic, you can simply delete the node_modules folder in your project and reinstall it from NPM install.

4. Run the NPM run dev command to start the service

npm run dev
Copy the code

5. In the browser, enter localhost:3000. The result is displayed.

Hello World

Also can usecreate-nuxt-appCreate a project

$yarn create nuxt-app < project name >Copy the code

It will give you a few choices:

  1. Choosing between integrated server-side frameworks:
  • None (Nuxt default server)
  • Express
  • Koa
  • Hapi
  • Feathers
  • Micro
  • Fastify
  • Adonis (WIP)
  1. Choose your preferred UI framework:
  • None (no)
  • Bootstrap
  • Vuetify
  • Bulma
  • Tailwind
  • Element UI
  • Ant Design Vue
  • Buefy
  • iView
  • Tachyons
  1. Choose your preferred testing framework:
  • None (add one at will)
  • Jest
  • AVA
  1. Select the Nuxt mode you want (Universal or SPA)
  2. Add the Axios Module to easily send HTTP requests to your application.
  3. Add EsLint to check your code for code specifications and errors on save.
  4. Add Prettier to format/beautify your code when saving.

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

$ cd <project-name>
$ npm run dev
Copy the code

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

Note: Nuxt.js listens for file changes in the Pages directory, so you don’t need to restart the application to add new pages

How do I display Devtools

I have to add the following to nuxt.config.js:

vue: {
  config: {
    productionTip: false.devtools: true}}Copy the code

How do I change the startup port

Added in package.json

"config": {"nuxt": {"host":"127.0.0.1"."port":"9900"}}Copy the code

Loading a CSS file

In the nuxt.config.js file, set CSS as follows

css: ["element-ui/lib/theme-chalk/index.css"."~assets/css/normal.css"].Copy the code