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不存在 且路径不是login
  if (!token && to.path != "/login") {
    return next({ path: "/login" });
  }
  // 如果token存在 路径为login
  if (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.meta
  let title = (to.meta.title ? to.meta.title : "" ) + "-这里是标题" 
  // console.log(title)
  // 设置页面的title
  document.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.status
  		if(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预处理器等