# vue3-template

**Repository Path**: fuwencai/vue3-template

## Basic Information

- **Project Name**: vue3-template
- **Description**: vue3 ts 模板
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-03-29
- **Last Updated**: 2024-04-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, Pinia, TypeScript

## README

## 使用指令及说明

**语言：TS **

**构建工具：VITE**

**包管理工具： PNPM **

**样式工具：SASS**

**组件起别名：**

- 直接在script标签上写name=""，例如 `<script setup lang="ts" name="Person">`

**eslint**、**prettier**

- 一个负责js代码质量，一个负责代码美观。

- 通过`pnpm run lint`去检测语法，如果出现不规范格式,通过`pnpm run fix`修改

**stylelint**

- [stylelint](https://stylelint.io/)为css的lint工具。可格式化css代码，检查css语法错误与不合理的写法，指定css书写顺序等

**husky**、**commitlint**

- 利用husky在代码提交之前触发git hook(git在客户端的钩子),自动执行`pnpm run format`格式化代码强制开发人员按照代码规范提交

- 规范commit信息，按照统一的标准来书写

- 当我们填写`commit`信息的时候，前面就需要带着下面的`subject`

- ```js
  'feat',//新特性、新功能
  'fix',//修改bug
  'docs',//文档修改
  'style',//代码格式修改, 注意不是 css 修改
  'refactor',//代码重构
  'perf',//优化相关，比如提升性能、体验
  'test',//测试用例修改
  'chore',//其他修改, 比如改变构建流程、或者增加依赖库、工具等
  'revert',//回滚到上一个版本
  'build',//编译相关的修改，例如发布版本、对项目构建或者依赖的改动
  ```

- 当 commit 提交信息时，不能再随意写了，必须符合以下类型才可，需要注意类型的后面需要用英文的 : ，且冒号后面需要空一格，不能省略

- ```js
  git commit -m 'fix: xxx'
  ```

**模板默认强制使用pnpm包管理工具**

- 限制文件位于根目录下`scritps/preinstall.js`及package.json中

- ```
  "scripts": {
  "preinstall": "node ./scripts/preinstall.js"
  }
  ```


**文件配置工作环境**

- 项目开发过程中，至少会经历开发环境、测试环境和生产环境(即正式环境)三个阶段。不同阶段请求的状态(如接口地址等)不尽相同，若手动切换接口地址是相当繁琐且易出错的。于是环境变量配置的需求就应运而生，我们只需做简单的配置，把环境状态切换的工作交给代码。

- 项目根目录分别添加了 开发、生产和测试环境的文件。通过`import.meta.env`获取环境变量。

- ```
  .env.development
  .env.production
  .env.test
  ```

**SVG图标**

- 封装注册了全局svg组件，在assets/icons下创建.svg文件，粘贴入svg矢量图：组件name等于文件名

- ```html
  <SvgIcon width="40px" height="40px" color="red" name="computer"></SvgIcon>
  ```

**element-plus图标库**
- 全局注册了Element Plus提供的icon图标，可以任意位置直接使用。
- ```html
  <el-icon :size="20">
    <Edit />
  </el-icon>
  ```

**axios**

- 项目中，`src-utils-request.ts`文件对axios进行二次封装（请求响应拦截器等）。`src-api`下分模块进行引入二次封装的axios并使用。项目中有保留示例文件。

**vue-router**

- `src-router`中`permisstion.ts`用于设置路由守卫。并且在路由守卫中启用了nprogress进度条插件。

- 动态追加异步路由

- ```javascript
  //引入路由
  import { asnycRoute } from '@/router/routes'

  //引入深拷贝方法
  //@ts-expect-error
  import cloneDeep from 'lodash/cloneDeep'
  import router from '@/router'
  //用于过滤当前用户需要展示的异步路由
  function filterAsyncRoute(asnycRoute: any, routes: any) {
    return asnycRoute.filter((item: any) => {
      if (routes.includes(item.name)) {
        if (item.children && item.children.length > 0) {
          item.children = filterAsyncRoute(item.children, routes)
        }
        return true
      }
    })
  }
  //动态追加路由
  [ ...userAsyncRoute ].forEach((route: any) => {
      router.addRoute(route)
  })
  ```