高端大气企业网站源码,网站ui设计兼职,wordpress 会员账单,我自己做的网站怎么能查到最近官网搭建选择了nuxtjs#xff0c;由于框架更新了#xff0c;其中语法也有很多变化#xff0c;中间遇到了一些问题点做下总结。 nuxt3官方文档地址#xff1a;https://nuxt.com/docs/getting-started/installation
安装
在安装Nuxt3之前#xff0c;你需要保证你的nod… 最近官网搭建选择了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-vue4.x --saveplugins文件夹下创建ant-design-vue.ts文件
// import { Button,Layout } fromant-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(); //定义storestore.token 123; // 设置return {}},
})使用
const store useUserStateStore();
var a store.token;
