一、大事件项目介绍 和 创建
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
1.2 pnpm 包管理器 - 创建项目
一些优势：比同类工具快2倍左右、节省磁盘空间… https://www.pnpm.cn/
安装方式：npm install -g pnpm
创建项目：pnpm create vue
PS：npm => yarn => pnpm
1.3 创建项目
二、写代码之前的配置
2.1 Eslint 配置代码风格
配置文件 .eslintrc.cjs
- prettier 风格配置 https://prettier.io
1.单引号
2.不使用分号
3.宽度80字符
4.不加对象|数组最后逗号
5.换行符号不限制（win mac 不一致） - vue组件名称多单词组成（忽略index.vue）
- props解构（关闭）
提示：安装Eslint且配置保存修复，不要开启默认的自动保存格式化
环境同步：
安装了插件 ESlint，开启保存自动修复
禁用了插件 Prettier，并关闭保存自动格式化
设置里面进行配置:
// ESlint插件 + Vscode配置 实现自动格式化修复
"editor.codeActionsOnSave": {
"source.fixAll": true
},
"editor.formatOnSave": false,
配置文件 .eslintrc.cjs
rules: {
// prettier专注于代码的美观度（格式化工具）
// 前置：
// 1.禁用格式化插件 prettier format on save 关闭
// 2.安装Eslint插件,并配置保存时自动修复
'prettier/prettier': [
'warn',
{
singleQuote: true, // 单引号
semi: false, // 无分号
printWidth: 80, // 每行宽度至多80字符
trailingComma: 'none', // 不加对象|数组最后逗号
endOfLine: 'auto' // 换行符号不限制（win mac 不一致）
}
],
// ESLint关注于规范，如果不符合规范，报错
'vue/multi-word-component-names': [
'warn',
{
ignores: ['index'] // vue组件名称多单词组成（忽略index.vue）
}
],
'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验（props解构丢失响应式）
// 💡 添加未定义变量错误提示，create-vue@3.6.3 关闭，这里加上是为了支持下一个章节演示。
'no-undef': 'error'
}
2.2 配置代码检查工作流（在 git bash 下进行）
2.2.1 提交前做代码检查
- 初始化 git 仓库，执行 git init 即可
- 初始化 husky 工具配置，执行 pnpm dlx husky-init && pnpm install 即可
https://typicode.github.io/husky/ - 修改 .husky/pre-commit 文件
问题：pnpm lint 是全量检查，耗时问题，历史问题。
2.2.2 暂存区 eslint 校验
lint-staged 配置
- 安装
pnpm i lint-staged -D
- 配置
package.json
{
// ... 省略 ...
"lint-staged": {
"*.{js,ts,vue}": [
"eslint --fix"
]
}
}
{
"scripts": {
// ... 省略 ...
"lint-staged": "lint-staged"
}
}
- 修改 .husky/pre-commit 文件
pnpm lint-staged
2.2.3 小结
- 如何在 git commit 前执行 eslint 检查？
使用 husky 这个 git hooks 工具 - 如何只检查暂存区代码？
使用 lint-staged 工具
2.3 目录调整
默认生成的目录结构不满足我们的开发需求，所以这里需要做一些自定义改动。
主要是以下工作：
1.删除一些初始化的默认文件
2.修改剩余代码内容
3.新增调整我们需要的目录结构
4.拷贝全局样式和图片，安装预处理器支持
-
删除文件
-
修改内容
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>
我是App
</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
2.4 vue-router4 路由代码解析
2.4.1 路由初始化
- 创建路由实例由 createRouter 实现
- 路由模式
1.history 模式使用 createWebHistory()
2.hash 模式使用 createWebHashHistory()
3.参数是基础路径，默认/
2.4.2 总结
- 创建一个路由实例，路由模式是history模式，路由的基础地址是 vite.config.js中的 base 配置的值，
默认是 / , 环境变量地址： https://cn.vitejs.dev/guide/env-and-mode.html - 在 Vue3 CompositionAPI 中
1.获取路由对象 router useRouter()
const router = useRouter()
2.获取路由参数 route useRoute
const route = useRoute()
router => index.js
import {
createRouter, createWebHistory } from 'vue-router'
// createRouter 创建路由实例
// 1.history模式：createWebHistory 地址栏不带#
// 2.hash模式：createWebHashHistory 地址栏带#
// vite 中的环境变量 import.meta.env.BASE_URL 就是vite.config.js中的base配置项
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: []
})
export default router
vite.config.js
import {
fileURLToPath, URL } from 'node:url'
import {
defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
base: '/jd',
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
App.vue
<script setup>
// 在 Vue3 CompositionAPI 中
// 1.获取路由对象 router useRouter()
// const router = useRouter()
// 2.获取路由参数 route useRoute
// const route = useRoute()
import {
useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const goList = () => {
router.push('/list')
console.log(router, route)
}
</script>
<template>
<div>
我是App
<button @click="$router.push('/home')">跳首页</button>
<button @click="goList">跳列表首页</button>
</div>
</template>
<style scoped></style>
2.5 引入 Element Plus 组件库
2.5.1 按需引入 Element Plus
- 安装： pnpm add element-plus
- 配置按需导入：
官方文档： https://element-plus.org/zh-CN/guide/quickstart.html - 直接使用组件
- 彩蛋：默认 components 下的文件也会被 自动注册~
- 安装
$ pnpm add element-plus
自动按需：
- 安装插件
pnpm add -D unplugin-vue-components unplugin-auto-import
- 然后把下列代码插入到你的
Vite或Webpack的配置文件中
...
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
...
AutoImport({
resolvers: [ElementPlusResolver()]
}),
Components({
resolvers: [ElementPlusResolver()]
})
]
})
- 直接使用
<template>
<div>
<el-button type="primary">Primary</el-button>
<el-button type="success">Success</el-button>
<el-button type="info">Info</el-button>
<el-button type="warning">Warning</el-button>
<el-button type="danger">Danger</el-button>
...
</div>
</template>
2.6 Pinia 构建仓库 和 持久化
官方文档：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/
- 安装插件 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
import { defineStore } from 'pinia'
import { ref } from 'vue'
// 用户模块
export const useUserStore = defineStore(
'big-user',
() => {
const token = ref('') // 定义 token
const setToken = (t) => (token.value = t) // 设置 token
return { token, setToken }
},
{
persist: true // 持久化
}
)
2.7 Pinia 仓库统一管理
pinia 独立维护
- 现在：初始化代码在 main.js 中，仓库代码在 stores 中，代码分散职能不单一
- 优化：由 stores 统一维护，在 stores/index.js 中完成 pinia 初始化，交付 main.js 使用
main.js
import {
createApp } from 'vue'
import App from './App.vue'
import router from './router'
import pinia from './stores/index'
import '@/assets/main.scss'
const app = createApp(App)
app.use(pinia)
app.use(router)
app.mount('#app')
stores => index.js
import {
createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(persist)
export default pinia
仓库 统一导出
- 现在：使用一个仓库 import { useUserStore } from
./stores/user.js不同仓库路径不一致 - 优化：由 stores/index.js 统一导出，导入路径统一
./stores，而且仓库维护在 stores/modules 中
stores => index.js
export * from './modules/user'
export * from './modules/counter'
App.vue
import { useUserStore, useCountStore } from '@/stores'
2.8 数据交互 - 请求工具设计
- 安装 axios
pnpm add axios
-
新建
utils/request.js封装 axios 模块利用 axios.create 创建一个自定义的 axios 来使用
http://www.axios-js.com/zh-cn/docs/#axios-create-config
import axios from 'axios'
const baseURL = 'http://big-event-vue-api-t.itheima.net'
const instance = axios.create({
// TODO 1. 基础地址，超时时间
})
instance.interceptors.request.use(
(config) => {
// TODO 2. 携带token
return config
},
(err) => Promise.reject(err)
)
instance.interceptors.response.use(
(res) => {
// TODO 3. 处理业务失败
// TODO 4. 摘取核心响应数据
return res
},
(err) => {
// TODO 5. 处理401错误
return Promise.reject(err)
}
)
export default instance
2. 完成 axios 基本配置
import {
useUserStore } from '@/stores/user'
import axios from 'axios'
import router from '@/router'
import {
ElMessage } from 'element-plus'
const baseURL = 'http://big-event-vue-api-t.itheima.net'
const instance = axios.create({
baseURL,
timeout: 100000
})
instance.interceptors.request.use(
(config) => {
const userStore = useUserStore()
if (userStore.token) {
config.headers.Authorization = userStore.token
}
return config
},
(err) => Promise.reject(err)
)
instance.interceptors.response.use(
(res) => {
if (res.data.code === 0) {
return res
}
ElMessage({
message: res.data.message || '服务异常', type: 'error' })
return Promise.reject(res.data)
},
(err) => {
ElMessage({
message: err.response.data.message || '服务异常', type: 'error' })
console.log(err)
if (err.response?.status === 401) {
router.push('/login'
最低0.47元/天 解锁文章
扫一扫
632
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
