Nuxt first experience

Nuxt first experience

What is nuxt

Nuxt.js is a general application framework based on Vue.js. Through the abstract organization of the client/server infrastructure, Nuxt.js mainly focuses on the UI rendering of the application. Our goal is to create a flexible application framework, based on 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 rendered applications using Vue.js. In addition, we also provide a command called nuxt generate, which provides the function of generating corresponding static sites for Vue.js-based applications. We believe that the functionality provided by this command is a new step towards the development of 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.

The above is a description from the official nuxt documentation .

A brief summary is that nuxt helps us integrate the server-side rendering things, and supports static site deployment and server-side rendering deployment.

What is the difference between nuxt and vue

When building a single-page application using vue, we can find that the requested html actually only returns the root node of a div, and does not return any other content. The content on the page is rendered on the page after the js is loaded. In other words, search engines will think that there is only an empty div tag in the content of your website.

There are two ways to build nuxt, one is nuxt generate, which builds the content you develop into a static html page, but at this time someone will ask, what if the content on my page changes dynamically? First of all, nuxt generate can also achieve dynamic data through some methods, and we will not discuss it here; as you can know from the official document, we can also make a completely server-side rendering project in the form of nuxt build and nuxt start. At this point, you can see that when you look at the return of the html request, what is returned is a complete html page.

So what does this have to do with the integrity of html? What needs to be mentioned here is SEO. Each search engine will crawl the content of each website, and then calculate a SEO weight based on the website content and a series of complex algorithms. This weight also determines when users search for keywords. , Where your website appears. Obviously, the higher the weight, the higher the position, and the more likely your website is to be visited.

Summary of actual combat

The official website for installation and initialization has been introduced in detail, so I won t go into details here, and briefly talk about the next few more important features and files.

routing

Nuxt does not need to declare the route separately, just create a file according to the route path under pages to automatically generate the route.

Component

The components in nuxt are all placed under components, and do not need to display registration when referencing, just refer to them directly.

nuxt.config.js

Nuxt's most critical configuration file and global configuration are all done here.

head

Insert custom content such as meta, script, title, etc. in the head of html. If you insert a script, there may be parsing problems, you need to add __dangerouslyDisableSanitizers: ['script'] at this time.

build

For some customized content of webpack, such as babel, some processing of alias.

Environment variable

You can insert the NODE_ENV environment variable through cross-env in the scripts of package.json. At the same time, you need to display and declare the env object in the config to obtain the inserted environment variable.

asyncData

Sometimes the content of the page is dynamically obtained through the interface, such as the page of the article details, if you still obtain the form through the traditional interface, you will find that the static part of the page is already rendered, but the article part is still empty Yes, obviously this is not the result we want.

Nuxt provides asyncData to deal with such situations. It is worth noting that once the asynchronous data is obtained in this form, it is thought that the request originally sent on the web side is transferred to the node side, so once an error or other bug occurs, only the server may hang up, including online The troubleshooting of the problem can only be found through the server, so the processing of logs and fault tolerance must be in place.

At the same time, the official also recommends using pm2 to do some process protection operations.

deploy

Since I personally use docker deployment, I only understand this one situation. What you need is to create a dockerfile, build the code, and then run the start command in the form of CMD to start the service.

summary

Nuxt itself is relatively integrated and encapsulated. We can't see many details of server rendering. It is only operated through exposed APIs, but the difficulty of getting started is indeed reduced a lot. If you want to study in depth It would be better to understand its internal implementation principles.