淘宝客网站需要备案,网站中查看熊掌号怎么做的,百度下载安装app,正宗营销型网站建设前言#xff1a;从这篇文章开始实现vue3vite的后台管理系统#xff0c;记录下自己搭建后台系统图的过程。 这篇文章完成项目的初始化和基本配置#xff0c;这一步可以直接跟着vue3官网进行。整个系列只有前端部分#xff0c;不涉及后端。
vue3官网#xff1a;https://cn.…前言从这篇文章开始实现vue3vite的后台管理系统记录下自己搭建后台系统图的过程。 这篇文章完成项目的初始化和基本配置这一步可以直接跟着vue3官网进行。整个系列只有前端部分不涉及后端。
vue3官网https://cn.vuejs.org/guide/quick-start.html
这是项目的node和npm版本 1.项目初始化
npm create vuelatest
cd vite-ts-vueadmin
npm install
npm run dev
项目运行成功截图 2.安装系统所需依赖
这个项目是用ts写的先安装下支持typescript的node.js支持类型文件。
npm install types/node --save-dev
安装后在项目根目录下建types文件夹types/user.d.ts 创建ts的变量声明类型
interface User {token: string;avatar: string; // 头像mobile:string; // 手机号account:string; // 用户名id:number; // 用户id
}
3.然后在 vue.config.js 文件下配置
interface User {token: string;avatar: string; // 头像mobile:string; // 手机号account:string; // 用户名id:number; // 用户id
}
安装piniapinia是vue2中的vuex 安装好pinia后在安装插件pinia-plugin-persistedstate
npm install pinia
npm install pinia-plugin-persistedstate
使用在store/index.ts
import { createPinia } from pinia
import persist from pinia-plugin-persistedstate;const pinia createPinia();
pinia.use(persist);export default piniapinia-plugin-persistedstate 插件可以将pinia数据自动保存到浏览器本地存储
下面的例子帮助大家理解在页面新增登录、退出按钮登录时将数据存到pinia使用这个插件后发现浏览器会同时存储这些数据。
HelloWorld.vue文件的代码如下
el-button typeprimary clicklogin登录/el-button
el-button typeprimary clickunlogin退出/el-buttonh1{{ msg }}/h1import { storeToRefs } from pinia
import { toRefs } from vue
import { usersStore } from /store/user
const store usersStore()// storeToRefs(store) 将store中的属性解构出来具有响应式,storeToRefs(store.userinfo) 是错误的storeToRefs只能解构store对象为响应式对象
// 解构store中的属性 不使用storeToRefs
const { name,mobile } toRefs(store.userInfo)
console.log(name.value,mobile)
const count refNumber(0)
const login (){store.setUserInfo({name:张三,mobile:13221081920,})
}
const unlogin (){store.clearUserInfo()
}
新建store/user.ts文件定义一些登录后的信息
import { defineStore } from pinia;
import { ref } from vue;
import type { User } from /types/user; export const usersStore defineStore(users, () {const userInfo refUser({name:abc,avatar: 123, // 头像mobile: 13221091091, // 手机号account: lita, // 用户名id: 1});const setUserInfo (u:User) {userInfo.value u;}const clearUserInfo () {// void 是用来创建 undefined不管它后面跟个啥得到的都是 undefineduserInfo.value void 0;// 上面的代码代表 userinfo.value undefined;}return { userInfo ,setUserInfo, clearUserInfo }
},{persist: true})
点击登录数据会被存储到localStorage点击退出localstorage里面的数据会清空
4.继续安装插件和组件
npm i elementui-plus
npm i unplugin-auto-import/vite
npm i unplugin-vue-components/vite
unplugin-auto-import/vite在组件内部自动import
unplugin-vue-components/vite在组件内部引入其他组件时可以省略import
ElementPlusResolver在使用elemtuiPlus组件时无需引入直接使用即可。
import { ElementPlusResolver } from unplugin-vue-components/resolvers
在vue.config.js文件中加入下面的代码
import AutoImport from unplugin-auto-import/vite
import Components from unplugin-vue-components/vite
import { ElementPlusResolver } from unplugin-vue-components/resolvers// https://vite.dev/config/
export default defineConfig({plugins: [AutoImport ({imports: [vue,vue-router], // 自动导入vue和vue-router相关函数resolvers: [ElementPlusResolver()],//这样就不用在main.js中使用import来导入element-plus了}),Components({resolvers: [ElementPlusResolver()] // 这样我们就可以在组件中不需要引入就可以使用elementui-plus中的组件了}),vue()],
});
