one. Let me talk about the advantages first
1. Based on Vue3:
Nuxt3是基于Vue.js 3开发的，Vue.js 3是目前最流行的前端框架之一。
这意味着你可以利用Vue3的所有优势，如性能优化、响应式编程、更好的TypeScript支持等。
2. Server-side rendering (SSR):
Nuxt3支持服务端渲染，可以帮助你解决SPA（单页应用）中的SEO问题，提高页面加载速度，改善用户体验。
静态站点生成（SSG）：Nuxt3还提供静态站点生成的功能，让你可以轻松构建高性能的静态站点，提高托管速度和安全性。
3. Modularization:
Nuxt3有丰富的模块化生态系统，让你可以轻松地扩展应用的功能，减少开发工作量。
4. File system routing:
Nuxt3的文件系统路由让你可以通过简单的文件和目录结构来组织你的应用路由，让开发更加简洁明了。
5. Out of the box:
Nuxt3提供了许多开箱即用的功能，如状态管理、中间件、页面过渡动画等，使得开发过程更加简单和高效。
two. Let’s build the nuxt3 project again
1. nuxt3 scaffolding
npx nuxi init nuxt3-app
// nuxt3-app 是我的项目名称
Download dependencies in the nuxt3-app directory
yarn
run
yarn dev
Visit again http://localhost:3000to see the basic interface
2. Project structure
(The newly built project does not have any folders, which are basically created by myself.)
-
assets, to store some static resources, including someSass、Less, you need to use the ~assets/ symbol at the beginning when referencing in project components. If your static resource files need webpack to build and compile, you can put them in the assets directory, otherwise you can put them in the static directory This is also a difference between the assets directory and the static directory (I put the css used globally here) and it can also be placedpublicbelow -
componentscomponents! All are placed in the /components directory and automatically registered, (you don’t need to import it yourself, that’s great~) The
component name is directory name + component name, and named in big hump, duplicate names will be removed~
(~ later Introduce how to use the component, let’s introduce the directory first~) -
pagesThe directory of Nuxt 3pagesis used to create and place pages. When there is a pages directory under the project, Nuxt will automatically load Vue Router to achieve the routing effect. The files in the directory are usually Vue components, and sub-files are also allowed.vue、 .js、 .jsx、 .ts 或 .tsx. named file. When we create./pages/home/ index.vue, the content of the file is as follows, which means that the home route / corresponds to thishomepage file, and the routing configuration will be automatically generated by Nuxt 3. (I don’t need to create routes myself, that’s great~) -
pluginsThe plugin defined here is automatically referenced by nuxt.
nah! The official website said~
-
publicStatic resources~ My pictures are placed here -
storeState management, used in my project ispinia -
middlewareSet up middleware
import plugin
beans
yarn add pinia @pinia/nuxt
element-plus
yarn add @element-plus/nuxt
Add plugins/element.ts
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
import ElementPlus from 'element-plus';
export default defineNuxtPlugin(nuxtApp => {
// ElementPlus
nuxtApp.vueApp.use(ElementPlus, {
size: 'small', zIndex: 3000 });
// ElementPlus Icons
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
nuxtApp.vueApp.component(key, component)
}
})
less
the version i use
"less": "^3.12.2",
"less-loader": "^7.0.1",
swipe
yarn add vue-awesome-swiper
yarn add swiper
Add plugins/element.ts
import VueAwesomeSwiper from "vue-awesome-swiper";
// import "swiper/swiper.css";
import "swiper/swiper-bundle.css";
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(VueAwesomeSwiper);
});
My: package.json
{
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview"
},
"devDependencies": {
"nuxt": "3.0.0-rc.4"
},
"dependencies": {
"@element-plus/icons-vue": "^2.0.6",
"@iconify/vue": "^3.2.1",
"@pinia/nuxt": "^0.1.9",
"@windicss/plugin-animations": "^1.0.9",
"element-plus": "^2.2.8",
"less": "^3.12.2",
"less-loader": "^7.0.1",
"nuxt-windicss": "^2.4.2",
"pinia": "^2.0.14",
"sass": "^1.53.0",
"swiper": "^8.0.7",
"nuxt-swiper": "^0.1.6",
"unplugin-auto-import": "^0.9.2",
"unplugin-vue-components": "^0.21.1",
"vue-awesome-swiper": "^5.0.1"
}
}
The packages I installed
my nuxt.config.ts
import {
defineNuxtConfig } from "nuxt";
const lifecycle = process.env.npm_lifecycle_event;
export default defineNuxtConfig({
app: {
head: {
title: "房屋医院",
// link: [{ rel: "icon", type: "image/*", href: "" }],
link: [{
rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
script: [
{
type: "text/javascript",
src: "https://map.qq.com/api/js?v=2.exp&key=XXX",
},
],
},
},
css: ["~/assets/scss/index.scss"],
build: {
transpile: lifecycle === "build" ? ["element-plus"] : [],
},
buildModules: ["nuxt-windicss", "@pinia/nuxt"],
});
Four. started using
1. Configure routing:
Nuxt3 does not need to configure the route by itself, just create a folder~
The route corresponding to the home folder is http://localhost:3000/home
2. Middleware, set routing redirection
// 设置
export default defineNuxtRouteMiddleware((to, from) => {
console.log("auth");
return navigateTo("/home");
});
My requirement is that just entering the page defaults to the home route.
// 使用 pages/index
definePageMeta({
middleware: "auth",
});
3. Using components
The index file is under the home folder. If using direct
<Home />
If the aboutUsImg file under the com folder is used directly
<HomeComAboutUsImg />
4. Import static resources
My image resources are all placed under pulic/imgs.
Use 1:
<div class="introduction-title">
<img src="/imgs/introduction/titleUse.png" alt="" />
// 直接 "/imgs/introduction/titleUse.png" 去使用，要加/
</div>
Use 2: use in state
do not add /
5. Use pinia
import {
defineStore } from "pinia";
export const useCommon = defineStore("common", {
state: () => {
return {
selectNavIndex: 0
};
},
actions: {
setSelectNavIndex(val) {
this.selectNavIndex = val;
}
},
});
import {
useHome } from "@/store/home";
const homeStore = useHome();
const selectNavIndex = computed(() => homeStore.selectNavIndex);
6. Use Tencent Maps
nuxt.config.ts configuration
export default defineNuxtConfig({
app: {
head: {
title: "房屋医院",
// link: [{ rel: "icon", type: "image/*", href: "" }],
link: [{
rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
script: [
{
type: "text/javascript",
src: "https://map.qq.com/api/js?v=2.exp&key=XXX",
},
],
},
},
});
In the file use:
<template>
<div class="map">
<div id="container"></div>
</div>
</template>
<script setup>
const initMap = () => {
const center = new qq.maps.LatLng(31.275091, 120.608716);
var map = new qq.maps.Map(document.getElementById("container"), {
// 地图的中心地理坐标。
center: center,
zoom: 13,
disableDefaultUI: true, //禁止所有控件
});
var label = new qq.maps.Label({
position: center,
map: map,
content: "文本标记",
});
var marker = new qq.maps.Marker({
position: center,
map: map,
});
};
onMounted(() => {
initMap();
});
</script>
<style lang="less" scoped>
#container {
/*地图(容器)显示大小*/
width: 527px;
height: 343px;
}
</style>
Pack:
npm run generate 或者 npm run build
Generate .output/dist files
Global installation
npm install -g http-server
Open the cmd command line, cd into publicthe folder directory under the .output/dist file, and execute
http-server -p 12345
Open the started project address to see if it was successful.