Detailed explanation of the use of Vue.js universal application framework Nuxt.js

This time I will bring you a detailed explanation of the use of the Vue.js universal application framework Nuxt.js. What are the precautions when using the Vue.js universal application framework Nuxt.js. The following is a practical case. Let’s take a look. take a look.

1 Introduction

Official website: https://nuxtjs.org/

GitHub: https://github.com/nuxt/nuxt.js

What is Nuxt.js?

Nuxt.js is a general application framework based on Vue.js.

By abstractly organizing the client/server infrastructure, Nuxt.js focuses primarily on application UI rendering.

Our goal is to create a flexible application framework on top of which you can initialize the infrastructure code of a new project, or use Nuxt.js in an existing Node.js project.

Nuxt.js presets various configurations required to develop server-side rendering applications using Vue.js.

In addition, we also provide a command called: nuxt generate, which provides the function of generating corresponding static sites for applications based on Vue.js.

We believe that the functionality provided by this command is a new step towards developing web applications that integrate various microservices.

As a framework, Nuxt.js provides many useful features for the typical application architecture pattern of client/server, such as asynchronous data loading, middleware support, layout support, etc.

2. Build the first Nuxt.js project

It is recommended to use the template provided by Nuxt. It is assumed that you have installed vue-cli. If not, please execute npm install vue-cli -g to install vue-cli first.

$ vue init nuxt-community/starter-template <project-name>

Go to the project folder to install dependent packages.

cd <project-name>
npm install

Startup project.

npm run dev

Open the browser and visit http://localhost:3000. You can see the page rendered by Next.

3.Add page

The newly completed project structure is as shown below:

Project structure

Nuxt agrees that all pages are placed in the pages folder, and Nuxt will automatically generate the corresponding route according to the directory structure.

Now create a new Vue file test.vue under pages and visit http://localhost:3000/test to see the page you just added.

4.Introducing third-party plug-ins

Usually we need to introduce third-party plug-ins, such as front-end components, logs, etc.
The first step is of course to install the plug-in. Here we take element-UI as an example.

npm install element-ui

Although I downloaded the element-ui package, it cannot be imported and used directly in the Vue instance like a normal project. Nuxt's kernel projects are all in the .nuxt directory. Modifying the files below will not take effect. Because the file will be regenerated every time you compile, directly modifying the project file is invalid.

Kernel project structure

Although it cannot be modified directly, Nuxt provides a special way to introduce third-party plug-ins.

The first step is to create a new js file element-ui.js in the pulgin folder. The contents of the file are as follows.

import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element)

The second step is to modify nuxt.config.js. Add plugins attribute.

/**
   * include third-party plugin
   */
  plugins: ['~plugins/element-ui'] // element-ui.js文件地址

After recompiling, Nuxt will compile the third-party plug-in and use it. At this time, the third-party plug-in can be used in any Vue file.

5. Static resource files

You can put the static resource files in the static folder, and then use http://localhost:3000/ to access the static resource files.

Nuxt provides many more functions, such as dynamic routing and ESLint code detection. That’s it for today. For more in-depth information, please refer to the official website.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to make the image float in the center in JS

How Webpack builds Electron applications

Solution to the problem of Angular image upload preview path

The above is the detailed content of Detailed explanation of the use of Vue.js universal application framework Nuxt.js. For more information, please follow other related articles on the PHP Chinese website!