安装：

npm install pinia   

配置：

配置Piain:

main.js：

//Pinia-状态管理库
import {createPinia} from 'pinia'
​
const pinia = createPinia()
​
app.use(pinia)

定义仓库：

src/store/token.js

import { defineStore } from 'pinia'
​
export const useTokenStore = defineStore('token', {
    state: () => ({
        token: localStorage.getItem('chang-token') || ''
    }),
    getters: {
        getToken: (state) => state.token,
        isLogin: (state) => !!state.token
    },
    actions: {
        setToken(token) {
            this.token = token
            localStorage.setItem('chang-token', token) // ✅ 同步到本地存储
        },
        removeToken() {
            this.token = ''
            localStorage.removeItem('chang-token') // ✅ 清除本地存储
        }
    }
})

使用：

import {useTokenStore} from "@/stores/token.js";
​
const tokenStore = useTokenStore();
​
eg:
tokenStore.setToken(res.data.token);
config.headers['token'] = tokenStore.token;

Persist-Pinia持久化插件:

介绍：Pinia默认存储在内存，当浏览器刷新时会丢失数据，Persist插件可以将pinia中的数据持久化储存

安装：

npm install pinia-persistedstate-plugin

配置：

配置Persist:

main.js：

//Persist-Pinia持久化插件
import {createPersistedState} from "pinia-persistedstate-plugin";
​
const persist = createPersistedState();
​
pinia.use(persist)

定义仓库：

src/store/token.js：

import { defineStore } from 'pinia'
import { ref } from "vue";
​
export const useTokenStore = defineStore('token', ()=>{
    //定义状态内容
​
    //1.响应式变量
    const token = ref('')
​
    //2.定义一个函数，修改token的值
    const setToken = (newToken) => {
        token.value = newToken
    }
​
    //3.函数，移除token的值
    const removeToken = () => {
        token.value = ''
    }
​
    return {
        token,setToken,removeToken,
    }
},{
    persist:true //持久化存储
})

使用：

import {useTokenStore} from "@/stores/token.js";
​
const tokenStore = useTokenStore();
​
eg:
tokenStore.setToken(res.data.token);
config.headers['token'] = tokenStore.token;

路由配置：

router/index.js：

import { createRouter, createWebHistory } from 'vue-router'
​
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {path: '/', redirect: '/manager/home'},
    {path: '/manager', component: ()=>import('../views/Manager.vue'),children:[
        {path: 'home', name: 'home',meta:{title:'主页'}, component: () => import('../views/Home.vue'),},
        {path: 'test', name: 'test',meta:{title:'测试页'}, component: () => import('../views/Test.vue'),},
      ]
    },
    {path: '/404', name: 'NotFound',meta:{title:'404找不到页面'}, component: () => import('../views/404.vue'),},
    {path:'/:pathMatch(.*)',redirect:'/404'},
  ],
})
​
//beforeEach表示跳转之前的操作
router.beforeEach((to, from, next) => {
  document.title = to.meta.title;
  next();
})
​
export default router

路由跳转：

标签式跳转：

<RouterLink to="/test">通过router跳转到Test.vue</RouterLink>

编程式跳转：

导入router：

import router from "@/router/index.js"

跳转：

<el-button type="primary" @click="router.push('/test')">使用push跳转到test页面</el-button>
<el-button type="primary" @click="router.replace('/test')">使用replace跳转到test页面</el-button>

• push：跳转方式-添加路由，跳转后可以返回
• replace：跳转方式-替换路由，跳转后无法返回

返回：

<el-button type="primary" @click="router.back()">返回主页</el-button>

路由传参：

发送：

<!--方式一-->
<el-button type="primary" @click="router.push('/test?id=1&name=chang')">路由传参方式1</el-button>
<!--方式二-->
<el-button type="primary" @click="router.push({path:'/test',query:{id:1,name:'chang'}})">路由传参方式2</el-button>

接收：

import {reactive} from "vue";
import router from "@/router/index.js";
​
  const data = reactive({
    id:router.currentRoute.value.query.id,
    name:router.currentRoute.value.query.name,
  })
​
  console.log('获取到传递过来的id='+data.id);
  console.log('获取到传递过来的name='+data.name);

嵌套路由：

{path: '/manager', component: ()=>import('../views/Manager.vue'),children:[
    {path: 'home', name: 'home',meta:{title:'主页'}, component: () => import('../views/Home.vue'),},
    {path: 'test', name: 'test',meta:{title:'测试页'}, component: () => import('../views/Test.vue'),},
]},

• 父级页面可以通过<RouterView/>展现子级页面内容
• 在嵌套路由中子级路由不需要写前面的 / 会自动添加

路由守卫：

修改网页标题：

//to：用于对跳转之后的对象进行操作
//from：用于对跳转前的对象进行操作
//next()：调用该方法后，才能进入下一个钩子
//beforeEach表示跳转之前的操作
router.beforeEach((to, from, next) => {
  document.title = to.meta.title;
  next();
})

meta：补充路由参数的对象

404页面：

定义404路由：

{path: '/404', name: 'NotFound',meta:{title:'404找不到页面'}, component: () => import('../views/404.vue'),},
{path:'/:pathMatch(.*)',redirect:'/404'}, <!--输入错误时统一到达404页面-->

定义404页面：

<template>
  <div style="text-align: center">
    <img src="../assets/404.png" alt="">
    <div>
      <el-button type="primary" style="width: 150px;height: 50px;font-size: 20px" @click="gohome">返回主页</el-button>
    </div>
  </div>
</template>
<script setup>
import router from "@/router/index.js";
const gohome = () => {
  location.href = "/manager/home";
}
</script>
<style scoped>
</style>

此内容受密码保护。如需查阅，请在下方输入密码。

密码：

Vue3官方网站：https://element-plus.org/zh-CN/#/zh-CN

安装：

npm install element-ui -S

引入:

在 main.js 中写入以下内容：

//ElementUI-组件库
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
​
Vue.use(Element)

测试引入：

<el-button>按钮</el-button>

npm install axios -S
​
npm install vue-axios -S

引入：

在 main.js 中写入以下内容：

//Axios-http请求
import axios from 'axios'
import VueAxios from 'vue-axios'
​
Vue.use(axios,VueAxios)

使用方法：

• config – 选项对象、例如查询参数、请求头…
• data – 请求体数据、最常见的是 json 格式数据
• get、head 请求无法携带请求体，这应当是浏览器的限制所致（xhr、fetch api 均有限制）
• options、delete 请求可以通过 config 中的 data 携带请求体

使用：

<template>
    <div>
        <input type="button" value="获取远程数据" @click="sendReq()">
    </div>
</template>
<script>
import axios from 'axios'
const options = {
    methods: {
        async sendReq() {
            // 1. 基础请求 get, post
            const resp = await axios.post('/api/a2');
​
            // 2. 携带请求头
            const resp = await axios.post('/api/a3',{},{
                headers:{
                    Authorization:'abc'
                }
            });
​
            // 3.携带请求参数
            // 3.1 不想自己拼串、处理特殊字符、就用下面的办法
            const resp = await axios.post('/api/a4', {}, {
                params: {
                    name:'&&&&',
                    age: 20
                }
            });
            // 3.2 发送请求时携带查询参数 ?name=xxx&age=xxx
            const name = encodeURIComponent('&&&');
            const age = 18;
            const resp = await axios.post('/api/a4?name=${name}&age=${age}');//``
​
            // 4.携带请求体
            // 4.1 用请求体发数据，格式为 json (推荐)
            const resp = await axios.post('/api/a5json', {
                name: '王五',
                age: 50
            });
            
            // 4.2 用请求体发数据，格式为 urlencoded
            const params = new URLSearchParams();
            params.append("name", "张三");
            params.append("age", 24)
​
            const resp = await axios.post('/api/a4', params);
​
            // 4.3 用请求体发数据，格式为 multipart
            const params = new FormData();
            params.append("name", "李四");
            params.append("age", 30);
            const resp = await axios.post('/api/a5', params);
            
            
            console.log(resp);
        }
    }
};
export default options;
</script>

使用实例：

说明：为请求提供默认配置

const _axios = axios.create(config);

• axios 对象可以直接使用，但使用的是默认的设置
• 用 axios.create 创建的对象，可以覆盖默认设置，config 见下面说明

常见的 config 项有

例：

const _axios = axios.create({
    baseURL: 'http://localhost:8080',
    withCredentials: true
});
await _axios.post('/api/a6set')
await _axios.post('/api/a6get')

• 生产环境希望 xhr 请求不走代理，可以用 baseURL 统一修改
• 希望跨域请求携带 cookie，需要配置 withCredentials: true，服务器也要配置 allowCredentials = true，否则浏览器获取跨域返回的 cookie 时会报错

响应格式：

• 200 表示响应成功
• 400 请求数据不正确 age=abc
• 401 身份验证没通过
• 403 没有权限
• 404 资源不存在
• 405 不支持请求方式 post
• 500 服务器内部错误

拦截器：

请求拦截器：

_axios.interceptors.request.use(
  function(config) {
    // 比如在这里添加统一的 headers
    return config;
  },
  function(error) {
    return Promise.reject(error);
  }
);

响应拦截器：

_axios.interceptors.response.use(
  function(response) {
    // 2xx 范围内走这里
    return response;
  },
  function(error) {
    // 超出 2xx, 比如 4xx, 5xx 走这里
    return Promise.reject(error);
  }
);