# vue3-ts-cms

**Repository Path**: pakpakpak/vue3-ts-cms

## Basic Information

- **Project Name**: vue3-ts-cms
- **Description**: 使用vue3+ts+pinia+vue-router 搭建的后台管理系统，具有动态路由等功能
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-01-07
- **Last Updated**: 2023-06-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 搭建Vue项目

**项目环境：vite+vue3+typescript+vue-router+pinia+eslint+prettier**

### 一. vite 初始化项目

```
npm init vue@latest
```

![image-20221219194303917](file:///C:/Users/pak/Desktop/%E5%AD%A6%E4%B9%A0/%E4%BB%A3%E7%A0%81/05_vue/img/vite-vue3-ts/image-20221219194303917.png?lastModify=1673075449)

#### 1.1 推荐vs code插件

![image-20221219202233448](file:///C:/Users/pak/Desktop/%E5%AD%A6%E4%B9%A0/%E4%BB%A3%E7%A0%81/05_vue/img/vite-vue3-ts/image-20221219202233448.png?lastModify=1673075449)

#### 1.2 声明.vue文件

**使用Typescript Vue Plugin时，可能会导致vs code提示不佳，可以不安装此插件，那么需要自己声明.vue文件。**

**在** `env.d.ts`文件中加入：

```
declare module '*.vue' {
  import { DefineComponent } from 'vue'
  const component: DefineComponent
  export default component
}
```

### 二. 集成代码规范

#### 2.1. 集成 editorconfig

**EditorConfig 有助于为** `不同 IDE 编辑器`上处理同一项目的多个开发人员维护一致的编码风格。

**在项目根目录新建文件： **`.editorconfig`

```
# http://editorconfig.org

root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行尾的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行

[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false
```

**VSCode需要安装一个插件：EditorConfig for VS Code**

![image-20221219203838176](file:///C:/Users/pak/Desktop/%E5%AD%A6%E4%B9%A0/%E4%BB%A3%E7%A0%81/05_vue/img/vite-vue3-ts/image-20221219203838176.png?lastModify=1673075449)

#### 2.2 集成 prettier

**Prettier 是一款强大的代码格式化工具，支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等语言，基本上前端能用到的文件格式它都可以搞定，是当下最流行的代码格式化工具。**

**1.安装prettier （用脚手架创建项目时如果选择了prettier则自动安装好）**

```
npm install prettier -D
```

**2.配置.prettierrc文件：**

* **useTabs：使用tab缩进还是空格缩进，选择false；**
* **tabWidth：tab是空格的情况下，是几个空格，选择2个；**
* **printWidth：当行字符的长度，推荐80，也有人喜欢100或者120；**
* **singleQuote：使用单引号还是双引号，选择true，使用单引号；**
* **trailingComma：在多行输入的尾逗号是否添加，设置为 **`none`，比如对象类型的最后一个属性后面是否加一个 `，`；
* **semi：语句末尾是否要加分号，默认值true，选择false表示不加；**

```
{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false
}
```

**3.创建.prettierignore忽略文件 （可选）**

```
/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*
```

**4.VSCode需要安装prettier的插件**

![image-20221219205143644](file:///C:/Users/pak/Desktop/%E5%AD%A6%E4%B9%A0/%E4%BB%A3%E7%A0%81/05_vue/img/vite-vue3-ts/image-20221219205143644.png?lastModify=1673075449)

**5.VSCode进行配置：**

![image-20221219204429601](file:///C:/Users/pak/Desktop/%E5%AD%A6%E4%B9%A0/%E4%BB%A3%E7%A0%81/05_vue/img/vite-vue3-ts/image-20221219204429601.png?lastModify=1673075449)

![image-20221219204513340](file:///C:/Users/pak/Desktop/%E5%AD%A6%E4%B9%A0/%E4%BB%A3%E7%A0%81/05_vue/img/vite-vue3-ts/image-20221219204513340.png?lastModify=1673075449)

#### 2.3集成 ESLint

**1.在前面创建项目的时候，我们就选择了ESLint，所以Vue会默认帮助我们配置需要的ESLint环境。**

**2.VSCode需要安装ESLint插件：**

![image-20221219210049336](file:///C:/Users/pak/Desktop/%E5%AD%A6%E4%B9%A0/%E4%BB%A3%E7%A0%81/05_vue/img/vite-vue3-ts%E9%A1%B9%E7%9B%AE%E6%90%AD%E5%BB%BA/image-20221219210049336.png?lastModify=1673075449)

**3.解决eslint和prettier冲突的问题：**

**安装插件：（vue在创建项目时，如果选择prettier，那么这两个插件会自动安装）vite 创建的只会安装** `eslint-config-prettier`

```
npm install eslint-plugin-prettier eslint-config-prettier -D
```

**在** `.eslintrc.cjs`配置prettier插件：

```
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier',
    +++ 'plugin:prettier/recommended'
  ],
```

**这样ESLint就会去读取prettier的配置文件，保持一致，不会产生冲突**

**4.如果不想看到某个ESLint的警告，可以重新配置规则进行覆盖**

```
rules: {
  '@typescript-eslint/no-unused-vars': 'off'
}
```

#### 2.4 git Husky和eslint

**虽然我们已经要求项目使用eslint了，但是不能保证组员提交代码之前都将eslint中的问题解决掉了：**

* **也就是我们希望保证代码仓库中的代码都是符合eslint规范的；**
* **那么我们需要在组员执行 **`git commit` 命令的时候对其进行校验，如果不符合eslint规范，那么自动通过规范进行修复；

**创建项目时，我们选择了添加ESLint校验，那么就会有一条** `lint`命令

![image-20221231155958421](file:///C:/Users/pak/Desktop/%E5%AD%A6%E4%B9%A0/%E4%BB%A3%E7%A0%81/05_vue/img/vite-vue3-ts%E9%A1%B9%E7%9B%AE%E6%90%AD%E5%BB%BA/image-20221231155958421.png?lastModify=1673075449)

**在命令行执行** `npm run lint` 即可自动对项目内文件代码修改为符合规范的代码，所以我们通过husky工具让在git提交时，执行这条命令即可。

**那么如何做到这一点呢？可以通过Husky工具：**

* **husky是一个git hook工具，可以帮助我们触发git提交的各个阶段：pre-commit、commit-msg、pre-push**

**如何使用husky呢？**

**这里我们可以使用自动配置命令：**

```
npx husky-init && npm install
```

**这里会做三件事：**

**1.安装husky相关的依赖**

**2.在项目目录下创建 **`.husky` 文件夹

**3.在package.json中添加一个脚本：**`prepare`

**接下来，我们需要去完成一个操作：在进行commit时，执行lint脚本：**

![image-20221231160644704](file:///C:/Users/pak/Desktop/%E5%AD%A6%E4%B9%A0/%E4%BB%A3%E7%A0%81/05_vue/img/vite-vue3-ts%E9%A1%B9%E7%9B%AE%E6%90%AD%E5%BB%BA/image-20221231160644704.png?lastModify=1673075449)

**这个时候我们执行git commit的时候会自动对代码进行lint校验。**

#### 2.5 git commit规范

##### 2.5.1 代码提交风格

**通常我们的git commit会按照统一的风格来提交，这样可以快速定位每次提交的内容，方便之后对版本进行控制。**

![image-20221231162654857](file:///C:/Users/pak/Desktop/%E5%AD%A6%E4%B9%A0/%E4%BB%A3%E7%A0%81/05_vue/img/vite-vue3-ts%E9%A1%B9%E7%9B%AE%E6%90%AD%E5%BB%BA/image-20221231162654857.png?lastModify=1673075449)

**但是如果每次手动来编写这些是比较麻烦的事情，我们可以使用一个工具：Commitizen**

* **Commitizen 是一个帮助我们编写规范 commit message 的工具；**

**1.安装Commitizen**

```
npm install commitizen -D
```

**2.安装cz-conventional-changelog，并且初始化cz-conventional-changelog：**

```
npx commitizen init cz-conventional-changelog --save-dev --save-exact
```

**这个命令会帮助我们安装cz-conventional-changelog：**

![image-20221231163304033](file:///C:/Users/pak/Desktop/%E5%AD%A6%E4%B9%A0/%E4%BB%A3%E7%A0%81/05_vue/img/vite-vue3-ts%E9%A1%B9%E7%9B%AE%E6%90%AD%E5%BB%BA/image-20221231163304033.png?lastModify=1673075449)

**并且在package.json中进行配置：**

![image-20221231163421805](file:///C:/Users/pak/Desktop/%E5%AD%A6%E4%B9%A0/%E4%BB%A3%E7%A0%81/05_vue/img/vite-vue3-ts%E9%A1%B9%E7%9B%AE%E6%90%AD%E5%BB%BA/image-20221231163421805.png?lastModify=1673075449)

**这个时候我们提交代码需要使用 **`npx cz`：

* **第一步是选择type，本次更新的类型**

| **Type**     | **作用**                                                                                   |
| ------------------ | ------------------------------------------------------------------------------------------------ |
| **feat**     | **新增特性 (feature)**                                                                     |
| **fix**      | **修复 Bug(bug fix)**                                                                      |
| **docs**     | **修改文档 (documentation)**                                                               |
| **style**    | **代码格式修改(white-space, formatting, missing semi colons, etc)**                        |
| **refactor** | **代码重构(refactor)**                                                                     |
| **perf**     | **改善性能(A code change that improves performance)**                                      |
| **test**     | **测试(when adding missing tests)**                                                        |
| **build**    | **变更项目构建或外部依赖（例如 scopes: webpack、gulp、npm 等）**                           |
| **ci**       | **更改持续集成软件的配置文件和 package 中的 scripts 命令，例如 scopes: Travis, Circle 等** |
| **chore**    | **变更构建流程或辅助工具(比如更改测试环境)**                                               |
| **revert**   | **代码回退**                                                                               |

* **第二步选择本次修改的范围（作用域）**

![image-20221231163744383](file:///C:/Users/pak/Desktop/%E5%AD%A6%E4%B9%A0/%E4%BB%A3%E7%A0%81/05_vue/img/vite-vue3-ts%E9%A1%B9%E7%9B%AE%E6%90%AD%E5%BB%BA/image-20221231163744383.png?lastModify=1673075449)

* **第三步选择提交的信息（真正的commit 描述）**

![image-20221231163843857](file:///C:/Users/pak/Desktop/%E5%AD%A6%E4%B9%A0/%E4%BB%A3%E7%A0%81/05_vue/img/vite-vue3-ts%E9%A1%B9%E7%9B%AE%E6%90%AD%E5%BB%BA/image-20221231163843857.png?lastModify=1673075449)

* **第四步提交详细的描述信息**

![image-20221231163913381](file:///C:/Users/pak/Desktop/%E5%AD%A6%E4%B9%A0/%E4%BB%A3%E7%A0%81/05_vue/img/vite-vue3-ts%E9%A1%B9%E7%9B%AE%E6%90%AD%E5%BB%BA/image-20221231163913381.png?lastModify=1673075449)

* **第五步是否是一次重大的更改**

![image-20221231163952639](file:///C:/Users/pak/Desktop/%E5%AD%A6%E4%B9%A0/%E4%BB%A3%E7%A0%81/05_vue/img/vite-vue3-ts%E9%A1%B9%E7%9B%AE%E6%90%AD%E5%BB%BA/image-20221231163952639.png?lastModify=1673075449)

* **第六步是否影响某个open issue**

![image-20221231164019676](file:///C:/Users/pak/Desktop/%E5%AD%A6%E4%B9%A0/%E4%BB%A3%E7%A0%81/05_vue/img/vite-vue3-ts%E9%A1%B9%E7%9B%AE%E6%90%AD%E5%BB%BA/image-20221231164019676.png?lastModify=1673075449)

**即可完成提交，通过 **`git reflog` 查看提交内容和格式

**我们也可以在scripts中构建一个命令来执行 cz：**

![image-20221231164354215](file:///C:/Users/pak/Desktop/%E5%AD%A6%E4%B9%A0/%E4%BB%A3%E7%A0%81/05_vue/img/vite-vue3-ts%E9%A1%B9%E7%9B%AE%E6%90%AD%E5%BB%BA/image-20221231164354215.png?lastModify=1673075449)

**以后提交执行 **`npm run commit` 即可

##### 2.5.2. 代码提交验证

**如果我们按照cz来规范了提交风格，但是依然有同事通过 **`git commit` 按照不规范的格式提交应该怎么办呢？

* **我们可以通过commitlint来限制提交；**

**1.安装 @commitlint/config-conventional 和 @commitlint/cli**

```
npm i @commitlint/config-conventional @commitlint/cli -D
```

**2.在根目录创建commitlint.config.js文件，配置commitlint**

```
module.exports = {
  extends: ['@commitlint/config-conventional']
}
```

**3.执行命令：使用husky生成commit-msg文件，验证提交信息：**

```
npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"
```

### 三： 区分开发环境和生产环境

**方式1.vite默认为我们提供以下环境变量， 通过if判断即可**

```
console.log(import.meta.env.MODE) // string production 或者 development
console.log('dev:', import.meta.env.DEV) // boolean 是否为 development模式
console.log('prod:', import.meta.env.PROD) // boolean 是否为 production模式
console.log('ssr', import.meta.env.SSR) // boolean 是否为 ssr模式
```

**方式2：创建环境文件，vite会根据环境进行读取，文件命名规则如下**

![image-20221221195221592](file:///C:/Users/pak/Desktop/%E5%AD%A6%E4%B9%A0/%E4%BB%A3%E7%A0%81/05_vue/img/vite-vue3-ts%E9%A1%B9%E7%9B%AE%E6%90%AD%E5%BB%BA/image-20221221195221592.png?lastModify=1673075449)

**写入变量时，要以** `VITE_`开头, 例如 `VITE_NAME=pak.env`

**访问：**

```
console.log(import.meta.env)
```

### 四：安装less或sass (vite)

#### 4.1 安装less

```
npm install less -D
```

**安装好后即可使用**

#### 4.2 安装sass

<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="shell" cid="n199" mdtype="fences"><br/></pre>