后台数据管理系统 - 项目架构设计-Vue3+axios+Element-plus（0916）
接口文档: 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
http://smart-shop.itheima.net/index.php?s=/api
项目页面介绍
一、pnpm 包管理器 - 创建项目
一些优势：比同类工具快 2倍 左右、节省磁盘空间… https://www.pnpm.cn/
安装方式：
npm install -g pnpm
创建项目：
pnpm create vue
pnpm format:基于prettier格式化
二、 ESLint & prettier 配置代码风格
环境同步：
-
安装了插件
ESlint，开启保存自动修复 -
禁用了插件
Prettier，并关闭保存自动格式化
// Eslint插件+ VSCode配置，实现自动化格式修复"editor.codeActionsOnSave": {"source.fixAll": true
},
// 关闭保存自动格式化，目的：为了防止保存时与EsLint插件冲突
"editor.formatOnSave": false,
// ESlint插件 + Vscode配置 实现自动格式化修复
配置文件 .eslintrc.cjs
-
prettier 风格配置 https://prettier.io
-
单引号
-
不使用分号
-
每行宽度至多80字符
-
不加对象|数组最后逗号
-
换行符号不限制（win mac 不一致）
-
-
vue组件名称多单词组成（忽略index.vue）
-
props解构（关闭）
rules: {'prettier/prettier': ['warn',{singleQuote: true, // 单引号semi: false, // 无分号printWidth: 80, // 每行宽度至多80字符trailingComma: 'none', // 不加对象|数组最后逗号endOfLine: 'auto' // 换行符号不限制（win mac 不一致）}],'vue/multi-word-component-names': ['warn',{ignores: ['index'] // vue组件名称多单词组成（忽略index.vue）}],'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验// 💡 添加未定义变量错误提示，create-vue@3.6.3 关闭，这里加上是为了支持下一个章节演示。'no-undef': 'error'}
总结
三、基于 husky 的代码检查工作流
husky 是一个 git hooks 工具 ( git的钩子工具，可以在特定时机执行特定的命令 )
husky 配置
-
git初始化 git init
-
初始化 husky 工具配置 https://typicode.github.io/husky/
pnpm dlx husky-init && pnpm install
- 修改 .husky/pre-commit 文件
pnpm lint
**问题：**默认进行的是全量检查，耗时问题，历史问题。
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. 修改内容
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
五、VueRouter4 路由代码解析
基础代码解析
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
import.meta.env.BASE_URL 是Vite 环境变量：https://cn.vitejs.dev/guide/env-and-mode.html
router/index.js
import {createRouter,createWebHistory// createWebHashHistory
} from 'vue-router'// createRouter创建路由实例
/*
配置history模式
1.history模式：createWebHistory 地址栏不带#
2.hash模式：createWebHashHistory 地址栏带 #*/// 是否为开发环境
console.log(import.meta.env.DEV)// Vite中的环境变量 import.meta.env.VITE_BASE_URL,就是vite.config.js中的base配置项
const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: []
})export default routerVite.config.js
import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(), vueDevTools()],// 配置服务的基本路径为 / 开始base:'/',resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})App.vue
<script setup>
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router'// 在Vue3 CommpositionAPI中，
// 1.获取路由对象router需要使用useRouter
// const router = useRouter()
// 2.获取路由参数route useRoute
// const route = useRoute()const router = useRouter()
const route = useRoute()
const goList = ()=>{// setup中的this指向undefined// this.$router.push('/list')console.log(router,route);router.push('list')}
</script><template><div>
我是APP组件
<button @click="$router.push('/home')">跳首页</button>
<button @click="goList">跳列表页</button></div>
</template><style lang="scss" scoped></style>
下期见~~~