从0到1实现vue3+vite++elementuiPlus+ts的后台管理系统（一）

前言：从这篇文章开始实现vue3+vite的后台管理系统，记录下自己搭建后台系统图的过程。这篇文章完成项目的初始化和基本配置，这一步可以直接跟着vue3官网进行。整个系列只有前端部分，不涉及后端。

vue3官网：https://cn.vuejs.org/guide/quick-start.html

这是项目的node和npm版本：

1.项目初始化

npm create vue@latest 
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
}

安装pinia，pinia是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 pinia

pinia-plugin-persistedstate 插件可以将pinia数据自动保存到浏览器本地存储

下面的例子帮助大家理解，在页面新增登录、退出按钮，登录时将数据存到pinia，使用这个插件后发现，浏览器会同时存储这些数据。

HelloWorld.vue文件的代码如下：

<el-button type="primary" @click="login">登录</el-button>
<el-button type="primary" @click="unlogin">退出</el-button><h1>{{ msg }}</h1>import { 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 = ref<Number>(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 = ref<User>({name:'abc',avatar: '123', // 头像mobile: '13221091091', //   手机号account: 'lita', // 用户名id: 1});const setUserInfo = (u:User) =>{userInfo.value = u;}const clearUserInfo = () =>{// void 是用来创建 undefined，不管它后面跟个啥，得到的都是 undefined；userInfo.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()],
});