vue3-vite-pinia模板

模板说明

下载

git clone https://github.com/AIxiaoHanBao/vue-template.git

module参数

node版本 16+

UI组件库 element-plus

持久化 pinia

网络请求 axios

路由 vue-router

使用说明

  1. 权限管理目录access
  2. 资源目录assets
  3. 组件目录components
  4. 页面目录pages
  5. 网络请求目录request
  6. 路由目录router
  7. 全局变量目录store

一、权限管理

accessEnum存放的是权限名的枚举

checkAccess是用于检验权限的

  • 重点说明checkAccess
import ACCESS_ENUM from "@/access/accessEnum";




/**
 * 检查权限(判断当前登录用户是否具有某个权限)
 * @param loginUser 当前登录用户
 * @param needAccess 需要有的权限
 * @return boolean 有无权限
 */
const checkAccess = (loginUser: any, needAccess = ACCESS_ENUM.NOT_LOGIN) => {
  // 获取当前登录用户具有的权限(如果没有 loginUser,则表示未登录)
  console.log("权限验证通过")
  return true;
};

export default checkAccess;

自行设置条件

App.vue中自行修改

// 路由权限校验
router.beforeEach(async (to, from, next)=>{
   if (checkAccess(JSON.parse(localStorage?.getItem("token")??"")?.token??""),to.meta.needAccess){
     next()
   }
})

二、网络请求管理

需要修改的地方

request.ts中请求头设置

//http request 拦截器
axios.interceptors.request.use(
    config => {
        // 配置请求头
        // @ts-ignore
        config.headers = {
            // 'Content-Type':'application/json;charset=UTF-8',
            "Authorization":localStorage.getItem("$_token")
        };
        return config;
    },
    error => {
        return Promise.reject(error);
    }
);

使用整合模板的请求示例代码userService.ts

import { request } from '../request.ts'
export class UserService{
    static async getUserInfo(id:number){
        return await request('/user/info',{id},"POST")
    }
}

三、路由管理

router/index.ts是存储主要所有路由的,想要自己添加路由在routes中自行添加

import {createRouter, createWebHashHistory } from 'vue-router'
import mainRouter from "./mainRouter.ts";




const router = createRouter({
    // history: createWebHistory(process.env.BASE_URL),
    // history: createWebHashHistory(process.env.BASE_URL),
    history: createWebHashHistory(),
    routes: [...mainRouter]
})
export default router

模板路由创建mainRouter.ts

import {RouteRecordRaw} from "vue-router";
import Test1 from "../pages/Test1.vue";
import Test2 from "../pages/Test2.vue";
import ACCESS_ENUM from "../access/accessEnum.ts";

const mainRouter: Array<RouteRecordRaw> = [
    {
        name: 'Test1',
        path: '/test1',
        component: Test1,
        meta: {
            needAccess: ACCESS_ENUM.NOT_LOGIN,
        }
    },
    {
        name: 'Test2',
        path: '/text2',
        component: Test2,
        meta: {
            needAccess: ACCESS_ENUM.NOT_LOGIN,
        }
    },
]
export default mainRouter

四、全局变量管理

UserStore.ts中的模板自行修改

要在Vue 3 + Vite项目中使用pinia-plugin-persistedstate插件,你需要按照以下步骤进行设置: 1. 首先,确保你已经安装了`pinia`和`pinia-plugin-persistedstate`插件。可以使用以下命令进行安装: ```bash npm install pinia pinia-plugin-persistedstate ``` 2. 在你的Vue 3项目的入口文件(通常是`main.js`或`main.ts`)中,引入所需的依赖项,并创建一个Pinia实例。示例代码如下: ```javascript import { createApp } from 'vue' import { createPinia } from 'pinia' import { createPersistedState } from 'pinia-plugin-persistedstate' import App from './App.vue' const pinia = createPinia() pinia.use(createPersistedState()) createApp(App).use(pinia).mount('#app') ``` 3. 在你的应用程序中,可以在需要的组件中使用Pinia提供的状态管理。示例代码如下: ```vue <template> <div> <p>Count: {{ count }}</p> <button @click="increment">Increment</button> </div> </template> <script> import { defineComponent } from 'vue' import { useStore } from 'pinia' export default defineComponent({ setup() { const store = useStore() const increment = () => { store.count++ } return { count: store.count, increment, } }, }) </script> ``` 在这个示例中,我们使用了`useStore`函数来获取Pinia的store实例,并在组件中使用了一个计数器来展示和增加一个`count`状态。 4. 现在,当你的应用程序重新加载或关闭后再次打开时,Pinia插件会自动将状态持久化到本地存储中,以便你可以保留之前的状态。 这就是在Vue 3 + Vite项目中使用pinia-plugin-persistedstate插件的基本步骤。你可以按照这些步骤进行设置,并根据自己的需求进行调整和扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

艾米莉亚小汉堡

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值