依赖使用

安装Vue Router路由（必须）

作用：控制页面路径跳转传参

vue3需要安装4.0以上版本

yarn add vue-router@4 --save

// 安装最新依赖
yarn add vue-router@latest

安装pinia（通常）

介绍

作用：管理全局状态

类似vue2的vuex状态管理，简单来说就是一个存储数据的地方，存放在Vuex中的数据在各个组件中都能访问到，它是Vue生态中重要的组成部分。

使用

安装

yarn add pinia

// 安装最新依赖
yarn add pinia@latest

修改main.ts，引入pinia提供的createPinia方法，创建根存储

import { createPinia } from 'pinia' // 引入pinia
app.use(createPinia()).use(router).mount('#app') //挂载

你的main.ts完整代码这会应该如下

完整这会应该如下：
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
// 挂载router
import router from "./router/index" // 引入router

const app = createApp(App)
app.use(createPinia()).use(router).mount('#app') //挂载

安装axios（通常）

作用：发送网络请求

安装

yarn add axios

// 安装最新依赖
yarn add axios@latest

安装ElementPlus（通常）

作用：Ui框架

☞ 安装

yarn add element-plus --save
// 安装最新依赖
yarn add element-plus@latest

☞ 完整导入ElementPlus

main.ts中引入：

// 引入组件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(createPinia()).use(ElementPlus)
app.mount('#app')

测试使用效果：

<el-button type="primary">Primary</el-button>

你的main.ts完整应该如下

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
// 挂载router
import router from "./router/index" // 引入router
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(createPinia()).use(ElementPlus).use(router).mount('#app') //挂载

到这里我们的基础环境和项目最基础的配置就已经好了...

安装echarts(非必须)

作用：图表

yarn add echarts
// 安装最新依赖
yarn add echarts@latest

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

安装js-cookie（处理cookies-通常使用）

常见的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: '' })

项目之中使用使用js-cookie

☞ 使用本地的cookie来存储我们的token信息，一般我们会使用js-cookie

yarn add js-cookie

☞ 手写NexusVue\src\utils

import Cookies from 'js-cookie'

const TokenKey = 'Admin-Token'

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}

安装pdf相关(非必须)

作用：生成pdf

yarn add html2canvas
yarn add jspdf