从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()
  ],
});