# vue3.5-admin

**Repository Path**: dufeihu/vue3.5-admin

## Basic Information

- **Project Name**: vue3.5-admin
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-10-17
- **Last Updated**: 2024-10-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<!--
 * @Author: dfh
 * @Date: 2024-10-17 08:19:59
 * @LastEditors: dfh
 * @Modified By: dfh
 * @describe:
-->

# vite 项目初始化搭建

> 该项目主要使用 Vue3全家桶 + Typescript

## 1.项目初始化

### 1.1.版本：Vite需要Node.js版本 18+ 或 20+ 。然而，有些模版需要依赖更高的Node版本才能正常运行，当你的包管理器发出警告时，请注意升级你的Node版本。

### 1.2.包管理工具

> pnpm快速的，节省磁盘空间的包管理工具 https://pnpm.io/zh/installation

```shell
npm install pnpm -g
```

### 1.3.创建项目

https://vitejs.cn/vite5-cn/guide/

```shell
#pnpm
pnpm create vite vue3-admin --template vue-ts
```

## 2.Vue3 + Typescript项目搭建流程

### 2.1.Eslint配置

> 开发项目时需要安装vscode插件 `Vue-Official`

#### 初始化

```shell
# eslint初始化
npx eslint --init
```

#### eslint.config.js文件说明

```js
import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";

export default [
  // 1.检测文件格式
  { files: ["**/*.{js,mjs,cjs,ts,vue}"] },
  // 2.定义不同环境的全局变量
  { languageOptions: { globals: { ...globals.browser, ...globals.node } } },
  // 3.js推荐规则
  pluginJs.configs.recommended,
  // 4.ts推荐规则
  ...tseslint.configs.recommended,
  // 5.vue推荐规则
  ...pluginVue.configs["flat/essential"],
  // 6.检测vue中的ts代码采用tsparser
  {
    files: ["**/*.vue"],
    languageOptions: { parserOptions: { parser: tseslint.parser } }
  }
];
```

#### 添加`ignores`选项

```js
// 7.添加ignores选择
{ ignores: ["*.css", "*.jpg", "*.jpeg", "*.png", "*.gif", "*.d.ts"] },
```

#### vscode安装eslint插件

> 最后，在vscode中安装eslint插件：eslint只是检测代码规范，同时需要将eslint插件添加到vscode中「选择插件->右键->添加到工作区」
> 在`package.json`中添加脚本

```json
{
  "scripts": {
    "lint": "eslint",
    "lint:fix": "eslint --fix --quiet"
  }
}
```

> 在`eslint.config.js`中添加测试规则

```js
  // 8.添加测试规则
  {
    rules: {
      "no-console": "warn",
      semi: ["error", "always"],
    },
  },
```

执行`npm run lint`进行测试

### 2.2.Prettier配置

#### 在eslint中进行配置

> eslint中集成prettier配置

```shell
pnpm install prettier eslint-plugin-prettier eslint-config-prettier -D
```

> `eslint-plugin-prettier`插件可以用来集成prettier，确保eslint不会因为这些格式化规则而产生错误（避免冲突、需要放到数组的最后一项）

```js
// eslint.config.js

import prettierRecommended from "eslint-plugin-prettier/recommended";
export default [
  //...
  prettierRecommended
];
```

#### 在vscode中安装Prettier插件

> prettier只是用来格式化代码。这里需要新建`prettier.config.js`配置代码风格

```js
//prettier.config.js
export default {
  singleQuote: false, // 使⽤单引号
  semi: true, // 末尾添加分号
  tabWidth: 2,
  trailingComma: "none",
  useTabs: false,
  endOfLine: "auto",
  vueIndentScriptAndStyle: true
};
```

- singleQuote: 该配置表示不使用单引号，而是使用双引号。即，字符串会使用双引号包裹（例如："Hello" 而不是 'Hello'）。
- semi: 该配置表示在代码行末尾需要添加分号。
- tabWidth: 该配置设置每一级缩进的宽度为 2 个空格。即，缩进时会插入 2 个空格，这是一种较为常见的缩进格式，尤其在前端项目中。
- trailingComma: 该配置控制多行结构（如对象或数组）中最后一个元素后是否保留逗号。设置为 "none" 表示不会在最后一个元素后添加逗号。例如：

```js
//应该是
const obj = {
  name: "John",
  age: 30
};
//而不是：
const obj = {
  name: "John",
  age: 30
};
```

- useTabs: 该配置表示不使用 Tab 键作为缩进，而是使用空格。这与 tabWidth 配置结合使用，确保缩进时使用空格而非 Tab 键。
- endOfLine: 该配置表示根据不同操作系统自动选择合适的行结束符。在 Windows 上是 CRLF，而在 Unix/Linux 或 macOS 上是 LF。使用 auto 可以自动适应不同系统的行结束符格式，确保代码在不同平台上兼容。

> 安装`Prettier - Code formatter`插件，并且右键添加到工作区。设置中搜索：`format`,设置 `Default Formatter`选择`Prettier Code formatter`;接着搜索`format on save`,将其打开，表示保存时自动格式化

===注意：===
通过以上prettier配置后，保存时，`.ts`文件可以自动格式化，但是`.js,.vue`文件并没有格式化，可以通过在.vscode文件中添加`settings.json`文件，并添加如下内容

```json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}
```

### 2.3.EditorConfig for VS Code

> 安装`EditorConfig for VS Code`插件，新建`.editorconfig`文件

```shell
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = 1f
```

- root: 这个配置表示当前 .editorconfig 文件是项目的根目录文件。编辑器在查找 .editorconfig 文件时，找到这个设置为 true 的文件就会停止向上查找其他 .editorconfig 文件。
- [*]: 这个表示针对所有文件类型应用下面的配置。[*] 是一个通配符，表示对所有文件都生效。
- charset: 该配置设置文件的字符编码为 UTF-8。这是一种常见的字符编码，用于确保文件内容的跨平台兼容性。
- indent_style: 该配置设置代码的缩进方式为使用空格（而不是 Tab）。这有助于保持代码缩进风格一致。
- indent_size: 该配置定义每一级缩进使用 2 个空格。即，当你按下 Tab 键时，编辑器会插入 2 个空格。
- end_of_line: 这个设置定义文件的行结束符为 LF（换行符，Linux 和 macOS 系统中常用的行结束符）。在不同的操作系统中，行结束符可能不同，Windows 使用的是 CRLF，Linux 和 macOS 使用的是 LF。这个配置确保文件在不同系统上保持一致。

### 2.4.husky

#### pre-commit配置

> 实际项目中，代码格式化一般是配合`git hook`使用；实现提交代码前，先进性校验

```shell
# git 仓库初始化
git init

# 安装husky包
pnpm install husky lint-staged -D

# husky初始化
npx husky init
```

> 在`package.json`中配置`lint-staged`相关配置

```json
"lint-staged": {
  "src/**/*.{js,cjs,ts,vue}": [
    "npx eslint --fix"
  ],
  "src/**/*.{html,json,css,scss}": [
    "npx prettier --write"
  ]
}
```

> pre-commit中配置`npx lint-staged`

#### commit-lint配置

> 代码提交规范

- 安装依赖库

```shell
pnpm install @commitlint/cli @commitlint/config-conventional -D
```

- 添加钩子`commit-msg`,内容修改如下

```shell
npx --no-install commitlint --edit $1
```

- commitlint配置
  添加`commitlint-config.cjs`配置文件

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