1.项目概述
在线演示: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
2.配置
pnpn包管理器
安装方式：npm install -g pnpm
创建项目：pnpm create vue
具体方式如下：
①打开相对应目录任务管理器，先安装npm install -g pnpm
②pnpm create vue创建项目，如果权限不够则使用管理员终端，勾选router，Eslint（校验错误），pinia，Perttier（格式化）
③安装全局组件pnpm install，启动程序
husky代码检查
husky是基于git的工具，理解为git中的工具，是git执行中的钩子，在代码提交前进行检查，更符合企业级开发
操作：
①打开bash终端初始化$ git init，输入pnpm dlx husky-init && pnpm install安装配置husky，文件包中出现husky文件夹和pre-commit文件
②更改pre-commit文件命令npm test为pnpm lint，在bash中输入pnpm lint自动校验
pnpm lin会进行全局检验，但一般情况下需要局部检查。
这里只要进行提交就会进行校验，但一般情况下需要先提交暂存区
暂存区eslint校验
①bash中安装pnpm i lint-staged -D
②配置package.json
javascript
{
// ... 省略 ...
"lint-staged": {
"*.{js,ts,vue}": [
"eslint --fix"
]
}
}
{
"scripts": {
// ... 省略 ...
"lint-staged": "lint-staged"
}
}③修改per-commit命令为pnpm lint-staged
此时配置后，再提交代码git commit -m '你的指令'------能够进行自动查错
命令如修复错误，查找错误
目录调整
如图所示，多余文件删除。之后安装sass预处理器配置pnpm add sass -D。
这里需要在附件中找到main.scss文件拷贝至assets文件夹
路由初始化
javascript
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在Vue.app中测试
javascript
// 在 Vue3 CompositionAPI 中
// 1. 获取路由对象 router useRouter
// const router = useRouter()
// 2. 获取路由参数 route useRoute
// const route = useRoute()
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
const goList = () => {
router.push('/list')
console.log(router, route)
}引入element-ui
element-ui更适合pc端开发
①bash安装pnpm add element-plus
②按需使用------安装插件pnpm add -D unplugin-vue-components unplugin-auto-import
③配置插入vite
这里可以根据官网进行配置。
配置完成后，components中的组件也可以直接使用，无需导入，自动注册
javascript
...
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()]
})
]
})Pinia构建用户仓库和持久化
①安装插件pnpm add pinia-plugin-persistedstate -D
②在main.js中使用
javascript
import persist from 'pinia-plugin-persistedstate'
...
app.use(createPinia().use(persist))③配置stores/users，只需要在后面加上persist：true就可实现持久化（页面刷新数据仍然存在）
注意：这里配置persist在return上一层之外
javascript
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 // 持久化
}
)因为过多的pinia在main.js中难以维护，所以在stores中创建index.js导入所有pinia设置，再在main.js中导入shores/index进行使用
数据交互-axios配置
①安装pnpm add axios
②配置utils/request.js------编写业务逻辑
javascript
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
export default {baseURL}完成基本配置
javascript
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')
}
return Promise.reject(err)
}
)
export default instance
export { baseURL }整体路由设计
javascript
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: [
{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