Vue3.0项目实战（一）——Vue3 大事件管理系统项目搭建

6. 引入 Element Plus 组件库

6.1 按需引入 Element Plus

• pnpm add element-plus

• 官方文档：https://element-plus.org/zh-CN/guide/quickstart.html

• 默认 components 下的文件也会被 自动注册~

7. Pinia 构建仓库和持久化

官方文档：Home | pinia-plugin-persistedstate

① 安装插件 pinia-plugin-persistedstate  

• pnpm add pinia-plugin-persistedstate -D

② 使用 main.js

• import persist from 'pinia-plugin-persistedstate'
• app.use(createPinia().use(persist))

③ 配置 stores/user.js

• persist: true

8. Pinia - 配置仓库统一管理

• 初始化代码在 main.js 中，仓库代码在 stores 中，代码分散职能不单一

• 由 stores 统一维护，在 stores/index.js 中完成 pinia 初始化，交付 main.js 使用

stores/index.js：

main.js

• 使用一个仓库 import { useUserStore } from `./stores/user.js` 不同仓库路径不一致

• 由 stores/index.js 统一导出，导入路径统一 `./stores`，而且仓库维护在 stores/modules 中

9. 数据交互 - 请求工具设计

9.1 创建 axios 实例

使用 axios 来请求后端接口, 一般都会对 axios 进行一些配置 (比如: 配置基础地址等)

一般项目开发中, 都会对 axios 进行基本的二次封装, 单独封装到一个模块中, 便于使用

① 安装 axios

• pnpm add axios

② 新建 utils/request.js 封装 axios 模块

• 利用 axios.create 创建一个自定义的 axios 来使用
• axios中文文档|axios中文网 | axios

9.2 完成 axios 基本配置

import axios from 'axios'
import { useUserStore } from '@/stores'
import { ElMessage } from 'element-plus'
import router from '@/router/index.js'
const baseURL = 'http://big-event-vue-api-t.itheima.net'const instance = axios.create({// TODO 1. 基础地址和超时时间baseURL,timeout: 100000
})// 请求拦截器
instance.interceptors.request.use((config) => {// TODO 2. 携带tokenconst userStore = useUserStore()if (userStore.token) {config.headers.Authorization = userStore.token}return config},(err) => Promise.reject(err)
)
// 响应拦截器
instance.interceptors.response.use((res) => {// TODO 4. 摘取核心响应数据if (res.data.code === 0) {return res}// TODO 3. 处理业务失败ElMessage.error(res.data.message || '服务异常')return Promise.reject(res.data)},(err) => {// TODO 5. 处理401错误// 错误的特殊情况 => 401 权限不足或 token 过期 => 拦截登录if (err.response && err.status === 401) {router.push('/login')}// 错误默认情况 => 只要给提示ElMessage.error(err.response.data.message || '服务异常')return Promise.reject(err)}
)export default instance

10. 首页整体路由设计

实现目标:

• 完成整体路由规划【搞清楚要做几个页面，它们分别在哪个路由下面，怎么跳转的.....】

• 通过观察, 点击左侧导航, 右侧区域在切换, 那右侧区域内容一直在变, 那这个地方就是一个路由的出口

• 我们需要搭建嵌套路由

目标：

• 把项目中所有用到的组件及路由表, 约定下来

明确了路由规则，可以全部配完，也可以边写边配。

import { createRouter, createWebHistory } from 'vue-router'
import LoginPage from '@/views/login/LoginPage.vue'
import LayoutContainer from '@/views/layout/LayoutContainer.vue'
import ArticleManage from '@/views/article/manage/ArticleManage.vue'
import ArticleChannel from '@/views/article/channel/ArticleChannel.vue'
import UserAvatar from '@/views/user/avatar/UserAvatar.vue'
import UserPassword from '@/views/user/password/UserPassword.vue'
import UserProfile from '@/views/user/profile/UserProfile.vue'
// createRouter 创建路由实例
// 配置 history 模式
//  1. history 模式：createWebHistory 地址栏不带 #
//  2. hash 模式：createWebHahsHistory 地址栏带 #// vite 中的环境变量 import.meta.env.BASE_URL 就是vite.config.js 中的 base 配置对象
const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/login',component: LoginPage},{path: '/',component: LayoutContainer,redirect: '/article/manage',children: [{path: 'article/manage',component: ArticleManage},{path: 'article/channel',component: ArticleChannel},{path: 'user/profile',component: UserProfile},{path: 'user/avatar',component: UserAvatar},{path: 'user/password',component: UserPassword}]}]
})export default router