❤ Vue3+vite搭建系统篇（二）

❤ Vue3+vite搭建篇（二）

1、项目Vite 配置公共引用路径@

（1）引入路径和定位跟目录

打开vite.config.ts配置

import path from 'path'
resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src')
        }
  },

（2）vite.config.ts完整如下

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src')
        }
  },
})

2、配置后台主页admin和pc主页pc

（1）添加admin和PC主页面路由

（2）添加admin和PC页面

（3）主页面加入按钮

<div class="about">
    <el-button type="primary">我是主页</el-button>
    <el-button type="primary" @click="totiao('pc')">PC</el-button>
    <el-button type="primary" @click="totiao('admin')">admin</el-button>
  </div>

（4）使用vue3语法糖，导入路由进行跳转

<script setup>
import {useRouter} from 'vue-router'
const router=useRouter();

function totiao(row){
  router.push(row);
}
</script>

PC和admin均可以正常跳转

3、配置路由拦截

（1）概述

我们的网页需要用户登录后才可以进行显示，不然将其拦截到登录页面。 登录成功后，前端的 header 加上 token 值。如果 token 值为空，说明未登录

在src下新建utils文件夹 定义白名单 设置路由守卫

（2）permission.ts里面配置相对应的规则

这里我简单的将规则给总结了一下

想法 将所有的Pc页面添加进入白名单---未采用
条件如下

1 在免登录白名单--或者有token，直接进入--不检测

2 没token验证去的地方

3 没token验证--去的地方admin---去login 4 没token验证--去的地方pc子页面---PC子页面进入

5 其他进入pc主页面

所以我们的permission.ts 文件里面的内容就如下

import router from '@/router'
const whiteList = ['/','/pc','/register', '/login', '/about', '/main', '/demo','admin']; //定义白名单 

// 路由守卫
router.beforeEach((to, from, next) => {

    // 将所有的Pc页面添加进入白名单---未采用
    // 1 在免登录白名单--或者有token，直接进入--不检测
    // 2 没token验证去的地方
    // 3 没token验证--去的地方admin---去login
    // 4 没token验证--去的地方pc子页面---PC子页面进入
    // 5 其他进入pc主页面

    if (whiteList.indexOf(to.path) !== -1||localStorage.getItem('login')) {
        console.log('白名单或者token账号进入1!');
        next();
    }
    else if(to.name == 'admin'){
        next('/login')  
    }
    else if(to.matched.length!=0){
          console.log(to.matched.map((item)=>item.name).indexOf('pc')!=-1,'循环');
          if(to.matched.map((item)=>item.name).indexOf('pc')!=-1){
            console.log('PC子页面进入!');
            next()
          }
          else{next('/pc')}
    }
    else {
     console.log('其他进入pc主页面5!');
     next('/pc')
   }
});
router.afterEach(() => {
    console.log('路由加载完成！');
});
export { permission }

（3）路由守卫作用（可跳过）

上面代码我们简单写了一个路由守卫，其作用如下:

在路由切换前进行权限验证和导航控制,控制路由权限和导航逻辑，根据一定的规则来判断是否允许用户访问某个页面，以及在路由切换时执行相关操作。

1. 首先，通过 import 语句引入了 router 实例。

2. 定义了一个 whiteList 数组，其中包含了一些不需要进行权限验证的路由路径，也就是所谓的白名单。

3. 使用 router.beforeEach() 方法注册一个全局前置守卫，该守卫会在每次路由切换前被调用。

4. 在守卫函数中，根据一定的逻辑判断来决定是否允许进行路由切换：

   • 如果当前路由路径在白名单中，或者本地存储中存在登录信息（即已经登录），则直接执行 next() 函数，允许路由切换。

   • 如果跳转的目标路由是 "admin"，则强制跳转到登录页 "/login"。

   • 如果跳转的目标路由的 matched 数组长度不为零（即匹配到了路由配置），则进一步判断是否有名为 "pc" 的子路由：

     • 如果有，则直接执行 next() 函数，允许路由切换。
     • 如果没有，则强制跳转到 "pc" 页面。

   • 如果以上条件都不满足，说明是其他情况，强制跳转到 "pc" 页面。

5. 使用 router.afterEach() 方法注册一个全局后置钩子，该钩子会在每次路由切换完成后被调用。

6. 最后通过 export 导出了一个名为 permission 的对象（可能是其他代码中引用了该对象）。

（4）使用

在根目录的main.ts里面引入和使用

import * as Permission from "@/utils/permission.ts";  //路由请求拦截器
const app = createApp(App)
app.use(Permission)
app.mount('#app')//挂载

效果： 当我们点击PC,白名单进入

当我们点击admin时候,存在路由拦截，没有token进入login登录界面

4、进度条NProgress引入：

nprogress官网可以去我的这个博客书签里面找 nexuslinnoa.gitee.io/nexusmark?u...

使用nprogress实现全局loading进度条

安装

yarn add  nprogress

引入使用NProgress进度条

在src文件夹新建components文件夹，下面新建progress文件夹引进NProgress

import NProgress from "nprogress";
import "nprogress/nprogress.css";
NProgress.configure({
  // 动画方式
  easing: "ease",
  // 递增进度条的速度
  speed: 500,
  // 是否显示加载ico
  showSpinner: false,
  // 自动递增间隔
  trickleSpeed: 200,
  // 初始化时的最小百分比
  minimum: 0.3
});
export default NProgress;

在permission.ts里面进行使用

NProgress.start() //使用
NProgress.done()  //停止



在permission.ts里面进行使用 
import NProgress from "@/components/progress";
NProgress.configure({ showSpinner: false }); // 显示右上角螺旋加载提示

// 路由守卫
router.beforeEach((to, from, next) => {
    ...
    NProgress.start(); //开启进度条
});
router.afterEach(() => {
    ...
    NProgress.done(); //结束进度条
});

自定义背景样式和颜色

（1）assets下新建main.css

（2）在main.ts里面引入样式main.css

import './assets/main.css' //引入主要样式

（3） main.css样式如下

/*自定义进度条颜色*/
#nprogress .bar {   
  background:red important;  /*  自定义颜色*/
}

（4）效果如下