前言：從這篇文章開始實(shí)現(xiàn)vue3+vite的后臺(tái)管理系統(tǒng)，記錄下自己搭建后臺(tái)系統(tǒng)圖的過程。 這篇文章完成項(xiàng)目的初始化和基本配置，這一步可以直接跟著vue3官網(wǎng)進(jìn)行。整個(gè)系列只有前端部分，不涉及后端。

vue3官網(wǎng)：https://cn.vuejs.org/guide/quick-start.html

這是項(xiàng)目的node和npm版本：

1.項(xiàng)目初始化

npm create vue@latest 
cd vite-ts-vueadmin 
npm install 
npm run dev

項(xiàng)目運(yùn)行成功截圖：

2.安裝系統(tǒng)所需依賴

這個(gè)項(xiàng)目是用ts寫的，先安裝下支持typescript的node.js支持類型文件。

npm install @types/node --save-dev

安裝后，在項(xiàng)目根目錄下建types文件夾，types/user.d.ts 創(chuàng)建ts的變量聲明類型

interface User {token: string;avatar: string; // 頭像mobile:string; //   手機(jī)號(hào)account:string; // 用戶名id:number; // 用戶id
}

3.然后在?vue.config.js?文件下配置

interface User {token: string;avatar: string; // 頭像mobile:string; //   手機(jī)號(hào)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數(shù)據(jù)自動(dòng)保存到瀏覽器本地存儲(chǔ)

下面的例子幫助大家理解，在頁(yè)面新增登錄、退出按鈕，登錄時(shí)將數(shù)據(jù)存到pinia，使用這個(gè)插件后發(fā)現(xiàn)，瀏覽器會(huì)同時(shí)存儲(chǔ)這些數(shù)據(jù)。

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中的屬性解構(gòu)出來，具有響應(yīng)式,storeToRefs(store.userinfo) 是錯(cuò)誤的，storeToRefs只能解構(gòu)store對(duì)象為響應(yīng)式對(duì)象
// 解構(gòu)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', //   手機(jī)號(hào)account: 'lita', // 用戶名id: 1});const setUserInfo = (u:User) =>{userInfo.value = u;}const clearUserInfo = () =>{// void 是用來創(chuàng)建 undefined，不管它后面跟個(gè)啥，得到的都是 undefined；userInfo.value = void 0;// 上面的代碼代表 userinfo.value = undefined;}return { userInfo ,setUserInfo, clearUserInfo }
},{persist: true})

點(diǎn)擊登錄，數(shù)據(jù)會(huì)被存儲(chǔ)到localStorage，點(diǎn)擊退出，localstorage里面的數(shù)據(jù)會(huì)清空

4.繼續(xù)安裝插件和組件

npm i elementui-plus
npm i unplugin-auto-import/vite
npm i unplugin-vue-components/vite

unplugin-auto-import/vite：在組件內(nèi)部自動(dòng)import

unplugin-vue-components/vite：在組件內(nèi)部引入其他組件時(shí)可以省略import

ElementPlusResolver：在使用elemtuiPlus組件時(shí)，無需引入，直接使用即可。

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'], // 自動(dòng)導(dǎo)入vue和vue-router相關(guān)函數(shù)resolvers: [ElementPlusResolver()],//這樣就不用在main.js中使用import來導(dǎo)入element-plus了}),Components({resolvers: [ElementPlusResolver()] // 這樣我們就可以在組件中不需要引入就可以使用elementui-plus中的組件了}),vue()],
});