Talk:Based on, it is used for SSR rendering to solve SEO, but not limited to this. Not used to look at it from a limited perspective, using it will be smoother and more comfortable than native vue3 and has higher performance. Isn't it high to learn from the familiarity of vue3? In addition, it fully supports vue3 syntax. Compared with vue3, it improves some of the functions of vue3. Nuxt3 has some "conventions", which you can understand as some of the syntax it has already stipulated (it must be written like this). Although it feels like a limitation, it is also a convenient place for it. This article briefly extracts and summarizes some useful features of Nuxt3 and (compare vue) and you will know that Nuxt is not only SSR rendering, but also applauds for its design.
Although the latest version is still a beta version, it is estimated that the official version will be released around the end of 2022. There are no big bugs. It is recommended that you start to use it.
1. What's unique about Nuxt
1.1. Search Engine Optimization
Solve the unfavorable SEO issues caused by Vue building SPA projects (single-page applications). (What is SEO? [Expand at the end of the article: SEO]))
1.2. New project is simple, project startup and reconstruction are very fast
Nuxt3 is used as the view engine. All Vue 3 functions are provided in Nuxt3, so the Nuxt project we created is actually a vue 3 project. Moreover, Nuxt has helped us choose many tools, so we can simplify the project construction process and focus on development. For example, the following are some Nuxt options:
- JavaScript framework:
- vue project building tool: Vite
- Hot Modular Development: webpack 5
- Code compilation, used as a JavaScript syntax translator: esbuild (a new era performance building tool)
- The http framework for backend services: h3 (supports Serverless, Worker and Node, with strong performance)
- Navigation routing: vue-router
- Packaging tools: nuxt/vite-builder and nuxt/webpack-builder
According to the convention, some default directories are provided (need to be created by yourself and will be recognized by Nuxt) for easy access to paths. These directories will be mentioned later.
assets // Static resourcespublic // Public static resources, available publiclypages // Development pagecomponents // Componentslayouts // Project layoutmiddleware // middlewareplugins // Plug-inserver // rear end
1.3. Static resource address access
The public directory structure is as follows:
-| public/ --| img/ ----|
Accessed in a static url, based on "convention", write directlypublicThe following path is
<template> <img src="/img/" alt="Kawaii" /> </template>
The assets directory structure is as follows:
-| assets/ --| scss/ ----| --| ts/ ----| --| img/ ----|
Must use~/assets/The path references a file located in the directory:
<template> <img src="~/assets/img/" alt="Kawaii" /> </template>
1.4. Routing usage (pages directory, components directory is similar)
It generates a route from each component created in the directory based on the file name. There is no need to configure routing like in the past Vue, and it has its own routing parameter transmission method. Nuxt has corresponding methods for other routing functions, which are clearer and simpler, and will not be easy to make mistakes.
This file system routing uses naming conventions to create dynamic and nested routes, for example, create a page like this:
-| pages/ --| --| posts/ ----| [id].vue
access:
<template>
<header>
<nav>
<ul>
<li><NuxtLink to="/about">About</NuxtLink></li>
<li><NuxtLink to="/posts/1">Post 1</NuxtLink></li>
<li><NuxtLink to="/posts/2">Post 2</NuxtLink></li>
</ul>
</nav>
</header>
</template>You can also use vue for response jumps in js(), but Nuxt recommends usingawait navigateTo()
<script setup>
import {} from "vue";
async function clickAction() {
const router = useRouter();
// ({ path: "/about" });
await navigateTo({
path: "/about",
query: {
name: "Kite-One Origami",
age: 18,
},
});
}
</script>1.5. layouts
The layouts layout is very useful, similar to the parent component, but different, the advantage is that simple inheritance can be reused. For example, a default framework layout is defined, and the routes within the name are inherited by default with this external framework. Of course, you can choose whether to inherit and control the scope of action. The framework components must be placed in the layouts directory.
-| layouts/ ---| ---|
<template>
<div>
Some default layout shared across all pages
<slot />
</div>
</template>
<script>
// This will work in both `<script setup>` and `<script>`
definePageMeta({
layout: "custom",
});
</script><template>
<NuxtLayout :name="layout">
<NuxtPage />
</NuxtLayout>
</template>
<script setup>
// The default layout component named : can be modified dynamically through name or :name. Can switch theme functionsconst layout = "custom";
</script>1.6. middleware middleware
Numxt has powerful middleware functions, which are very convenient to customize and easy to use. It can set the scope of action, anonymous, local and global.
Of course, you can also set up routing middleware, similar to Vue's navigation guard, but the parameters only have to and form, and there is no next() parameter. If you want to cancel the access to to, you can directlyreturn abortNavigation()Terminate navigation, if you want to redirect, you can use itreturn navigateTo('/')Specifies a redirect route.
-| middleware/ ---|
Note that the route method name defined by the middleware must bedefineNuxtRouteMiddleware((to, from) =>{}), cannot be changed, this is a convention, the file name is arbitrary.
export default defineNuxtRouteMiddleware((to, from) => {
("To go to that page:"+)
(to)
("From that page:"+)
(from)
if ( === '1') {
return abortNavigation() // Terminate navigation }
// return navigateTo('/xxx') // Redirect route})Use, refer to this routing middleware (must also usedefinePageMeta({})method)
<template>
......
</template>
<script setup>
definePageMeta({
middleware: ["auth"]
// or middleware: 'auth'
})
</script>1.7. plugins plugin
Third-party plug-ins and custom plug-ins can be introduced. The latter is not the case that the former must be used, and the configuration is also simple. Just just npm and then define and declare.
The same agreement is that only the top level of the directoryplugins/The file (or index file in any subdirectory) will be registered as a plugin.
-| plugins | - | - myOtherPlugin | --- | --- | ---
Among them, onlyandmyOtherPlugin/Will be registered.
Server service, providing backend functions
-| server/ --| api/ ----| --| routes/ ----|
Nuxt provides backend server functions, with good performance, but its functionality cannot be separated from the front and backends.
1.8. About Others
Nuxt3 has other details and pays attention to it. This article is a summary discourse. If you are interested, you can learn about the official website: / The official has very detailed usage documents, so you can read them with confidence.
If you need to build a project, you can check it out if you encounter any problems.Nuxt3 project construction (Nuxt3+element-plus+scss detailed steps）》
2. Expansion: SEO
Search Engine Optimization, also known as SEO, is a technology that optimizes the website in accordance with rules by analyzing the ranking rules of search engines. It can improve the website's natural ranking in search engines, attract more users to visit the website, and increase the number of website visits. 【Introduction at the beginning of the article】
2.1. How do search engines collect website information for ranking?
Search engines use proprietary spider programs (crawlers) to find HTML code on each web page. It searches all links of the website, analyzes and collects keywords of the website for searching, and ranks naturally through its own changing algorithms. The spider program needs to access all pages, which takes a long time, so the website navigation needs to facilitate indexing and inclusion of the spider program. If our website is designed to be convenient for spiders to access, speed up its access speed. It will help increase search engine friendliness.
2.2. Why is OPA not conducive to SEO?
As long as the content of a single page is rendered dynamically matched by routes, and many contents need to be displayed on one page, there will be many asynchronous operations. The spider program will not wait for you to fully load it. If you want to be better for the spider program, you need to convert more content into static resources and load it faster. SSR rendering is the principle of this. For example, NUXT (using SSR rendering) can help you load all data from the background first and then return it to the front end. The SEO effect will only be better, and the loading speed of the first screen will be much faster.
2.3. How to improve website ranking?
- Improve the access quality of website links and the number of links quoted by external websites.
- Place high-quality content, such as blog websites, and try to keep the article original.
- The website structure should be neat and simple, and do not be too complicated to design.
2.4. Where are the keywords generally set?
- title tag (important)
- meta tag (mainly, there are several important attributes in it, go and learn about it)
2.5. Pay attention to keyword settings
- Be related to the theme of the website and do not blindly pursue popular words;
- Avoid using general vocabulary with wide meanings, the clearer the better, don't treat cute little ones as stupid
- Select specific words as much as possible according to the type and characteristics of the product
- 5 to 10 keywords are better
- Control the frequency on the web page, don't be too much
This is the article about the use of key features of Nuxt3. For more information about Nuxt3, please search for my previous articles or continue browsing the related articles below. I hope you will support me in the future!