Nuxt Practical Tutorial Basics-Day01

Preface: This tutorial is based on Nuxt2 . As the first day of the tutorial, we start by understanding the framework of Nuxt.js.

What is Nuxt?

1. Nuxt.js is a general application framework based on Vue.js.
2. Through the abstract organization of client/server infrastructure, Nuxt.js mainly focuses on UI rendering of applications.
3. As far as use is concerned, the component writing method is basically the same as that of vue, the difference lies in several hook functions and some server-side rendering related things.

How does the Nuxt.js framework work?

Nuxt.js integrates the following components/frameworks for developing complete and powerful web applications:

1. Vue2, Vue-Router, Vuex (introduced when the Vuex state tree configuration item is configured), Vue server-side rendering (excluding the use of mode: 'spa'), Vue-Meta
2. Total code size after gzipping and gzipping: 57kb (60kb if Vuex features are used).
3. In addition, Nuxt.js uses Webpack and vue-loader, babel-loader to handle the automatic construction of code (such as packaging, code layering, compression, etc.).

Nuxt-features

1. Based on Vue.js
2. Automatic code layering
3. server-side rendering
4. Powerful routing function, supporting asynchronous data
5. static file serving
6. ES2015+ syntax support
7. Bundle and minify JS and CSS
8. HTML head tag management (title, keywords, description)
9. Local development supports hot loading
10. Integrate ESLint
11. Supports various style preprocessors: SASS, LESS, Stylus, etc.
12. Support HTTP/2 push

flow chart

The following figure illustrates the process from Nuxt.js application to a complete server request to rendering (or the user renders the page by switching routes):

Server-side rendering (via SSR)

• You can use Nuxt.js as a framework to handle all UI rendering of your project.

• When starting nuxt, it will start the development server with hot update loaded, and Vue server-side rendering configured to automatically render the application for the server.
  

Single Page Application (SPA)

• If you don't want to use server-side rendering or need your application to provide static hosting, you can use the nuxt --spa command to use SPA mode. It gives you a powerful SPA deployment mechanism without using Node.js to run the application or any special server-side processing.
• If your project has its own web server (such as a web service started with Express.js), you can still use Nuxt.js as a middleware, which is responsible for the UI rendering part. In the process of developing general web applications, Nuxt.js is pluggable without too many restrictions. You can learn more about using Nuxt.js in developing code.
  

Static (pre-rendered)

• It is an innovative point of Nuxt.js to support the staticization of Vue.js applications, which is realized through the nuxt generate command.

• This command staticizes each route into a corresponding HTML file according to the routing configuration of the application.

For example, the following file structure:

-| pages/
----| about.vue
----| index.vue

After statically becomes:

-| dist/
----| about/
------| index.html
----| index.html

Static allows you to host your web application on any static site service provider.

Nuxt pros and cons

advantage

• Conducive to seo, general shopping websites need seo optimization
• The first screen rendering is faster because: server-side rendering only needs to make a network request once, while client-side rendering needs to request the files needed to run first, then make network request data after running, and then load the page

shortcoming

• Higher requirements for server rendering than client rendering

Install

run create-nuxt-app

Make sure npx is installed (npx is installed by default in NPM version 5.2.0):

$ npx create-nuxt-app <项目名>

or with yarn:

$ yarn create nuxt-app <项目名>

It will let you make some choices, and you can choose according to your needs. The following picture is my choice when creating a project:

run project

cd <项目名>

npm run dev

After running successfully, as shown in the figure below, the default port is 3000

and then enter localhost:3000 in the browser, you will see as shown in the figure below

Summarize

Day01 I will give you a brief introduction to the framework of Nuxt.js and the process of project creation. In addition, I will introduce to you a more practical browser plug-in that can be used to analyze which technologies are used by the website. This plug-in is called wappalyzer, let's show you the effect of using this plug-in.

Use this plug-in to analyze what technologies are used on those web pages. When you want to achieve similar effects, you don’t have to worry about what technologies Baidu Search uses. Next, I will recommend a few websites developed by the Nuxt framework for you. Let's take a look, and the following tutorials will be based on the examples of these websites. The front end of the website y.js.cn mainly uses Nuxt, Element-UI, TailwindCSS, etc. The jsjiami.cn website also uses technologies such as Nuxt. Subsequent tutorials will start blog tutorials based on the websites known to bloggers. If you have known websites developed with Nuxt, please add them in the comment area, and we will learn together.