❤ 项目配置

接下来我们就对我们的项目进行一些基础的配置，方便我们开发

1、配置公共路径@

很多时候我们引入项目之中的资源和图片都是在src目录下的子目录，用相对路径非常麻烦，所以我们使用@来定位我们的src目录下的资源

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

☞ 打开根目录下的vite.config.ts进行配置，使用@来定位我们的src目录下的资源

下面的src就是我们想要配置的地址

   resolve: {
        // 解决公共路径问题
        alias: {
            '@': path.resolve(__dirname, 'src')
        }
    },

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

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'path'
export default defineConfig({
   resolve: {
        // 解决公共路径问题
        alias: {
            '@': path.resolve(__dirname, 'src')
        }
    },
})

使用的时候只要记得@就是我们的src就可以了

import { login } from "@/api/login";

2、配置进度条NProgress

nprogress官网地址

https://ricostacruz.com/nprogress/

☞ 安装

yarn add  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;

搭建完成路由和axios以后，接下来我们就可以使用nprogress实现全局loading进度条了

☞ 在permission.ts里面进行使用

bashNProgress.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(); //结束进度条
});

3、cookies处理

想要处理并且存储我们项目的cookies，我们需要引入一个cookies插件，这里我使用的是js-cookie。

☞ 安装

yarn add js-cookie

☞ 引入

import Cookies from 'js-cookie'

☞ 使用

• 添加cookie

// 创建一个名称为name，对应值为value的cookie，由于没有设置失效时间，默认失效时间为该网站关闭时
Cookies.set(name, value)

// 创建一个有效时间为7天的cookie
Cookies.set(name, value, { expires: 7 })

// 创建一个带有路径的cookie
Cookies.set(name, value, { path: '' })

// 创建一个value为对象的cookie
const obj = { name: 'ryan' }
Cookies.set('user', obj)

• 获取cookie

//获取指定名称的cookie
Cookies.get(name) // value

// 获取value为对象的cookie
const obj = { name: 'ryan' }
Cookies.set('user', obj)
JSON.parse(Cookies.get('user'))

// 获取所有cookie
Cookies.get()

• 删除cookie

// 删除指定名称的cookie
Cookies.remove(name) // value

// 删除带有路径的cookie
Cookies.set(name, value, { path: '' })
Cookies.remove(name, { path: '' })

4、自定义全局样式

（1）assets下新建index.css

☞ src => assets => styles => index.css

可以建立其他css在这里统一管理

/*1重置样式表*/
@import './reset.css';

/*自定义动画库*/
@import './animove.css';

（2）引入

☞ 在main.ts里面引入样式main.css

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

（3）定义进度条样式

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

（4）效果如下