后台数据管理系统 - 项目架构设计-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/

安装方式：

nginx 复制代码

npm install -g pnpm

创建项目：

nginx 复制代码

pnpm create vue

nginx 复制代码

pnpm format:基于prettier格式化

二、 `ESLint` & `prettier` 配置代码风格

环境同步：

安装了插件 ESlint，开启保存自动修复
禁用了插件 Prettier，并关闭保存自动格式化

jsx 复制代码

 // Eslint插件+ VSCode配置，实现自动化格式修复
 
"editor.codeActionsOnSave": {
  "source.fixAll": true
},
// 关闭保存自动格式化，目的：为了防止保存时与EsLint插件冲突
"editor.formatOnSave": false,
// ESlint插件 + Vscode配置 实现自动格式化修复

配置文件 .eslintrc.cjs

prettier 风格配置 https://prettier.io
1. 单引号
2. 不使用分号
3. 每行宽度至多80字符
4. 不加对象|数组最后逗号
5. 换行符号不限制（win mac 不一致）
vue组件名称多单词组成（忽略index.vue）
props解构（关闭）

jsx 复制代码

  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/

jsx 复制代码

pnpm dlx husky-init && pnpm install

修改 .husky/pre-commit 文件

jsx 复制代码

pnpm lint

**问题：**默认进行的是全量检查，耗时问题，历史问题。

lint-staged 配置

安装

jsx 复制代码

pnpm i lint-staged -D

配置 package.json

jsx 复制代码

{
  // ... 省略 ...
  "lint-staged": {
    "*.{js,ts,vue}": [
      "eslint --fix"
    ]
  }
}

{
  "scripts": {
    // ... 省略 ...
    "lint-staged": "lint-staged"
  }
}

修改 .husky/pre-commit 文件

jsx 复制代码

pnpm lint-staged

四、调整项目目录

默认生成的目录结构不满足我们的开发需求，所以这里需要做一些自定义改动。主要是两个工作：

删除初始化的默认文件
修改剩余代码内容
新增调整我们需要的目录结构
拷贝初始化资源文件，安装预处理器插件

删除文件

修改内容

src/router/index.js

jsx 复制代码

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: []
})

export default router

src/App.vue

jsx 复制代码

<script setup></script>

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<style scoped></style>

src/main.js

jsx 复制代码

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中引入

jsx 复制代码

import '@/assets/main.scss'

安装 sass 依赖

jsx 复制代码

pnpm add sass -D

五、VueRouter4 路由代码解析

基础代码解析

jsx 复制代码

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

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 router

Vite.config.js

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

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>

下期见~~~

后台数据管理系统 - 项目架构设计-Vue3+axios+Element-plus（0916）

一、pnpm 包管理器 - 创建项目

二、 ESLint & prettier 配置代码风格

三、基于 husky 的代码检查工作流

四、调整项目目录

五、VueRouter4 路由代码解析

二、 `ESLint` & `prettier` 配置代码风格