一、基础项目搭建:
- 技术栈
技术栈 | 描述 | 官网 |
---|---|---|
Vue3 | 渐进式 JavaScript 框架 | https://cn.vuejs.org/ |
Element Plus | 基于 Vue 3,面向设计师和开发者的组件库 | https://element-plus.gitee.io/zh-CN/ |
Vite | 前端开发与构建工具 | https://cn.vitejs.dev/guide/ |
TypeScript | 开发语言,是 JavaScript 的超集 | |
Vue Router | Vue.js 的官方路由 | https://router.vuejs.org/zh/ |
wangEditor | Typescript 开发的 Web 富文本编辑器 | www.wangeditor.com/ |
Echarts | 开源可视化图表库 | https://echarts.apache.org/zh/ |
vue-i18n | Vue 国际化多语言插件 | https://vue-i18n.intlify.dev/ |
VueUse | 基于Vue组合式API的实用工具集(类比HuTool工具) | http://www.vueusejs.com/guide/ |
- 环境准备
环境 | 名称 |
---|---|
运行环境 | Node 16+ |
开发工具 | VSCode |
VSCode插件 | Vue Language Features (Volar) TypeScript Vue Plugin (Volar) ,禁用Vetur |
推荐安装nvm控制node版本
1. 项目初始化
按照 vite 官网搭建第一个 Vite 项目,执行以下命令完成 vue 、typescirpt 模板项目的初始化
npm init vite@latest vue3-element-admin --template vue-ts
2. 使用Vscode启动项目
npm install
npm run dev
3. src 路径别名配置
相对路径别名配置,使用 @ 代替 src
配置 vite.config.ts
npm install @types/node
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path"; //这个path用到了上面安装的@types/node
const pathSrc = path.resolve(__dirname, "src");
// https://vitejs.dev/config/
export default defineConfig({// 路径别名resolve: {alias: {"@": pathSrc, // @代替src},},plugins: [vue()],
});
// src/App.vue
import HelloWorld from '../src/components/HelloWorld.vue'import HelloWorld from '@/components/HelloWorld.vue'
修改tsconfig.json
"compilerOptions": {..."baseUrl": "./", // 解析非相对模块的基地址,默认是当前目录"paths": { // 路径映射,相对于baseUrl"@/*": ["src/*"] }
}
二、使用Element Plus组件库
1. 安装
# 选择一个你喜欢的包管理器# NPM
$ npm install element-plus --save# Yarn
$ yarn add element-plus# pnpm
$ pnpm install element-plus
2. 用法
2.1 完整引入
如果你对打包后的文件大小不是很在乎,那么使用完整导入会更方便。
// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'const app = createApp(App)app.use(ElementPlus)
app.mount('#app')
2.2 按需导入
您需要使用额外的插件来导入要使用的组件。
2.3 自动导入(推荐)
首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件
npm install -D unplugin-vue-components unplugin-auto-import
vite.config.ts - 自动导入配置
src
目录下,新建 types
目录,用于存放自动导入函数和组件的TS类型声明文件。
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";import path from "path"; //这个path用到了上面安装的@types/node
const pathSrc = path.resolve(__dirname, "src");
// https://vitejs.dev/config/
export default defineConfig({// 路径别名resolve: {alias: {"@": pathSrc, // @代替src},},plugins: [vue(),AutoImport({// 自动导入 Vue 相关函数,如:ref, reactive, toRef 等imports: ["vue"],eslintrc: {enabled: true, // 是否自动生成 eslint 规则,建议生成之后设置 falsefilepath: "./.eslintrc-auto-import.json", // 指定自动导入函数 eslint 规则的文件},dts: path.resolve(pathSrc, "types", "auto-imports.d.ts"), // 指定自动导入函数TS类型声明文件路径}),Components({dts: path.resolve(pathSrc, "types", "components.d.ts"), // 指定自动导入组件TS类型声明文件路径}),],
});
.eslintrc.cjs - 自动导入函数 eslint 规则引入
"extends": ["./.eslintrc-auto-import.json"
],
2.4 手动导入
Element Plus 提供了基于 ES Module 的开箱即用的 Tree Shaking 功能。
但你需要安装 unplugin-element-plus 来导入样式。 配置文档参考 docs
App.vue
<template><el-button>我是 ElButton</el-button>
</template>
<script>import { ElButton } from 'element-plus'export default {components: { ElButton },}
</script>
// vite.config.ts
import { defineConfig } from 'vite'
import ElementPlus from 'unplugin-element-plus/vite'export default defineConfig({// ...plugins: [ElementPlus()],
})
三、使用全局状态管理工具 pinia
pinia 官网
1. pinia介绍
Pinia 是 Vue 的专属状态管理库,它允许你跨组件或页面共享状态。
pinia优点:
- 支持Vue2和Vue3,也就是老项目也可以使用Pinia。
- 足够轻量,压缩后的体积只有1kb左右。
- 完整的TypeScript支持,Vue3版本的一大优势就是对TypeScript的支持,所以Pinia也做到了完整的支持。如果你对Vuex很熟悉的化,一定知道Vuex对TS的语法支持不是完整的。
- 代码更加简洁,可以实现很好的代码自动分割。Vue2的时代,写代码需要来回翻滚屏幕屏幕找变量,非常的麻烦,Vue3的Composition api完美了解决这个问题。 可以实现代码自动分割,pinia也同样继承了这个优点。
- 去除 mutations,只有 state,getters,actions;actions 支持同步和异步。
- 不需要嵌套模块,让代码更加扁平化,只有 store 的概念,store 之间可以自由使用,每一个store都是独立的,符合Vue3的Composition api 。
- 无需手动添加 store,store 一旦创建便会自动添加。
1.1 安装
yarn add pinia
# 或者使用 npm
npm install pinia
1.2 引入
创建一个 pinia 实例 (根 store) 并将其传递给应用:
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'const pinia = createPinia()
const app = createApp(App)app.use(pinia)
app.mount('#app')
1.3 使用
在 src
文件夹下创建 store
文件夹,并添加 counter.js
文件。
2. Pinia中的Store
2.1 定义store
Store
(如 Pinia)是一个保存状态和业务逻辑的实体,它并不与你的组件树绑定。换句话说,它承载着全局状态。它有点像一个永远存在的组件,每个组件都可以读取和写入它。它有三个概念,state
、getter
和action
,我们可以假设这些概念相当于组件中的data
、computed
和methods
。store
是用defineStore(name, function | options)
定义的,建议其函数返回的值命名为use…Store
方便理解
- 参数
name
:必填值且唯一,简单点说就可以理解成是一个命名空间。 - 参数
function | options
:可以是对象或函数形式。 -
- 对象形式【选项模式】,其中配置
state
、getters
和actions
选项。
- 对象形式【选项模式】,其中配置
-
- 函数形式【组合模式,类似组件组合式 API 的书写方式】,定义响应式变量和方法,并且 return 对应的变量和方法;ref() 相当于 state,computed() 相当于 getters,function() 相当于 actions。
2.2 使用store读取和写入 state
下面案例以选项模式为例:
在 store
文件夹下创建 counter.js
文件,这个文件就是存有关 counter 的一些相关的数据。
import {defineStore} from 'pinia'/*defineStore 是需要传参数的,其中第一个参数是id,就是一个唯一的值,
简单点说就可以理解成是一个命名空间.
第二个参数就是一个对象,里面有三个模块需要处理,第一个是 state,
第二个是 getters,第三个是 actions。
*/
const useCounter = defineStore("counter",{state:() => ({count:88,}),getters: {},actions: {}
})//暴露useCounter这个模块
export default useCounter
在页面中使用:
<template><div><el-button>我是 ElButton</el-button><div>store===>counter.js的count值:{{ counterStore.count }}</div></div>
</template><script setup>
// 引入创建的store
import useCounter from "./store/counter";
// 调用store里的方法
const counterStore = useCounter();
console.log("counterStore", counterStore.count);
</script><style scoped></style>
**注意:**在使用时 ,取值时不用和 vuex 一样还要.state,直接.state里面的count值就行了,写法:counterStore.count。
案例需求,点击按钮加一:
我们分别用两种方法取count值,一个解构,一个不解构
<template><div><h2>Home Word</h2><h2>展示pinia的counter的count值: {{ counterStore.count }}</h2><h2>展示解构出来的pinia的counter的count值: {{ count }}</h2><el-button @click="addCount">function count+1</el-button></div>
</template><script setup>
// 引入创建的store
import useCounter from "./store/counter";
// 调用store里的方法
const counterStore = useCounter();
// 结构count值
const { count } = counterStore;
function addCount() {//这里可以直接操作count,修改(写入)store,在vuex还要commit在mutaitions修改数据counterStore.count++;
}
</script>
我们发现解构出来的值 失去响应式了。
解决方案:
为了从 store
中提取属性时保持其响应性,你需要使用 storeToRefs()
。它将为每一个响应式属性创建引用。当你只使用 store 的状态而不调用任何 action 时,它会非常有用。
<template><div><h2>Home Word</h2><!-- 使用useCounter的实例获取state中的值 --><h2>展示pinia的counter的count值: {{ counterStore.count }}</h2><h2>展示解构出来的pinia的counter的count值: {{ count }}</h2><el-button @click="addCount">function count+1</el-button></div>
</template><script setup>
import { storeToRefs } from "pinia";
// 引入创建的store
import useCounter from "./store/counter";
// 调用store里的方法
const counterStore = useCounter();
// 结构count值
const { count } = storeToRefs(counterStore);
function addCount() {//这里可以直接操作count,修改(写入)store,在vuex还要commit在mutaitions修改数据counterStore.count++;
}
</script>
2.3 修改state数据
- 定义一个关于user的Store
import { defineStore } from 'pinia'const useUser = defineStore("user", {state: () => ({name: "why",age: 18,level: 100}),actions:{setCurrent () {this.level++}}
})export default useUser
- 三种修改state的方法
<template><div><h2>Home Word</h2><h2>姓名: {{ name }}</h2><h2>年龄: {{ age }}</h2><h2>等级: {{ level }}</h2><el-button @click="updateStore">修改user信息</el-button><el-button @click="updateStoreLevel">修改level</el-button></div>
</template><script setup>
import useUser from "./store/user";
import { storeToRefs } from "pinia";
const userStore = useUser();
const { name, age, level } = storeToRefs(userStore);function updateStore() {// 方法一:一个个的修改状态// userStore.name = "zimo";// userStore.age = 20;// 方法二 :一次性修改多个状态// userStore.$patch({// name: "zimo",// age: 20,// });// 方法三:替换state为新的对象const oldState = userStore.$state;userStore.$state = {...userStore.$state,name: "curry",level: 200,};// 下面会返回trueconsole.log(oldState === userStore.$state);
}
// 方法四:通过actions修改
const updateStoreLevel = () => {userStore.setCurrent();
};
</script>
2.4 重置state数据
新增一个重置按钮:
<el-button @click="resetStore">重置user信息</el-button>
新增一个重置方法:
function resetStore() {userStore.$reset();
}
3. Pinia中的getters
getters 类似于 vue 里面的计算属性,可以对已有的数据进行修饰。getters中可以定义接受一个state作为参数的函数,不管调用多少次,getters中的函数只会执行一次,且都会缓存。
3.1 定义getters
- 基本使用
- 一个getter引入另外一个getter
- getters也支持返回一个函数
- getters中用到别的store中的数据
// 定义关于counter的store
import { defineStore } from 'pinia'const useCounter = defineStore("counter", {state: () => ({count: 99}),getters: {// 1.基本使用doubleCount(state) {return state.count * 2},// 2.一个getter引入另外一个getterdoubleCountAddOne() {// this是store实例,可以直接使用另一个getterreturn this.doubleCount + 1},// 3.getters也支持返回一个函数getFriendById(state) {return function(id) {return id}},// 4.getters中用到别的store中的数据showMessage(state) {//获取user信息,拿到useUser模块const userStore = useUser()//拼接信息return `name:${userStore.name}-count:${state.count}`} },
})export default useCounter
3.2 访问getters
<template><div><!-- 在模板中使用 --><h2>基本使用:doubleCount: {{ counterStore.doubleCount }}</h2><h2>一个getter引入另外一个getter:doubleCountAddOne:{{ counterStore.doubleCountAddOne }}</h2><h2>函数id-99: {{ counterStore.getFriendById(99) }}</h2><h2>getters中获取另一个store中的state/getters数据==>showMessage:{{counterStore.showMessage}}</h2></div>
</template><script setup>
import useCounter from "./store/counter";const counterStore = useCounter();
// 在js文件中使用
const doubleCount = counterStore.doubleCount;
const doubleCountAddOne = counterStore.doubleCountAddOne;
const frend = counterStore.getFriendById(99);
</script>
**注意:**getters中用别的store中的数据 ,在counter模块中拿user模块的store数据,要引入user模块。
4. Pinia中的actions
actions
相当于组件中的 methods
。
可以使用 defineStore()
中的 actions
属性定义,并且它们非常适合定义一些业务逻辑。
和 getters
一样,在 action
中可以通过 this
访问整个 store
实例的所有操作。
4.1 同步
- 定义关于counter的store
// 定义关于counter的store
import { defineStore } from 'pinia'const useCounter = defineStore("counter", {state: () => ({count: 99,}),// 定义actionsactions: {increment() {this.count++},incrementNum(num) {this.count += num}}
})export default useCounter
- 同步使用方式
<template><div><h2>Home Word</h2><h2>doubleCount: {{ counterStore.count }}</h2><el-button @click="changeState">修改state</el-button></div>
</template><script setup>
import useCounter from "./store/counter";const counterStore = useCounter();
function changeState() {// 可以通过counterStore对象直接使用counterStore.increment();// counterStore.incrementNum(10);
}
</script>
4.2 异步
结合async await 修饰
- 定义store
import { defineStore } from 'pinia'const Login = () => {return new Promise((resolve) => {setTimeout(() => {resolve({name: 'Rlm',isLogin: true})}, 3000)})
}const useUser = defineStore("user", {state: () => ({user: {},name: "123"}),actions:{async getLoginInfo() {const result = await Login()this.user = result;}}
})export default useUser
- 页面使用
<template><div><h2>Home Word</h2><h2>user: {{ userStore.user }}</h2><el-button @click="Login">获取user</el-button></div>
</template><script setup>
import useUser from "./store/user";
const userStore = useUser();
const Login = () => {userStore.getLoginInfo();
};
</script>
- 多个action互相调用getLoginInfo setName
import { defineStore } from 'pinia'const Login = () => {return new Promise((resolve) => {setTimeout(() => {resolve({name: 'Rlm',isLogin: true})}, 3000)})
}const useUser = defineStore("user", {state: () => ({user: {},name: "123"}),actions:{async getLoginInfo() {const result = await Login()this.user = result;this.setName(result.name)},setName (name) {this.name = name;}}
})export default useUser
5. Pinia的API
5.1 重置 state
$reset() 将会把state所有值 重置回 原始状态。前面2.4 重置state数据有写到。
5.2 订阅 state
类似于 Vuex 的 subscribe 方法,你可以通过 store 的 $subscribe() 方法侦听 state 及其变化。比起普通的 watch(),使用 $subscribe() 的好处是 subscriptions 在 patch 后只触发一次 (例如,当使用上面的函数版本时)。
- 定义user store
import { defineStore } from 'pinia'const useUser = defineStore("user", {state: () => ({name: "why",age: 18,level: 100}),actions:{setCurrent () {this.level++}}
})export default useUser
- 页面使用
<template><div><h2>Home Word</h2><h2>姓名: {{ name }}</h2><h2>年龄: {{ age }}</h2><h2>等级: {{ level }}</h2><el-button @click="updateStore">修改user信息</el-button><el-button @click="updateStoreLevel">修改level</el-button><el-button @click="resetStore">重置user信息</el-button></div>
</template><script setup>
import useUser from "./store/user";
import { storeToRefs } from "pinia";
const userStore = useUser();
const { name, age, level } = storeToRefs(userStore);userStore.$subscribe((mutation, state) => {// mutation.type // type的三种类型 'direct' | 'patch object' | 'patch function'// 和 cartStore.$id 一样// mutation.storeId // 'user'// payload只有 mutation.type === 'patch object'的情况下才可用// mutation.payload // 传递给 cartStore.$patch() 的补丁对象。console.log(mutation, state);// 每当状态发生变化时,将整个 state 持久化到本地存储。localStorage.setItem("user", JSON.stringify(state));
});function updateStore() {// 方法一:一个个的修改状态 订阅 state type 为 'direct'// userStore.name = "zimo";// userStore.age = 20;// 方法二 :一次性修改多个状态 订阅 state type 为 'patch object'userStore.$patch({name: "zimo",age: 20,});// 方法三:替换state为新的对象 订阅 state type 为 'patch function'// const oldState = userStore.$state;// userStore.$state = {// ...userStore.$state,// name: "curry",// level: 200,// };// 下面会返回true// console.log(oldState === userStore.$state);
}
// 方法四:通过actions修改 订阅 state type 为 'direct'
const updateStoreLevel = () => {userStore.setCurrent();
};// 重置user信息方法
function resetStore() {userStore.$reset();
}
</script>
默认情况下,state subscription 会被绑定到添加它们的组件上 (如果 store 在组件的 setup() 里面)。这意味着,当该组件被卸载时,它们将被自动删除。如果你想在组件卸载后依旧保留它们,请将 { detached: true }
作为第二个参数,以将 state subscription 从当前组件中分离:
userStore.$subscribe((mutation, state) => {// mutation.type // 'direct' | 'patch object' | 'patch function'// 和 cartStore.$id 一样// mutation.storeId // 'user'// 只有 mutation.type === 'patch object'的情况下才可用// mutation.payload // 传递给 cartStore.$patch() 的补丁对象。console.log(mutation, state);// 每当状态发生变化时,将整个 state 持久化到本地存储。localStorage.setItem("user", JSON.stringify(state));},{detached: true,}
);
5.3 订阅 action
你可以通过 store.$onAction() 来监听 action 和它们的结果。传递给它的回调函数会在 action 本身之前执行。after 表示在 promise 解决之后,允许你在 action 解决后执行一个回调函数。同样地,onError 允许你在 action 抛出错误或 reject 时执行一个回调函数。这些函数对于追踪运行时错误非常有用,类似于Vue docs 中的这个提示。
- 定义store
import { defineStore } from 'pinia'const Login = () => {return new Promise((resolve) => {setTimeout(() => {resolve({name: 'Rlm',isLogin: true})}, 3000)})
}const useUser = defineStore("user", {state: () => ({user: {},name: "123",count:1}),actions:{async getLoginInfo() {const result = await Login()this.user = result;this.setName(result.name)},setName (name) {this.name = name;},testOnAction(id) {this.count++console.log(this.count)return Promise.resolve('这是testOnAction返回的值')},testOnAction2(...args) {console.log(...args)return Promise.reject('这是testOnAction222错误返回的值')}}
})
- 页面使用
<template><div><h2>Home Word</h2><h2>user: {{ userStore.user }}</h2><h2>name: {{ userStore.name }}</h2><el-button @click="Login">获取user</el-button></div>
</template><script setup>
import useUser from "./store/user";
const userStore = useUser();
const Login = () => {userStore.getLoginInfo();
};
// 订阅 action
const unsubscribe = userStore.$onAction(({name, // action 名称store, // store 实例,类似 `someStore`args, // 传递给 action 的参数数组after, // 在 action 返回或解决后的钩子onError, // action 抛出或拒绝的钩子}) => {// 这将在执行 "store "的 action 之前触发。console.log(`Start "${name}" with params [${args.join(", ")}].`);if (name === "testOnAction") {// 这将在 action 成功并完全运行后触发。// 它等待着任何返回的 promiseafter((reject) => {//这里可以执行一些操作console.log("订阅 action---after===>", reject);});}// 如果 action 抛出或返回一个拒绝的 promise,这将触发onError((error) => {console.log(error);});}
);// 手动删除监听器
// unsubscribe();userStore.testOnAction(1);
userStore.testOnAction2(1, 2, 3, 45);
</script>
6. Pinia 数据持久化
6.1 使用插件
- 安装 pinia-plugin-persist
npm i pinia-plugin-persist
- main.js中引入插件
// 引入pinia
import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
const pinia = createPinia()
pinia.use(piniaPluginPersist)
app.use(pinia)
- 定义store时,开启persist
import { defineStore } from 'pinia'export default defineStore('commonStore', {//开启数据存储persist: { enabled: true },state: () => {return {info: {} }},
})
- persist配置项
persist: {enabled: true,strategies: [{key: 'all', //存储的key值,默认为store名,storage: localStorage, //存储的位置,默认为sessionStoragepaths: ['info'] //需要存储的state状态,默认为所有}]},