【VUE3】练习项目——大事件后台管理

0 前言

黑马程序员视频地址：Vue3大事件项目-项目介绍和pnpm创建项目

接口文档：登录 - 黑马程序员-大事件

1 准备工作

1.1 安装pnpm

官网：pnpm - 速度快、节省磁盘空间的软件包管理器 | pnpm中文文档 | pnpm中文网

安装pnpm命令：

npm i pnpm -g

pnpm创建vue项目命令：

pnpm create vue

命令对比：

npm	yarn	pnpm
npm install	yarn	pnpm install
npm install axios	yarn add axios	pnpm add axios
npm install axios -D	yarn add axios -D	pnpm add axios -D
npm uninstall axios	yarn remove axios	pnpm remove axios
npm run dev	yarn dev	pnpm dev

1.2 创建vue项目

使用pnpm创建vue项目时，选择以下配置

请选择要包含的功能： (↑/↓ 切换，空格选择，a 全选，回车确认)
|  [ ] TypeScript
|  [ ] JSX 支持
|  [+] Router（单页面应用开发）
|  [+] Pinia（状态管理）
|  [ ] Vitest（单元测试）
|  [ ] 端到端测试
|  [+] ESLint（错误预防）
|  [+] Prettier（代码格式化）

标记：警告提示（待解决）

创建完项目需要进入相应文件夹中，安装所有依赖

pnpm install

1.3 Eslint & Prettier的配置

见【VUE3】Eslint 与 Prettier 的配置-CSDN博客

推荐使用里面的方案二，即将 prettier 的规则让 eslint 来执行

因为 1.4 中的检查代码需要 eslint 来检查

1.4 husky 提交代码检查

husky 是一个 git hooks 工具 ( git的钩子工具，可以在特定时机执行特定的命令 )

第一步：初始化仓库

git init

第二步：初始化 husky 工具配置

pnpm dlx husky-init; pnpm install

第三步：修改 .husky/pre-commit 文件

pnpm lint

但是这样会有一个问题！

我们可以打开 package.json 文件，看到里面的 lint 命令对应为：

"lint": "eslint . --fix"

即默认进行的是全量检查，耗时问题，历史问题，因此需要再导入一个包 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

这样就会只检查修改过的文件，哪怕以前提交的文件有问题，也不会检查报错

可以通过控制 1.3 中的那篇文章的第七节中的 'no-undef': 'off'来模拟提交以前有问题的文件

1.5 目录调整

删除默认文件后，增加 api 与 utils 文件夹

如果使用 sass，则需安装对应依赖

pnpm add sass -D

1.6 VueRouter4

更多内容见官网：Vue Router | Vue.js 的官方路由

1.6.1 基础配置

import { createRouter, createWebHistory } from 'vue-router'// createRouter 创建路由实例，===> new VueRouter()
// 1. history模式: createWebHistory()   http://xxx/user
// 2. hash模式: createWebHashHistory()  http://xxx/#/user// vite 的配置 import.meta.env.BASE_URL 是路由的基准地址，默认是 ’/‘
// https://vitejs.dev/guide/build.html#public-base-path// 如果将来你部署的域名路径是：http://xxx/my-path/user
// vite.config.ts  添加配置  base: my-path，路由这就会加上 my-path 前缀了const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: []
})export default router

1.6.2 路由跳转

由于 setup 下，this 指向 undefined ，因此需要引入包创建 router 与 router 对象

<script setup>
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
const gotoCart = () => {console.log(route)router.push('/individual')
}
</script><template><div>我是App</div><button @click="gotoCart()">跳转购物车页面</button>
</template>

1.7 引入 Element Plus 组件库

官方手册：一个 Vue 3 UI 框架 | Element Plus

安装组件库

pnpm install element-plus

按需引入：

第一步：安装插件

pnpm add -D unplugin-vue-components unplugin-auto-import

第二步：把下列代码插入到你的 Vite 的配置文件中

import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({// ...plugins: [// ...AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})

全部引入此处不赘述

注意：

1.在引入之后，无需任何配置，即可使用组件库内的组件

2.并且components下的vue组件也可以直接使用，无需导入

1.8 Pinia

见文档：【VUE3】Pinia-CSDN博客

注意：由于创建项目时勾选了Pinia，所以此处不需要再手动安装配置Pinia，直接可以使用

但是持久化还需手动配置，此处不再赘述

1.8.1 优化

将 main.js 中关于 pinia 的代码抽离到 store/index.js 中，并且将 store/modules 中的所有仓库文件统一从 index.js 中导出，方便管理且简化代码

// main.js
// ...
import pinia from './stores'// ...
app.use(pinia)// ...

// store/index.jsimport { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'const pinia = createPinia()
pinia.use(persist)export default piniaexport * from '@/stores/modules/user'
export * from '@/stores/modules/count'// 上面的代码等同于
// import { useUserStore, ... } from '@/stores/modules/user'
// export { useUserStore, ... }

// 组件.vueimport { useUserStore, useCountStore } from '@/stores'const userStore = useUserStore()
const userCount = useCountStore()

1.9 封装请求工具

手册：axios中文文档|axios中文网 | axios

1.9.1 安装 axios 与配置框架

1.安装 axios

pnpm add axios

2.框架代码

// utils/request.jsimport 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. 携带tokenreturn 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

1.9.2 示例代码

// utils/request.jsimport axios from 'axios'
import { useUserStore } from '@/stores'
import { ElMessage } from 'element-plus'
import router from '@/router'
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 3. 处理业务失败if (res.data.code === 0) {return res}ElMessage({ message: res.data.message || '服务异常', type: 'error' })// TODO 4. 摘取核心响应数据return Promise.reject(res.data)},(err) => {ElMessage({ message: err.response.data.message || '服务异常', type: 'error' })// TODO 5. 处理401错误if (err.response?.status === 401) {router.push('/login')}return Promise.reject(err)}
)export default instance

2 开发

2.1 路由配置

示例：采用路由懒加载

// router/index.jsimport { createRouter, createWebHistory } from 'vue-router'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{ path: '/login', component: () => import('@/views/login/LoginPage.vue') },{path: '/',component: () => import('@/views/layout/LayoutContainer.vue'),redirect: '/article/manage',children: [{ path: '/article/manage', component: () => import('@/views/article/ArticleManage.vue') },{ path: '/article/channel', component: () => import('@/views/article/ArticleChannel.vue') },{ path: '/user/profile', component: () => import('@/views/user/UserProfile.vue') },{ path: '/user/avatar', component: () => import('@/views/user/UserAvatar.vue') },{ path: 'user/password', component: () => import('@/views/user/UserPassword.vue') }]}]
})export default router

记得准备路由出口，如：

// App.vue<template><router-view></router-view>
</template>

2.2 登录注册

2.2.1 静态页面

1.安装 element-plus 图标库

pnpm i @element-plus/icons-vue

2.静态结构准备

注意：登录页面与注册页面使用 v-if 与 v-else 控制切换

// views/login/LoginPage.vue<script setup>
import { User, Lock } from '@element-plus/icons-vue'
import { ref } from 'vue'
const isRegister = ref(true)
</script><template><el-row class="login-page"><el-col :span="12" class="bg"></el-col><el-col :span="6" :offset="3" class="form"><el-form ref="form" size="large" autocomplete="off" v-if="isRegister"><el-form-item><h1>注册</h1></el-form-item><el-form-item><el-input :prefix-icon="User" placeholder="请输入用户名"></el-input></el-form-item><el-form-item><el-input :prefix-icon="Lock" type="password" placeholder="请输入密码"></el-input></el-form-item><el-form-item><el-input :prefix-icon="Lock" type="password" placeholder="请输入再次密码"></el-input></el-form-item><el-form-item><el-button class="button" type="primary" auto-insert-space> 注册 </el-button></el-form-item><el-form-item class="flex"><el-link type="info" :underline="false" @click="isRegister = false"> ← 返回 </el-link></el-form-item></el-form><el-form ref="form" size="large" autocomplete="off" v-else><el-form-item><h1>登录</h1></el-form-item><el-form-item><el-input :prefix-icon="User" placeholder="请输入用户名"></el-input></el-form-item><el-form-item><el-inputname="password":prefix-icon="Lock"type="password"placeholder="请输入密码"></el-input></el-form-item><el-form-item class="flex"><div class="flex"><el-checkbox>记住我</el-checkbox><el-link type="primary" :underline="false">忘记密码？</el-link></div></el-form-item><el-form-item><el-button class="button" type="primary" auto-insert-space>登录</el-button></el-form-item><el-form-item class="flex"><el-link type="info" :underline="false" @click="isRegister = true"> 注册 → </el-link></el-form-item></el-form></el-col></el-row>
</template><style lang="scss" scoped>
.login-page {height: 100vh;background-color: #fff;.bg {background:url('@/assets/logo2.png') no-repeat 60% center / 240px auto,url('@/assets/login_bg.jpg') no-repeat center / cover;border-radius: 0 20px 20px 0;}.form {display: flex;flex-direction: column;justify-content: center;user-select: none;.title {margin: 0 auto;}.button {width: 100%;}.flex {width: 100%;display: flex;justify-content: space-between;}}
}
</style>

2.2.2 规则校验

官方文档：Form 表单 | Element Plus

四大校验方式：

1.非空校验：required

2.长度校验：min、max

3.正则校验：pattern

4.自定义校验：validator

第一步：声明表单数据对象与规则对象，其中表单数据对象必须是响应式的

const formData = ref({username: '',password: '',repassword: ''
})
const formRules = {username: [{ required: true, message: '用户名不能为空！', trigger: 'blur' },// blur是失去焦点事件{ min: 5, max: 10, message: '用户名必须为5-10位字符', trigger: 'blur' }],password: [{ required: true, message: '密码不能为空！', trigger: 'blur' },{ pattern: /^\S{8,15}$/, message: '密码必须为8-15位非空字符', trigger: 'change' }// change为改变时校验，发现当检验提示错误后，若触发失焦事件，会导致提示消失，因此不推荐]
}

第二步：给整个表单的大标签绑定数据对象与规则对象

<el-form
...
:model="formData"
:rules="formRules"
>
<!-- ... -->
</el-form>

第三步：给输入框绑定数据，并且给表单元素标签绑定要使用的规则

<el-form-item prop="username">    ❗<el-input:prefix-icon="User"placeholder="请输入用户名"v-model="formData.username"    ❗></el-input>
</el-form-item>

自定义校验方式：

使用方式相同，只是配置规则时，validator 指向一个函数

参数：

rule：当前校验规则相关的信息

value：所校验的表单元素目前的表单值

callback：无论成功还是失败，都需要 callback 回调

const formRules = {// ...repassword: [{validator: (rule, value, callback) => {if (value !== formData.value.password) {callback(new Error('两次密码不一致，请重新输入！'))} else {callback()}},trigger: 'blur'}]
}

2.2.3 表单预校验

由于vue3的特性，即导入的组件内的方法默认不会暴露，因此需要获取组件对象，然后再获取，如：

第一步：获取组件对象

详细见【VUE3】组合式API-CSDN博客中的 9.2

const form = ref()

<el-form
ref="form"    ❗
size="large"
autocomplete="off"
v-if="isRegister"
:model="formData"
:rules="formRules"
>

第二步：调用 validate 方法

validate 方法即对整个表单的内容进行验证，接收一个回调函数，或返回 Promise

const register = async () => {await form.value.validate()    ❗await userRegisterService(formData.value)    // 这个是提交数据apiElMessage.success('注册成功！')isRegister.value = false    // 切换登录
}

注意：因为之前我们设置了插件来帮我们自动导入Element组件，所以上述代码中的ElMessage方法我们没有导入，但是eslint会报错，可以在 eslint.config.js 中来配置，让其不报错，位置及代码如下：

// ...export default defineConfig([// ...{rules: {// ...'vue/no-setup-props-destructure': ['off'], // 放在这个下面globals: {ElMessage: 'readonly',ElMessageBox: 'readonly',ElLoading: 'readonly'}}},
])

2.2.4 封装注册api

// api/user.jsimport request from '@/utils/request'export const userRegisterService = ({ username, password, repassword }) =>request.post('/api/reg', { username, password, repassword })

调用见 2.2.3

持续更新