目录
1. 大事件项目介绍和创建
1.1 Vue3 大事件管理系统
在线演示:
- https://fe-bigevent-web.itheima.net/login
接口文档:
- https://apifox.com/apidoc/shared-26c67aee-0233-4d23-aab7-08448fdf95ff/api-93850835
基地址:
- http://big-event-vue-api-t.itheima.net
本项目的技术栈 本项目技术栈基于:
- ES6、vue3、pinia、vue-router 、vite 、axios 和 element-plus
1.2 pnpm 包管理器 - 创建项目
一些优势:
- 比同类工具快2倍左右、节省磁盘空间... https://www.pnpm.cn/
- npm install -g pnpm
- pnpm create vue
1.3 创建项目
2. Eslint 配置代码风格
2.1 环境同步
-
安装了插件 ESlint,开启保存自动修复
-
禁用了插件 Prettier,并关闭保存自动格式化
// ESlint插件 + Vscode配置 实现自动格式化修复
"editor.codeActionsOnSave": {
"source.fixAll": true
},
"editor.formatOnSave": false,
2.2 Eslint 配置代码风格
- 单引号
- 不使用分号
- 宽度80字符
- 不加对象|数组最后逗号
- 换行符号不限制(win mac 不一致)
![](https://i-blog.csdnimg.cn/direct/e6c2c3f950ef432da651d266d213f74a.png)
- 安装Eslint且配置保存修复,不要开启默认的自动保存格式化
3. 基于 husky 的代码检查工作流
husky 是一个 git hooks 工具 ( git的钩子工具,可以在特定时机执行特定的命令 )
3.1 提交前做代码检查
- https://typicode.github.io/husky/
![](https://i-blog.csdnimg.cn/direct/3ec2dda92b754418a65b2b1ddb578644.png)
- pnpm lint 是全面检查,耗时问题,历史问题。
3.2 暂存区 eslint 校验
- pnpm i lint-staged -D
![](https://i-blog.csdnimg.cn/direct/dddd2099e07b462b86b43b38a7ba1f27.png)
![](https://i-blog.csdnimg.cn/direct/a6738b42317c45aaaccfd59cd9b4edc3.png)
3.3 总结
- 如何在 git commit 前执行 eslint 检查?
- 使用 husky 这个 git hooks 工具
- 如何只检查暂存区代码?
- 使用 lint-staged 工具
4. 目录调整
4.1 目录调整
- 删除一些初始化的默认文件
- 修改剩余代码内容
- 新增调整我们需要的目录结构
- 拷贝全局样式和图片,安装预处理器支持
① 删除文件
② 修改内容
src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: []
})
export default router
src/App.vue
<script setup></script>
<template>
<div>
<router-view></router-view>
</div>
</template>
<style scoped></style>
src/main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')
③ 新增需要目录 api、utils
④ 将项目需要的全局样式 和 图片文件,复制到 assets 文件夹中, 并将全局样式在main.js中引入
- import '@/assets/main.scss'
- 安装 sass 依赖
- pnpm add sass -D
5. vue-router4 路由代码解析
5.1 路由初始化
- 创建路由实例由 createRouter 实现
- 路由模式
- history 模式使用 createWebHistory()
- hash 模式使用 createWebHashHistory()
- 参数是基础路径,默认/
5.2 组件内使用路由
创建一个路由实例,路由模式是 history 模式,路由的基础地址是 vite.config.js中的 base 配置的值, 默认是 / , import.meta.env.BASE_URL 是 Vite 环境变量
环境变量地址: https://cn.vitejs.dev/guide/env-and-mode.html
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. 携带token
const 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