最近官网搭建选择了nuxtjs，由于框架更新了，其中语法也有很多变化，中间遇到了一些问题点做下总结。
nuxt3官方文档地址：https://nuxt.com/docs/getting-started/installation
安装
在安装Nuxt3之前，你需要保证你的node.js大于16.10.0 或者最新版本，我是用得最新版本18
创建一个nuxt项目
npx nuxi init <project-name>
切换到刚创建的项目根目录
cd <project-name>
下载相关依赖
npm install
Nuxt3 的目录结构
- assets/: 存放静态资源文件，如样式、图片、字体等。
- components/: 存放组件文件，可以在页面中引用。
- layouts/: 存放布局文件，可以在页面中引用。
- middleware/: 存放中间件文件，可以在路由中使用。
- composables/: 存放可重用的逻辑代码，可以在页面、组件和插件中使用。
- pages/: 存放页面文件，每个文件对应一个路由。
- plugins/: 存放插件文件，可以在应用程序中使用。
- static/: 存放静态文件，如 robots.txt、favicon.ico 等。
- store/: 存放 Vuex store 文件。
- server/: 存放服务器端代码，包括中间件、API、插件等等。
- utils/: 存放工具函数文件。
- nuxt.config.ts: Nuxt3 的配置文件，使用 TypeScript 编写。
- package.json: 项目的依赖和脚本配置文件。
- tsconfig.json: TypeScript 的配置文件。
引入Ant Design Vue
我使用得是最新版本 4.1.2
https://next.antdv.com/components/overview
安装
npm install ant-design-vue@4.x --save
plugins文件夹下创建ant-design-vue.ts文件
// import { Button,Layout } from'ant-design-vue';//局部功能使用
import Antd from 'ant-design-vue'; //全局使用
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(Antd); //全局使用
// nuxtApp.vueApp.use(Button).use(Layout)//局部功能使用
});
这样就可以
pinia + pinia-plugin-persistedstate 实现数据持久化存储
pinia: https://pinia.vuejs.org/zh/ssr/nuxt.html
pinia-plugin-persistedstate: https://prazdevs.github.io/pinia-plugin-persistedstate/zh/frameworks/nuxt-3.html
在nuxt.config.ts配置
export default defineNuxtConfig({
modules: ['@pinia/nuxt', '@pinia-plugin-persistedstate/nuxt'],
})
创建在根目录下创建stores/user.ts
import { defineStore } from "pinia"; // 引入pinia
// stores/user
export const useUserStateStore = defineStore("main", {
state: () => {
return {
token: "",
isAngelUser: '',
isVIPUser: '',
userInfo: ''
};
},
persist: process.client && { // 仅在客户端使用
storage: localStorage, // localStorage 本地存储，可替换sessionStorage
},
});
在页面中设置和使用
import { useUserStateStore } from "~/store/user";
export default defineComponent({
name: 'echartsEdit',
components: {
StarOutlined,
StarFilled,
StarTwoTone,
MessageOutlined
},
setup() {
const store = useUserStateStore(); //定义store
store.token = '123'; // 设置
return {
}
},
})
使用
const store = useUserStateStore();
var a = store.token;
