The blogger opened a Nuxt.js column today, taking you to explore the essence of Nuxt.js and learn how to use its powerful functions to build excellent front-end applications. We'll discuss its core features, flexible routing system, optimization tips, and solutions to common problems. Whether you want to learn the basics of Nuxt.js, or want to master advanced techniques, this column will meet your needs. Next, let us embark on the journey of Nuxt.js and start an exciting journey of front-end development!
Pre-knowledge required :
Search Engine Optimization (SEO) : The process of optimizing your website and content to improve your ranking and visibility in search engines. It is a strategy and technique that helps a website get more organic (non-paid) traffic. But the application system developed with vue.js is not friendly to SEO.
Client-Side Rendering (CSR) : Client-side rendering is a style of web application rendering in which the content and structure of a page is generated and rendered primarily by the client browser at runtime rather than on the server side. In client-side rendering, the server is primarily responsible for serving data and basic HTML, CSS, and JavaScript files, which are then sent to the client browser. After the browser receives these files, it parses the HTML and CSS, and executes JavaScript code to generate dynamic content and interactions.
Server Rendering (SSR) : Server rendering is a way of rendering web applications in which the content and structure of the page is primarily generated on the server side and then sent to the client browser for display. In server rendering, after receiving the client's request, the server will generate corresponding HTML, CSS and JavaScript files according to the requested URL and parameters, and return these files to the client browser as a response. After the browser receives the file, it directly displays the content without performing additional operations.
The difference between client-side rendering and server-side rendering : When choosing server-side rendering or client-side rendering, you need to comprehensively consider factors such as project requirements, technical complexity, and performance requirements. Generally speaking, server-side rendering may be more suitable for websites that require fast loading and high SEO requirements; while for applications that require complex interactions and real-time updates, client-side rendering may be more advantageous.
How Vue.js implements SSR : Nuxt, a common application framework for vue.js, provides a smooth out-of-the-box experience, built on the same vue.js technology stack, but abstracts a lot of templates and provides some additional features, such as static site generation. Through NUXT, Vue SSR can be quickly implemented according to the agreed rules.
Table of contents
Getting to know Nuxt.js for the first time
Build Nuxt.js environment and create projects
Explanation of nuxt directory structure
Basic process of project operation
Getting to know Nuxt.js for the first time
What is nuxt.js ?
Nuxt.js is an open-source framework based on Vue.js designed to simplify and speed up the development process of front-end applications. It combines Vue.js' powerful progressive JavaScript framework with the capabilities of server-side rendering (SSR) , providing a simple and flexible way to build high-performance, scalable web applications. This means that Nuxt applications render faster than traditional server-side (or multi-page) applications.
Why use nuxt.js ?
Mainly to achieve server-side rendering (SSR), using Nuxt.js' server-side rendering capabilities to solve the SEO problem of Vue projects
What are the prerequisites and applicable people for learning nuxt.js ?
The premise of learning Nuxt.js is to have a certain understanding and foundation of Vue.js. Because Nuxt.js is a framework based on Vue.js, it is very helpful to have a certain understanding of the basic concepts of Vue.js, component development and responsive principles. Suitable for front-end developers, beginners, and project teams with high performance and SEO requirements. Nuxt.js is also a great option for developers looking to develop in TypeScript.
How does nuxt.js work ?
1) The browser (client) sends an http request to the Node.js server.
2) Nuxt.js, an application deployed on Node.js, receives a browser request, and it will request the background interface server
3) The background interface server will respond to JSON data, and Nuxt.js will render the data into html after getting the data
4) Then Nuxt.js responds the html page to the browser
5) The browser will directly display the received html page
nuxt.js uses the three major technical architectures of vue.js + webpack + babel, and integrates the following components/frameworks in vue.js to develop complete and powerful web applications. Of course, nuxt also pre-installs the standard Vue applications. The various packages are as follows:
Vue, Vue-router, Vuex, Vue Server Renderer, Vue-Meta
Nuxt.js major release version situation ?
1) October 2016: The Nuxt.js project was launched. Created by Alexandre Chopin and Sébastien Chopin.
2) October 2019: Nuxt.js 2.0 released. This release brings significant improvements, including stronger static generation support, TypeScript support, a new module system, and more performance optimizations.
3) October 2021: Nuxt.js 2.15 released. This release brings support for Nuxt.js 3 and migration tools to help developers transition to Nuxt.js 3 smoothly.
4) On November 16, 2022, Nuxt Nation 2022, the world's largest Nuxt conference, was held online, and the first stable version of Nuxt.js 3.0 was officially released.
That is to say, as of the completion of this article, version 3 of nuxt.js has just been released. The blogger will also focus on explaining nuxt.js2 in future columns, and will also focus on explaining the knowledge of nuxt.js3 later, please expect!
Difference between Nuxt.js 2 and Nuxt.js 3 ?
build method :
Nuxt.js 2 uses a webpack based build system. Nuxt.js 3 introduces Vite, a build tool based on ES Modules, to provide a faster development experience and build speed.
Performance and development experience :
Nuxt.js 3 is optimized in terms of build and startup speed. By using Vite and ES Modules, it can provide faster hot reload, instant startup and faster development experience.
Configuration method :
Nuxt.js 2 uses the nuxt.config.js file to configure the application. Nuxt.js 3 introduces Runtime Configuration, which configures applications through JavaScript code, which is more flexible and easy to use.
Plugin system :
Nuxt.js 3 brings major improvements to the plugin system. Plugins are now called Modules and can be installed and published via npm. The module system of Nuxt.js 3 is more highly modular and extensible, and provides better testing and composability.
TypeScript supports :
Nuxt.js 2 has limited support for TypeScript and requires additional configuration and plugins. Nuxt.js 3 supports TypeScript by default, and you can directly use TypeScript to develop applications.
Note : Nuxt.js 3 is currently still in Beta and has some compatibility differences with Nuxt.js 2. If you are a new project, you can consider trying Nuxt.js 3 for better performance and development experience. But if you are maintaining a project that already uses Nuxt.js 2, some migrations and adjustments may be required to adapt to Nuxt.js 3.
Nuxt life cycle flowchart ?
Because nuxt.js3 has just been released, this column will first explain the knowledge related to nuxt.js2 in the early stage , and then explain the knowledge related to nuxt.js3 later, so the relevant URLs of nuxt are given: nuxt.js2 and nuxt.js3 , All the bloggers give are Chinese websites, and the access speed of domestic websites is very fast. If you want to see foreign English websites, you can directly search the nuxt official website on Baidu, so I won’t repeat them here:
The figure below shows the process from nuxt.js application to a complete server request to rendering (or the user switches the route rendering page through <nuxt-link>)
Build Nuxt.js environment and create projects
Before using Nuxt.js, you need to ensure that your computer has an editor (this is the most basic, the blogger recommends vscode, the strongest editor in the universe), and secondly, you must ensure that your computer has a node development environment. If you only If you are a beginner and don’t know about node, I recommend reading my previous article on node: node environment installation .
Global installation creation : cmd + r Create a new terminal and enter the following command for global installation:
npm install -g create-nuxt-appThe process of installing the package globally is a bit slow, just wait patiently:
After the installation is complete, we find the directory where the corresponding project is created, and then execute the following command to create it:
create-nuxt-app 项目名称After executing this code, you can create a project. The process of creating a project is basically the same as the process of creating Vue and React projects that we have learned before. The basic installation process is as follows:
There are a few differences. Nuxt provides a ui component library for us to choose. Here I just choose the component library for the style of creating the project, so I choose None, as follows:
Another option is to let us choose what project to create. There are two options: create a server-side rendering project and a single-page application project. Both projects are supported by nuxt, but we are learning server-side rendering, so We choose the first server-side rendering:
The next option is the meaning of the deployment target, which specifies how you will deploy the Nuxt.js project to the server. When creating a Nuxt.js project, you can choose different deployment targets.
Server (Node.js hosting)：
Selecting Server as the deployment target means that you will use a Node.js server to run the Nuxt.js application. This means you need to install and configure a Node.js environment on your server and use Node.js to host your application.
Static (Static/Jamstack hosting)：
Selecting Static as the deployment target means that you will generate static files and deploy them to the web server. This deployment method is suitable for applications that do not require server-side rendering (SSR) and only rely on static files.
Choosing a deployment target depends on your project needs and personal preferences :
The Server deployment target is appropriate if you need server-side rendering, server-side processing, or interacting with server-side APIs. If your application is driven by static content and does not rely on server-side rendering, then choosing the Static deployment target may be more suitable for you. Choosing the right deployment target on a case-by-case basis can provide better performance and a better development experience.
Here I choose the first Server:
Next, select the development tool for project creation. Here I choose the first one for vscode. If you want to create a TS project, just select TS above:
When installing a Nuxt.js project you are asked for your GitHub username in order to associate your GitHub account with the project:
When installing the Nuxt.js project and being asked for your GitHub username, you will need to provide your GitHub username. In this way, Nuxt.js can access your GitHub repository through your username and get the required templates or other related information. Please make sure you provide the correct GitHub username so that Nuxt.js can correctly connect to your GitHub account and fetch the required resources.
If you don't have a GitHub account or don't want to be associated with GitHub, you can choose to create a project from scratch instead of using a template. In this case, you can ignore the question, or enter N/Aor other suitable value to skip this step.
The following screen appears to indicate that your nuxt project has been installed, as follows:
When running the project for the first time, the following options may appear in the terminal asking if you are interested in participating in surveys or feedback. Just select n
After the startup is complete, a URL will appear on the terminal, and the URL can be opened to run in the local browser, as follows:
You can see that we use this method to install nuxt. The default is to give us the latest version 2. If you want to install version 3, it is another command. Let’s not mention this for now, and we will continue to talk about it later, as follows:
When we right-click to view the source code, we can see that the entire html module content has been loaded. Unlike the source code created by vue, which has only one root tag, the nuxt method is used to facilitate the crawler's crawling of our web page data. Greatly improved SEO:
npx installation creation (official recommendation) : Make sure to install npx (npx has been installed by default in npm version 5.2.0), npx is an advanced version of npm, and npx has more powerful functions. Its function is to avoid global installation of modules: npx temporarily installs a create-nuxt-app module to initialize the project, and the create-nuxt-app module will be automatically deleted after use (the following does not require global installation):
In the folder where you want to create a nuxt project, execute the following command on the terminal:
npx create-nuxt-app 项目名称Its configuration process is basically the same as the project process created by the global installation above. The following operations are also the same, and the project can finally be run, so I won’t go into details here.
Explanation of nuxt directory structure
If it is an old version of nuxt, the directory structure it creates is as follows
But what we now install by default is the latest version of the nuxt2 version, and its default file directory is as follows:
The corresponding file directories and corresponding functions of the new version are as follows:
.nuxt //nuxt自动生成，临时生成的用于编辑的文件
components //用于自己编写或定制的Vue组件
node_modules //项目所需依赖
pages //用于组织应用的路由及视图,Nuxt.js根据该目录结构自动生成对应的路由配置，一般情况下文件夹名不可更改
static //用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。文件夹名不可更改。
store //用于组织应用的Vuex 状态管理。文件夹名不可更改。
.editorconfig //开发工具格式配置
.gitignore //ESLint的配置文件，用于检查代码格式
jsconfig.json //创建项目时为vscode独有创建的文件
nuxt.config.js //用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。文件名不可更改。
package.json //npm 包管理配置文件
README.md //自述文件
// yarn.lock //yarn自动生成，用于帮助package的统一设置的，npm也有相同的操作
I believe that careful friends have already seen it, why are there a few folders missing? Yes, the assets, layout, middleware, plugins, and server folders are gone in the new version, and the missing folders can be created manually when needed.
Basic process of project operation
After the project is running, it will automatically find index.vue under pages, as follows:
The Tutorial of the original code is similar to a component. We comment it out and write a homepage, and it will be displayed on the page. Remember that the vue2 template needs to be set with a root tag div. Don’t forget this, friends who don’t know vue You can subscribe to the vue column I explained earlier
When we create a new vue file under the pages folder, the file will be automatically synchronized and configured by router.js under .nuxt, as follows:
When we access this route in the browser, our component content will be automatically loaded, as follows:
The components we created in the components folder do not need to register the routing components in the vue file of the pages folder like vue2, just reference them directly, of course you can also reference them, it doesn’t matter! as follows:
The result is as follows, indicating that we referenced the component successfully!
This article mainly introduces the basic situation of Nuxt.js and the basic construction and application of the project. The next article will continue to explain the relevant knowledge of Nuxt.js. Follow the bloggers to not get lost and learn more front-end knowledge!