vue3项目中的常用插件

1、路由组件

npm install vue-router@4

路由配置

import { createWebHashHistory, createRouter } from "vue-router";
//引入主布局
import Admin from "@/pages/layout/admin.vue";
import Index from "@/pages/index/index.vue";
import NotFound from "@/pages/error/404.vue";
import Login from "@/pages/login/index.vue"const routes = [{path:'/',component:Admin,children:[{path: "/",component: Index,meta:{title:'后台首页'}},]},{path:'/login',component:Login,meta:{title:'登录'}},{path: "/:pathMatch(.*)*",name: "NotFound",component: NotFound,},
];const router = createRouter({history: createWebHashHistory(),routes,
});export  {router}

路由守卫

import { getCookie } from "@/utils";
import { router } from "@/router";
import { store } from "@/store";
import { showLoading,hiddenLoading } from "@/utils";//全局前置守卫
router.beforeEach(async (to, from, next) => {showLoading()const token = getCookie("token");// 如果token不存在 且路径不是loginif (!token && to.path != "/login") {return next({ path: "/login" });}// 如果token存在 路径为loginif (token && to.path == "/login") {return next({path: from.path ? from.path : "/",});}if (token) {// console.log('token is success')await store.dispatch('getUserInfo')// store.dispatch('getUseInfo')}//获取页面的title// const { title } = to.metalet title = (to.meta.title ? to.meta.title : "" ) + "-这里是标题" // console.log(title)// 设置页面的titledocument.title = title// console.log(to.meta)next();});
// 全局后置守卫
router.afterEach((to, from) => {hiddenLoading()
})

2、vuex 用来全局状态共享

npm install vuex@next --save

vuex的配置

import { createStore } from "vuex";
import { getInfo } from "@/api/manager";
export const store = createStore({state:{userInfo: { },},mutations: {// 修改state的值需要使用mutations里边的方法// 后期使用的时候 第一个参数为方法名  第二个参数为数据setUserInfo(state, userInfo) {state.userInfo = userInfo;},},actions:{getUserInfo({commit}){return new Promise((resolve,reject)=>{getInfo().then(res=>{commit('setUserInfo',res.data)resolve(res)}).catch(error=>reject(error))})},logout({commit}){commit('setUserInfo',{})}}
});

3、vuex的数据持久化

npm i vuex-persistedstate

配置

import { createStore } from "vuex"
... //导入模块
import createPersistedstate from "vuex-persistedstate" //引入本地化插件
const store  = createStore({modules:{......}，plugins:[createPersistedstate({key:'',//本地存储的名字//需要持久化模块paths:["demo1","demo2",]})]
)

4、使用cookie

npm i @vueuse/core
npm i @vueuse/integrations
npm i universal-cookie

使用

import {useCookie} from "@vueuse/integrations/useCookies"const cookie = useCookies()
// get set remove

5、https请求 axios

npm install axios --save

axios配置

import axios from "axios"const service = axios.create({baseUrl:'',timeoute:2000,...
})//拦截器
// 添加请求拦截器
service.request.use(function (config) {// 在发送请求之前做些什么// 举例 添加头部const token = '' //从cookie或者其他地方获取if(token){config.headers.token = token// config.headers['token'] = token 推荐}return config;}, function (error) {// 对请求错误做些什么return Promise.reject(error);});// 添加响应拦截器
service.response.use(function (response) {// 对响应数据做点什么return response;}, function (error) {//获取响应码const status = error.reponse.statusif(status == 401){// 一般情况为未授权 执行未授权的逻辑 // 给出提示或者直接跳转到登录页面 router.push('/login') //假设已经引入路由}else if(status == ...){....}else{....}// 对响应错误做点什么return Promise.reject(error);});

6. loading插件

npm install nprogress

nprogress 配置

import nprogress from "nprogress"
// 启用loading
nprogress.start()
// 结束loading
nprogress.done()

其余插件为UI库，代码规范，代码检查，CSS预处理器等