# vue3_admin

**Repository Path**: littleluoCode/vue3_admin

## Basic Information

- **Project Name**: vue3_admin
- **Description**: 基于Vue 3的现代化后台管理系统模板，集成最新前端技术栈，提供高效、易用的管理界面解决方案。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-02-16
- **Last Updated**: 2025-03-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 3 + TypeScript + Vite 硅谷甄选平台

## 一、项目初始化

```sh
yarn create vite
cd vue3_admin
yarn
yarn dev
```

## 二、项目配置

### 2.1 ESLint + Prettier 配置（新版）

[ESLint 中文官网](https://eslint.nodejs.cn/)

[Prettier 中文官网](https://www.prettier.cn/)

**详细参考掘金大佬 [2024年｜ESlint9+Prettier从0开始配置教程2024年，教你从0开始认识和配置ESlint。本文将从0开 - 掘金](https://juejin.cn/post/7402696141495779363)**

安装 `ESLint` 、`prettier`等相关插件

```sh
yarn add eslint -D
yarn add prettier -D
yarn add @eslint/js -D
yarn add globals -D
yarn add eslint-plugin-vue typescript-eslint -D
yarn add @stylistic/eslint-plugin -D
yarn add eslint-plugin-prettier -D
```

在项目**根目录**中创建一份配置文件，从`ESlint9.x`开始，建议直接用`eslint.config.js`

```js
import globals from 'globals';
import tseslint from 'typescript-eslint';
import pluginVue from 'eslint-plugin-vue';
import eslint from '@eslint/js';
import stylistic from '@stylistic/eslint-plugin';
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';

/** @type {import('eslint').Linter.Config[]} */
export default tseslint.config(
    {
        ignores: ['node_modules', 'dist', 'public'],
        files: ['**/*.{js,mjs,cjs,ts,vue}'],
    },

    /** js推荐配置 */
    eslint.configs.recommended,
    /** ts推荐配置 */
    ...tseslint.configs.recommended,
    /** vue推荐配置 */
    ...pluginVue.configs['flat/recommended'],

    /** stylistic 配置 */
    stylistic.configs.customize({
        indent: 2, // 缩进为 2 个空格
        quotes: 'single', // 单引号
        semi: true, // 语句末尾需要分号
        jsx: true, // 允许在 JSX 中使用单引号
        arrowParens: 'always', // 箭头函数参数需要括号
    }),

    /**
     * javascript 规则
     */
    {
        files: ['**/*.{js,mjs,cjs,vue}'],
        rules: {
            'no-console': 'error',
        },
    },

    /**
     * 配置全局变量
     */
    {
        languageOptions: {
            globals: {
                ...globals.browser,

                /** 追加一些其他自定义全局规则 */
                wx: true,
            },
        },
    },

    /**
     * Vue 规则
     */
    {
        files: ['**/*.vue'],
        languageOptions: {
            parserOptions: {
                /** typescript项目需要用到这个 */
                parser: tseslint.parser,
                ecmaVersion: 'latest',
                /** 允许在.vue 文件中使用 JSX */
                ecmaFeatures: {
                    jsx: true,
                },
            },
        },
        rules: {
            // 在这里追加 vue 规则
            'vue/no-mutating-props': [
                'off',
                {
                    shallowOnly: true,
                },
            ],
            'vue/html-indent': ['error', 2],
            'vue/multi-word-component-names': 'off',
            'vue/max-attributes-per-line': 'off',
        },
    },

    /**
     * typescript 规则
     */
    {
        files: ['**/*.{ts,tsx,vue}'],
        rules: {},
    },

    /**
     * prettier 配置
     * off与它冲突的ESlint规则
     * 并且启用自己的Recommended规则
     * 会合并根目录下的prettier.config.js 文件
     * @see https://prettier.io/docs/en/options
     */
    eslintPluginPrettierRecommended,
);

```

在根目录创建一份`prettier.config.js`，配置如下

```js
/**
 * @type {import('prettier').Config}
 * @see https://www.prettier.cn/docs/options.html
 */
export default {
    trailingComma: 'all',
    singleQuote: true,
    semi: true,
    printWidth: 80,
    arrowParens: 'always',
    proseWrap: 'always',
    endOfLine: 'auto',
    experimentalTernaries: false,
    tabWidth: 2,
    useTabs: false,
    quoteProps: 'consistent',
    jsxSingleQuote: false,
    bracketSpacing: true,
    bracketSameLine: false,
    jsxBracketSameLine: false,
    vueIndentScriptAndStyle: false,
    singleAttributePerLine: false,
};
```

`package.json` 文件中增加以下代码

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

### 2.2 ESLint 代码检查工具配置（旧版）

[ESLint 中文官网](https://eslint.nodejs.cn/)

```sh
yarn add eslint -D
yarn eslint --init
```

`yarn eslint --init` 后会生成一份 ESLint 配置文件 `eslint.config.js`
修改如下配置

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

/** @type {import('eslint').Linter.Config[]} */
export default [
    {
        files: ['**/*.{js,mjs,cjs,ts,vue}'],
        languageOptions: {
            parserOptions: {
                parser: '@typescript-eslint/parser',
                sourceType: 'module',
                ecmaVersion: 'latest',
                jsxPragma: 'React',
                ecmaFeatures: {
                    jsx: true,
                },
            },
        },
        rules: {
            // eslint（https://eslint.bootcss.com/docs/rules/）
            'no-var': 'error', // 要求使用 let 或 const 而不是 var
            'no-multiple-empty-lines': ['warn', { max: 1 }], // 不允许多个空行
            'no-console':
                process.env.NODE_ENV === 'production' ? 'error' : 'off',
            'no-debugger':
                process.env.NODE_ENV === 'production' ? 'error' : 'off',
            'no-unexpected-multiline': 'error', // 禁止空余的多行
            'no-useless-escape': 'off', // 禁止不必要的转义字符

            // typeScript (https://typescript-eslint.io/rules)
            '@typescript-eslint/no-unused-vars': 'error', // 禁止定义未使用的变量
            '@typescript-eslint/prefer-ts-expect-error': 'error', // 禁止使用 @ts-ignore
            '@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型
            '@typescript-eslint/no-non-null-assertion': 'off',
            '@typescript-eslint/no-namespace': 'off', // 禁止使用自定义 TypeScript 模块和命名空间。
            '@typescript-eslint/semi': 'off',

            // eslint-plugin-vue (https://eslint.vuejs.org/rules/)
            'vue/multi-word-component-names': 'off', // 要求组件名称始终为 “-” 链接的单词
            'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的变量<template>被标记为未使用
            'vue/no-mutating-props': 'off', // 不允许组件 prop的改变
            'vue/attribute-hyphenation': 'off', // 对模板中的自定义组件强制执行属性命名样式
        },
    }, // 指定要检查的文件类型，根据需要修改
    { languageOptions: { globals: globals.browser } },
    pluginJs.configs.recommended,
    ...tseslint.configs.recommended,
    ...pluginVue.configs['flat/essential'],
];

```

#### 安装 Vue3 环境代码校验插件

```cmd
yarn add -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier eslint-plugin-node @babel/eslint-parser
```

#### 运行脚本

`package.json` 文件中增加以下代码

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

### 2.3 Prettier 代码格式化工具配置（旧版）

Prettier 代码格式化工具配置
[Prettier 中文官网](https://www.prettier.cn/)

```sh
yarn add prettier eslint-config-prettier eslint-plugin-prettier -D
```

#### 配置 Prettier

`.prettierrc.json` 添加规则

```json
{
    "singleQuote": true, // 使用单引号
    "semi": false, // 不加分号
    "bracketSpacing": true, // 对象字面量中的大括号间添加空格
    "htmlWhitespaceSensitivity": "ignore", // 忽略 HTML 文件中的空白
    "endOfLine": "auto", // 自动换行
    "trailingComma": "all", // 多行时尽可能打印尾随逗号
    "tabWidth": 4, // 缩进2个空格
    "useTabs": false // 不使用制表符缩进
}
```

`.prettierignore` 添加忽略文件

```
dist
build
node_modules
public
.husky
.bin
docs
html
.vscode
.idea
*.sh
*.md
```

### 2.4 配置 Stylelint 样式检查工具

lint 样式检查工具
[Stylelint 中文官网](https://www.stylelint.cn/)

安装依赖

```sh
yarn add sass sass-loader stylelint postcss postcss-scss postcss-html stylelint-config-prettier stylelint-config-recess-order stylelint-config-recommended-scss stylelint-config-standard stylelint-config-standard-vue stylelint-scss stylelint-order stylelint-config-standard-scss -D
```

#### 配置 Stylelint

`.stylelintrc.js` 添加规则

```js
// @see https://stylelint.bootcss.com/

export default {
    extends: [
        'stylelint-config-standard', // 配置stylelint拓展插件
        'stylelint-config-html/vue', // 配置 vue 中 template 样式格式化
        'stylelint-config-standard-scss', // 配置stylelint scss插件
        'stylelint-config-recommended-vue/scss', // 配置 vue 中 scss 样式格式化
        'stylelint-config-recess-order', // 配置stylelint css属性书写顺序插件,
        'stylelint-config-prettier', // 配置stylelint和prettier兼容
    ],
    overrides: [
        {
            files: ['**/*.(scss|css|vue|html)'],
            customSyntax: 'postcss-scss',
        },
        {
            files: ['**/*.(html|vue)'],
            customSyntax: 'postcss-html',
        },
    ],
    ignoreFiles: [
        '**/*.js',
        '**/*.jsx',
        '**/*.tsx',
        '**/*.ts',
        '**/*.json',
        '**/*.md',
        '**/*.yaml',
    ],
    /**
     * null  => 关闭该规则
     * always => 必须
     */
    rules: {
        'value-keyword-case': null, // 在 css 中使用 v-bind，不报错
        'no-descending-specificity': null, // 禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器
        'function-url-quotes': 'always', // 要求或禁止 URL 的引号 "always(必须加上引号)"|"never(没有引号)"
        'no-empty-source': null, // 关闭禁止空源码
        'selector-class-pattern': null, // 关闭强制选择器类名的格式
        'property-no-unknown': null, // 禁止未知的属性(true 为不允许)
        'block-opening-brace-space-before': 'always', //大括号之前必须有一个空格或不能有空白符
        'value-no-vendor-prefix': null, // 关闭 属性值前缀 --webkit-box
        'property-no-vendor-prefix': null, // 关闭 属性前缀 -webkit-mask
        'selector-pseudo-class-no-unknown': [
            // 不允许未知的选择器
            true,
            {
                ignorePseudoClasses: ['global', 'v-deep', 'deep'], // 忽略属性，修改element默认样式的时候能使用到
            },
        ],
    },
};
```
`.stylelintignore` 添加忽略文件
```
/.husky/*
/.vscode/*
/bin
/node_modules/*
/docs/*
/html/*
/dist/*
/public/*
/scripts/*
```
### 2.5 配置 Git
#### 创建本地 git 仓库并关联远程仓库
可选 `gitee` `github` 等
```sh
git init # 初始化本地仓库

git remote add origin https://gitee.com/xxx.git # 关联远程仓库
git add .   # 提交所有文件
git commit -m "init"  # 提交所有文件
git push -u origin master   # 提交到远程仓库
```
#### 安装 `husky` 提交代码前检查工具
安装 `husky` 提交代码前检查
[Husky 中文官网](https://husky.nodejs.cn/get-started.html)
```sh
yarn add husky -D # 安装 husky
npx husky-init # 初始化 husky
```
执行 `npx husky-init` 初始化 `husky`
`.husky/pre-commit` 中添加以下代码
```sh
#!/bin/sh
. "$(dirname -- "$0")/_/husky.sh"
yarn format
```
当我们对代码进行commit操作的时候，就会执行命令，对代码进行格式化，然后再提交
### 2.6 配置 commitlint 提交代码前检查工具
#### 安装 `commitlint` 提交代码前检查工具
[Commitlint 中文官网](https://commitlint.js.org/#/)
```sh
yarn add @commitlint/cli @commitlint/config-conventional -D
```
在项目根目录下创建 `commitlint.config.cjs` 文件
```js
module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'body-leading-blank': [1, 'always'],
    'body-max-line-length': [2, 'always', 100],
    'footer-leading-blank': [1, 'always'],
    'footer-max-line-length': [1, 'always', 100],
    'header-max-length': [2, 'always', 100],
    'subject-case': [2, 'never', ['sentence-case', 'start-case', 'pascal-case', 'upper-case']],
    'subject-empty': [2, 'never'],
    'subject-full-stop': [2, 'never', '.'],
    'type-case': [2, 'always', 'lower-case'],
    'type-empty': [2, 'never'],
    'type-enum': [
      2,
      'always',
      [
        'build',
        'chore',
        'ci',
        'docs',
        'feat',
        'fix',
        'perf',
        'refactor',
        'revert',
        'style',
        'test',
        'conflict',
        'fonts',
        'delete',
        'stash',
      ],
    ],
  },
};
```
在 `package.json` 文件中添加以下代码
```json
"scripts": {
    "commitlint": "commitlint --config commitlint.config.cjs -e -V"
},
```
配置 `husky`
``` sh
npx husky add .husky/commit-msg
```
`.husky/commit-msg` 中添加以下代码
```sh
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
yarn commitlint
```
#### 安装 `commitizen` 终端可视化交互工具
与 cz-git 配合使用
[Commitizen 中文官网](https://commitizen-tools.github.io/commitizen/)

[快速开始 | cz-git](https://cz-git.qbb.sh/zh/guide/)

```sh
yarn add commitizen -D
yarn add cz-git -D
```
`.czrc` 中添加以下代码
```json
{
  "path": "cz-git",
  "messages": {
    "type": "选择你要提交的类型:",
    "scope": "选择一个提交范围（可选）:",
    "customScope": "请输入自定义的提交范围:",
    "subject": "填写简短精炼的变更描述:\n",
    "body": "填写更加详细的变更描述（可选）。使用“|”换行:\n",
    "breaking": "列举非兼容性重大的变更（可选）。使用“|”换行:\n",
    "footerPrefixesSelect": "选择关联issue前缀（可选）:",
    "customFooterPrefix": "输入自定义issue前缀:",
    "footer": "列举关联issue （可选）例如: #31, #I3244:\n",
    "generatingByAI": "正在通过 AI 生成你的提交简短描述...",
    "generatedSelectByAI": "选择一个 AI 生成的简短描述:",
    "confirmCommit": "是否提交或修改commit？"
  },
  "types": [
    {
      "value": "feat",
      "name": "feat:     ✨  新增功能",
      "emoji": ":sparkles:"
    },
    {
      "value": "fix",
      "name": "fix:      🐛  修复缺陷",
      "emoji": ":bug:"
    },
    {
      "value": "docs",
      "name": "docs:     📚  文档变更",
      "emoji": ":books:"
    },
    {
      "value": "style",
      "name": "style:    💄  代码格式（不影响功能，例如空格、分号等格式修正）",
      "emoji": ":lipstick:"
    },
    {
      "value": "refactor",
      "name": "refactor: 📦  代码重构（不包括 bug 修复、功能新增）",
      "emoji": ":package:"
    },
    {
      "value": "perf",
      "name": "perf:     🚀  性能优化",
      "emoji": ":rocket:"
    },
    {
      "value": "conflict",
      "name": "conflict: 🧰  修改冲突",
      "emoji": ":rewind:"
    },
    {
      "value": "test",
      "name": "test:     ✅  添加疏漏测试或已有测试改动",
      "emoji": ":white_check_mark:"
    },
    {
      "value": "build",
      "name": "build:    🔧  构建流程、外部依赖变更（如升级 npm 包、修改 vite 配置等）",
      "emoji": ":wrench:"
    },
    {
      "value": "ci",
      "name": "ci:       🎡  修改 CI 配置、脚本",
      "emoji": ":ferris_wheel:"
    },
    {
      "value": "revert",
      "name": "revert:   ⏪️  回滚 commit",
      "emoji": ":rewind:"
    },
    {
      "value": "chore",
      "name": "chore:    🔨  对构建过程或辅助工具和库的更改（不影响源文件、测试用例）",
      "emoji": ":hammer:"
    },
    {
      "value": "fonts",
      "name": "fonts:    🔠  字体文件更新",
      "emoji": ":capital_abcd:"
    },
    {
      "value": "delete",
      "name": "delete:   🆑  删除文件",
      "emoji": ":cl:"
    }
  ],
  "useEmoji": true,
  "emojiAlign": "center",
  "useAI": false,
  "aiNumber": 1,
  "themeColorCode": "",
  "scopes": [],
  "allowCustomScopes": true,
  "allowEmptyScopes": true,
  "customScopesAlign": "bottom",
  "customScopesAlias": "custom",
  "emptyScopesAlias": "empty",
  "upperCaseSubject": false,
  "markBreakingChangeMode": false,
  "allowBreakingChanges": [
    "feat",
    "fix"
  ],
  "breaklineNumber": 100,
  "breaklineChar": "|",
  "skipQuestions": [],
  "issuePrefixes": [
    {
      "value": "closed",
      "name": "closed:   ISSUES has been processed"
    }
  ],
  "customIssuePrefixAlign": "top",
  "emptyIssuePrefixAlias": "skip",
  "customIssuePrefixAlias": "custom",
  "allowCustomIssuePrefix": true,
  "allowEmptyIssuePrefix": true,
  "confirmColorize": true,
  "minSubjectLength": 0,
  "defaultBody": "",
  "defaultIssues": "",
  "defaultScope": "",
  "defaultSubject": ""
}
```
`package.json` 中添加以下代码
```json
"scripts": {
    "commit": "git-cz"
  },
```
## 三、项目集成

### 1. 集成 Element-Plus UI框架

[一个 Vue 3 UI 框架 | Element Plus](https://element-plus.org/zh-CN/)

安装 `Element-Plus`

``` sh
yarn add element-plus
pnpm install element-plus
npm install element-plus --save
```

#### 1.1 完整引入

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

在 `main.ts` 中添加以下代码

```ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')
```

#### 1.2 自动导入(推荐)

首先你需要安装`unplugin-vue-components` 和 `unplugin-auto-import`这两款插件

```sh
yarn add -D unplugin-vue-components unplugin-auto-import
pnpm install -D unplugin-vue-components unplugin-auto-import
npm install -D unplugin-vue-components unplugin-auto-import
```

然后把下列代码插入到你的 `Vite` 或 `Webpack` 的配置文件中

`vite.config.ts`

```ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

// 引入element-plus
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

// https://vite.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        // element-plus 自动导入插件
        AutoImport({
            resolvers: [ElementPlusResolver()],
        }),
        Components({
            resolvers: [ElementPlusResolver()],
        }),
    ],
});

```

`tsconfig.app.json` 修改如下代码

```json
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue","auto-imports.d.ts"]
```

完整代码

```ts
{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "incremental": true, // 添加 incremental 选项以启用增量编译

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,

    /* src别名 */
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue","auto-imports.d.ts"]
}
```

#### 1.3 图标自动导入

安装插件

```sh
yarn add unplugin-icons -D
```

`vite.config.ts` 代码如下

```ts
plugins: [
      vue(),
      // element-plus 自动导入插件
      AutoImport({
        // Auto import functions from Vue, e.g. ref, reactive, toRef...
        // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
        imports: ['vue', 'vue-router'],

        // Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)
        // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
        resolvers: [
          ElementPlusResolver({
            importStyle: 'sass', // 按需加载样式（需安装 sass）
            directives: true, // 自动导入指令（如 v-loading）
          }),

          // Auto import icon components
          // 自动导入图标组件
          IconsResolver({
            prefix: 'i', // 统一图标前缀为 <i-ep-xxx>
            enabledCollections: ['ep'], // Element Plus 官方图标
          }),
        ],

        dts: resolve(pathSrc, 'auto-imports.d.ts'),
        eslintrc: { enabled: true }, // 生成 ESLint 配置
      }),
      Components({
        resolvers: [
          // Auto register icon components
          // 自动注册图标组件
          IconsResolver({
            prefix: 'i', // 与 AutoImport 一致
            enabledCollections: ['ep'],
            // 增加分辨率别名防止 SVG 冲突
            alias: {
              'i-svg': 'svg',
              'i-custom': 'custom',
            },
          }),
          // Auto register Element Plus components
          // 自动导入 Element Plus 组件
          ElementPlusResolver(),
        ],

        dts: resolve(pathSrc, 'components.d.ts'),
        types: [
          {
            from: 'vue-router',
            names: ['RouterLink', 'RouterView'], // 自动注册路由组件
          },
        ],
      }),
      Icons({
        compiler: 'vue3', // 明确指定 Vue 3 编译器
        autoInstall: true,
        defaultClass: 'inline-icon', // 全局图标样式类
      }),
],
```

完整代码

```ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';

// 引入element-plus
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import IconsResolver from 'unplugin-icons/resolver';
import Icons from 'unplugin-icons/vite';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';

// 引入 Mock 插件
import { viteMockServe } from 'vite-plugin-mock';

const pathSrc = resolve(__dirname, 'src');

// https://vite.dev/config/
export default defineConfig(({ command }) => {
  return {
    plugins: [
      vue(),
      // element-plus 自动导入插件
      AutoImport({
        // Auto import functions from Vue, e.g. ref, reactive, toRef...
        // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
        imports: ['vue', 'vue-router'],

        // Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)
        // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
        resolvers: [
          ElementPlusResolver({
            importStyle: 'sass', // 按需加载样式（需安装 sass）
            directives: true, // 自动导入指令（如 v-loading）
          }),

          // Auto import icon components
          // 自动导入图标组件
          IconsResolver({
            prefix: 'i', // 统一图标前缀为 <i-ep-xxx>
            enabledCollections: ['ep'], // Element Plus 官方图标
          }),
        ],

        dts: resolve(pathSrc, 'auto-imports.d.ts'),
        eslintrc: { enabled: true }, // 生成 ESLint 配置
      }),
      Components({
        resolvers: [
          // Auto register icon components
          // 自动注册图标组件
          IconsResolver({
            prefix: 'i', // 与 AutoImport 一致
            enabledCollections: ['ep'],
            // 增加分辨率别名防止 SVG 冲突
            alias: {
              'i-svg': 'svg',
              'i-custom': 'custom',
            },
          }),
          // Auto register Element Plus components
          // 自动导入 Element Plus 组件
          ElementPlusResolver(),
        ],

        dts: resolve(pathSrc, 'components.d.ts'),
        types: [
          {
            from: 'vue-router',
            names: ['RouterLink', 'RouterView'], // 自动注册路由组件
          },
        ],
      }),
      Icons({
        compiler: 'vue3', // 明确指定 Vue 3 编译器
        autoInstall: true,
        defaultClass: 'inline-icon', // 全局图标样式类
      }),
      // svg插件
      createSvgIconsPlugin({
        // Specify the icon folder to be cached
        iconDirs: [resolve(process.cwd(), 'src/assets/icons')],
        // Specify symbolId format
        symbolId: 'icon-[dir]-[name]',
      }),
      viteMockServe({
        enable: command === 'serve',
        logger: false, // 关闭控制台日志
        mockPath: 'mock', // 明确指定 mock 目录
      }),
    ],
    resolve: {
      // 设置文件./src路径为 @
      alias: [
        {
          find: '@',
          replacement: pathSrc,
        },
      ],
    },
    // scss全局变量
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `
          @use '@/styles/variable.scss' as *;
        `,
        },
      },
    },
  };
});

```



##### 使用方法一

```vue
<i-ep-图标名> </i-ep-图标名>
<i-ep-user> </i-ep-user>
```

##### 使用方法二 插槽自定义

```vue
<el-input
v-model="loginForm.username"
type="text">
<!-- 通过插槽自定义图标样式 -->
<template #prefix>
	<i-ep-user />
</template>
</el-input>
```

### 2. src别名的配置

`vite.config.ts`

```ts
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            "@": path.resolve("./src") // 相对路径别名配置，使用 @ 代替 src
        }
    }
})
```

**TypeScript 编译配置**

`tsconfig.json`

```json
{
  "compilerOptions": {
    "baseUrl": ".", // 解析非相对模块的基地址，默认是当前目录
    "paths": { //路径映射，相对于baseUrl
      "@/*": ["src/*"] 
    }
  }
}
```
`tsconfig.app.json`
```json
{
    "extends": "@vue/tsconfig/tsconfig.dom.json",
    "compilerOptions": {
        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
        "incremental": true, // 添加 incremental 选项以启用增量编译

        /* Linting */
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noFallthroughCasesInSwitch": true,

        /* src别名 */
        "baseUrl": ".",
        "paths": {
            "@/*": ["src/*"]
        }
    },
    "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

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

开发环境（development）
顾名思义，开发使用的环境，每位开发人员在自己的dev分支上干活，开发到一定程度，同事会合并代码，进行联调。

测试环境（testing）
测试同事干活的环境啦，一般会由测试同事自己来部署，然后在此环境进行测试

生产环境（production）
生产环境是指正式提供对外服务的，一般会关掉错误报告，打开错误日志。(正式提供给客户使用的环境。)

注意:一般情况下，一个环境对应一台服务器,也有的公司开发与测试环境是一台服务器！！！

项目根目录分别添加 开发、生产和测试环境的文件!
```
.env.development
.env.production
.env.test
```
文件内容

```
# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'development'
VITE_APP_TITLE = '硅谷甄选运营平台'
VITE_APP_BASE_API = '/dev-api'
```

```
NODE_ENV = 'production'
VITE_APP_TITLE = '硅谷甄选运营平台'
VITE_APP_BASE_API = '/prod-api'
```

```
# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'test'
VITE_APP_TITLE = '硅谷甄选运营平台'
VITE_APP_BASE_API = '/test-api'
```

配置运行命令：package.json

```
 "scripts": {
    "dev": "vite --open",
    "build:test": "vue-tsc && vite build --mode test",
    "build:pro": "vue-tsc && vite build --mode production",
    "preview": "vite preview"
  },
```

通过import.meta.env获取环境变量

### 4. SVG 图标配置
在开发项目的时候经常会用到 SVG 矢量图,而且我们使用 SVG 以后，页面上加载的不再是图片资源,

这对页面性能来说是个很大的提升，而且我们 SVG 文件比 img 要小的很多，放在项目中几乎不占用资源。

**安装SVG依赖插件**

```
yarn add vite-plugin-svg-icons -D
```

**在`vite.config.ts`中配置插件**

```ts
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
export default () => {
  return {
    plugins: [
      createSvgIconsPlugin({
        // Specify the icon folder to be cached
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        // Specify symbolId format
        symbolId: 'icon-[dir]-[name]',
      }),
    ],
  }
}
```

**入口文件导入`main.ts`**

```ts
import 'virtual:svg-icons-register'
```

#### 4.1 SVG 封装为全局组件 （配置过Element-Plus自动导入此处可省略）

因为项目很多模块需要使用图标,因此把它封装为全局组件！！！

**在src/components目录下创建一个SvgIcon组件:代码如下**

```vue
<template>
  <!-- svg:图标外层容器节点，内部需要与use标签结合使用  -->
  <svg :style="{ width: size, height: size }">
    <!-- xlink:href -->
    <use
      :xlink:href="prefix + name"
      :fill="color"
    />
  </svg>
</template>

<script setup lang="ts">
// 接收父组件传递过来的参数
defineProps({
  // xlink:href 前缀
  // 默认值：#icon-
  prefix: {
    type: String,
    default: '#icon-',
  },
  // 图标名称
  name: {
    type: String,
    default: '',
    required: true,
    validator: (val: string) => {
      // 图标名称不能为空
      return val !== '';
    },
  },
  // 图标颜色
  // 默认值：空字符串
  color: {
    type: String,
    default: '',
  },
  // 图标大小
  // 默认值：16px
  size: {
    type: String,
    default: '16px',
  },
});
</script>

<style scoped lang="scss"></style>
```

在src文件夹目录下创建一个index.ts文件：用于注册components文件夹内部全部全局组件！！！

```
import SvgIcon from './SvgIcon/index.vue';
import type { App, Component } from 'vue';
const components: { [name: string]: Component } = { SvgIcon };
export default {
    install(app: App) {
        Object.keys(components).forEach((key: string) => {
            app.component(key, components[key]);
        })
    }
}
```

在入口文件引入src/index.ts文件,通过app.use方法安装自定义插件

```
import gloablComponent from './components/index';
app.use(gloablComponent);
```

### 5. 集成 Sass

我们目前在组件内部已经可以使用scss样式,因为在配置styleLint工具的时候，项目当中已经安装过sass sass-loader,因此我们再组件内可以使用scss语法！！！需要加上lang="scss"

```vue
<style scoped lang="scss"></style>
```

接下来我们为项目添加一些全局的样式

在src/styles目录下创建一个index.scss文件，当然项目中需要用到清除默认样式，因此在index.scss引入reset.scss

```scss
@use ./reset.scss
```

`reset.scss`

```scss
/**
 * Modern CSS Reset Tweaks
 * ==================================================
 * A collection of modern CSS reset and normalization styles
 * to ensure consistent behavior across browsers, OS and devices.
 */

/* Ensure consistent font resizing on mobile devices */
html {
  -webkit-text-size-adjust: 100%;

  &:focus-within {
    scroll-behavior: smooth;
  }
}

/* Basic body setup for layout and text rendering optimization */
body {
  text-size-adjust: 100%;
  position: relative;

  width: 100%;
  min-height: 100vh;

  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeSpeed;
}


/* Apply box-sizing globally for consistent element sizing */
*,
::after,
::before {
  box-sizing: border-box;
}


/* Style unclassed links for better accessibility */
a:not([class]) {
  text-decoration-skip-ink: auto;
}


/**
 * CSS Reset Tweaks
 * Based on Eric Meyer's CSS Reset v2.0-modified (public domain)
 * URL: http://meyerweb.com/eric/tools/css/reset/
 */

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
br,
button,
canvas,
caption,
center,
cite,
code,
col,
colgroup,
data,
datalist,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
head,
header,
hgroup,
hr,
html,
i,
iframe,
img,
input,
ins,
kbd,
label,
legend,
li,
link,
main,
map,
mark,
menu,
meta,
meter,
nav,
noscript,
object,
ol,
optgroup,
option,
output,
p,
param,
picture,
pre,
progress,
q,
rb,
rp,
rt,
rtc,
ruby,
s,
samp,
script,
section,
select,
small,
source,
span,
strong,
style,
svg,
sub,
summary,
sup,
table,
tbody,
td,
template,
textarea,
tfoot,
th,
thead,
time,
title,
tr,
track,
tt,
u,
ul,
var,
video,
wbr {
  font-size: 100%;
  font: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

/* Add focus styles to improve accessibility */
:focus {
  outline: 0;
}

/* Normalize HTML5 elements for older browsers */
article,
aside,
details,
embed,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
object,
section {
  display: block;
}

canvas,
iframe {
  max-width: 100%;
  height: auto;
  display: block
}

/* Remove default list styling */
ol,
ul {
  list-style: none;
}

/* Normalize quote styling */
blockquote,
q {
  quotes: none;

  &:before,
  &:after {
    content: '';
    content: none;
  }
}

/* Reset and normalize form inputs */
input:required,
input {
  box-shadow: none;
}

/* Autofill styling for better compatibility */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px white inset;
}

/* Improve appearance of search inputs */
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type=search] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical;
}

input {
  &:focus {
    outline: none;
  }
}

video {
  background: #000;
}



/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
 */
[hidden] {
  display: none;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: none;
}

/**
 * Make media easier to work with
 */
audio,
img,
picture,
svg,
video {
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
  height: auto;
}

/**
 * Address Firefox 3+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
button,
input {
  line-height: normal;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */

button,
select {
  text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  appearance: button;
  cursor: pointer;
  border: 0;
  background: transparent;
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}

/* Additional attribute handling for accessibility */
[disabled],
[disabled="true"],
[aria-disabled="true"] {
  pointer-events: none;
}

/**
 * Address box sizing set to content-box in IE 8/9.
 */
input[type="checkbox"],
input[type="radio"] {
  padding: 0;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield;
  appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Remove inner padding and border in Firefox 3+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

button {
  border: 0;
  background: transparent;
}

textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical;
}

/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
  text-indent: 0;
}


/**
 * Based on normalize.css v8.0.1
 * github.com/necolas/normalize.css
 */
hr {
  box-sizing: content-box;
  overflow: visible;
  background: #000;
  border: 0;
  height: 1px;
  line-height: 0;
  margin: 0;
  padding: 0;
  page-break-after: always;
  width: 100%;
}

/**
 * Correct the inheritance and scaling of font size in all browsers.
 */
pre {
  font-family: monospace, monospace;
  font-size: 100%;
}

/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  text-decoration: none;
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 75%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -5px;
}

sup {
  top: -5px;
}

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1;
  margin: 0;
  padding: 0;
}

/**
 * Show the overflow in IE and Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
  outline: 0;
}


legend {
  color: inherit;
  white-space: normal;

  display: block;
  border: 0;
  max-width: 100%;
  width: 100%;
}

fieldset {
  min-width: 0;
}

body:not(:-moz-handler-blocked) fieldset {
  display: block;
}


/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}


/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}


/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

template {
  display: none;
}
```



在入口文件 `main.ts`引入

```ts
// 引入 sass 全局样式
import '@/styles/index.scss';
```

但是你会发现在src/styles/index.scss全局样式文件中没有办法使用$变量.因此需要给项目中引入全局变量$.

在styles/variable.scss创建一个variable.scss文件！

在vite.config.ts文件配置如下:

```
export default defineConfig({
  plugins: [
    vue(),
    // element-plus 自动导入插件
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    // svg插件
    createSvgIconsPlugin({
      // Specify the icon folder to be cached
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      // Specify symbolId format
      symbolId: 'icon-[dir]-[name]',
    }),
  ],
  resolve: {
    // 设置文件./src路径为 @
    alias: [
      {
        find: '@',
        replacement: resolve(__dirname, './src'),
      },
    ],
  },
  // scss全局变量
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @use '@/styles/variable.scss' as *;
        `,
      },
    },
  },
});

```

### 6. 集成 Mock

安装依赖:https://www.npmjs.com/package/vite-plugin-mock

```sh
yarn add -D vite-plugin-mock mockjs
```

在 vite.config.js 配置文件启用插件。

```
import { viteMockServe } from 'vite-plugin-mock'
import vue from '@vitejs/plugin-vue'
export default ({ command })=> {
  return {
    plugins: [
      vue(),
      viteMockServe({
        enabled: command === 'serve',
      }),
    ],
  }
}
```

在根目录创建mock文件夹:去创建我们需要mock数据与接口！！！

在mock文件夹内部创建一个user.ts文件

```
// 用户信息数据
/**
 * 创建用户列表，返回包含用户信息的数组。
 * @returns {Array} 包含用户信息的数组，每个用户信息为一个对象。
 */
function createUserList() {
  return [
    {
      userId: 1,
      avatar:
        'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
      username: 'admin',
      password: '111111',
      desc: '平台管理员',
      roles: ['平台管理员'],
      buttons: ['cuser.detail'],
      routes: ['home'],
      token: 'Admin Token',
    },
    {
      userId: 2,
      avatar:
        'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
      username: 'system',
      password: '111111',
      desc: '系统管理员',
      roles: ['系统管理员'],
      buttons: ['cuser.detail', 'cuser.user'],
      routes: ['home'],
      token: 'System Token',
    },
  ];
}

/**
 * 导出一个包含模拟接口配置的数组，用于模拟用户登录和获取用户信息的接口响应。
 * @type {Array}
 */
export default [
  // 用户登录接口
  {
    url: '/api/user/login', // 请求地址
    method: 'post', // 请求方式
    response: ({ body }) => {
      // 获取请求体携带过来的用户名与密码
      const { username, password } = body;
      // 调用获取用户信息函数,用于判断是否有此用户
      const checkUser = createUserList().find(
        (item) => item.username === username && item.password === password,
      );
      // 没有用户返回失败信息
      if (!checkUser) {
        return { code: 201, data: { message: '账号或者密码不正确' } };
      }
      // 如果有返回成功信息
      const { token } = checkUser;
      return { code: 200, data: { token } };
    },
  },
  // 获取用户信息
  {
    url: '/api/user/info',
    method: 'get',
    response: (request) => {
      // 获取请求头携带token
      const token = request.headers.token;
      // 查看用户信息是否包含有次token用户
      const checkUser = createUserList().find((item) => item.token === token);
      // 没有返回失败的信息
      if (!checkUser) {
        return { code: 201, data: { message: '获取用户信息失败' } };
      }
      // 如果有返回成功信息
      return { code: 200, data: { checkUser } };
    },
  },
];
```

### 7. 集成 axios 并二次封装

安装 `axios`

```
yarn add axios
```

创建文件`src/utils/request.ts` 对`axios` 进行二次封装

```ts
// request.ts
// 二次封装 axios，使用请求与响应拦截器
// 引入 axios
import axios from 'axios';
// 利用 axios 对象的 create 方法创建一个 axios 实例
const request = axios.create({
  // 配置对象
  // 基础路径，发请求的时候，路径当中会出现 baseURL 会携带 /api
  baseURL: import.meta.env.VITE_APP_BASE_API,
  // 请求超时时间
  timeout: 5000,
});

// 请求拦截器
request.interceptors.request.use(
  (config) => {
    // config 配置对象，里面有一个属性很重要，headers，给服务器端携带 token
    // console.log(config);
    return config;
  },
  (error) => {
    // 错误提示
    return Promise.reject(error);
  },
);

// 响应拦截器
request.interceptors.response.use(
  (response) => {
    // 响应成功的回调
    // console.log(response);
    return response.data;
  },
  (error) => {
    // 响应失败的回调
    // console.log(error);
    let message = '';
    const status = error.response.status;
    switch (status) {
      case 401:
        message = 'TOKEN 过期';
        break;
      case 403:
        message = '无权访问';
        break;
      case 404:
        message = '请求地址错误';
        break;
      case 500:
        message = '服务器出现问题';
        break;
      default:
        message = '网络出现问题';
        break;
    }

    // 提示错误信息
    ElMessage({
      type: 'error',
      message,
      duration: 2000,
    });
    return Promise.reject(error);
  },
);

// 对外暴露
export default request;
```

### 8. 统一 API 接口管理

在 `src` 目录下新建 `api` 文件夹

目录结构如下

```
src/
├── api/
│   ├── user/
│   │   ├── index.ts
│   ├── product/
│   │   ├── index.ts
│   └── permission/
│       ├── index.ts
```

在 `src` 目录下创建 `types` 文件夹用于管理项目中所有的ts类型

目录结构如下

```
src/
├── types/
│   ├── api/
│   │   ├── user.ts
```

`src/api/user/index.ts` 添加代码

```ts
// 统一管理用户相关的接口
import request from '@/utils/request';
import type {
  LoginForm,
  LoginResponseData,
  UserResponseData,
} from '@/types/api/user';

enum API {
  // 获取用户信息
  USERINFO_URL = '/user/info',
  LOGIN_URL = '/user/login',
}

// 登录接口
export const reqLogin = (data: LoginForm) =>
  request.post<LoginResponseData>(API.LOGIN_URL, data);
// 获取用户信息接口
export const reqUserInfo = () =>
  request.get<UserResponseData>(API.USERINFO_URL);
```

`src/types/api/user.ts` 添加代码

```ts
// 登录接口需要携带的参数 ts 类型
export interface LoginForm {
  username: string;
  password: string;
}

interface DataType {
  token: string;
}

// 登录接口返回数据类型
export interface LoginResponseData {
  code: number;
  data: {
    token: DataType;
  };
}

interface UserInfo {
  userId: number;
  avatar: string;
  username: string;
  password: string;
  desc: string;
  roles: string[];
  buttons: string[];
  routes: string[];
  token: string;
}

interface User {
  checkUser: UserInfo;
}

// 定义服务器返回用户信息相关的数据类型
export interface UserResponseData {
  code: number;
  data: User;
}
```

## 四、问题集锦

**大部分问题都来自 `ESLint` ，总结：不装 ESLint B事没有**

### 1. ESLint 配置问题

`ESLint` 在版本 `9.0.0` 之后引入了新的配置系统，称为“Flat Config”，使用 `eslint.config.js` 作为配置文件。而传统的配置文件如`.eslintrc.cjs`属于旧版配置系统。

```js
import globals from 'globals';
import tseslint from 'typescript-eslint';
import pluginVue from 'eslint-plugin-vue';
import eslint from '@eslint/js';
import stylistic from '@stylistic/eslint-plugin';
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
import autoImportConfig from './auto-import.config.js';

/** @type {import('eslint').Linter.Config[]} */
export default tseslint.config(
  {
    ignores: ['node_modules', 'dist', 'public'],
    files: ['**/*.{js,mjs,cjs,ts,vue}'],
  },

  /** js推荐配置 */
  eslint.configs.recommended,
  /** ts推荐配置 */
  ...tseslint.configs.recommended,
  /** vue推荐配置 */
  ...pluginVue.configs['flat/recommended'],

  /** stylistic 配置 */
  stylistic.configs.customize({
    indent: 2, // 缩进为 2 个空格
    quotes: 'single', // 单引号
    semi: true, // 语句末尾需要分号
    jsx: true, // 允许在 JSX 中使用单引号
    arrowParens: 'always', // 箭头函数参数需要括号
  }),

  /**
   * javascript 规则
   */
  {
    files: ['**/*.{js,mjs,cjs,vue}'],
    rules: {
      'no-console': 'off',
    },
  },

  /**
   * 配置全局变量
   */
  {
    languageOptions: {
      globals: {
        ...autoImportConfig.globals,
        ...globals.browser,
        ...globals.node,

        /** 追加一些其他自定义全局规则 */
      },
    },
  },

  /**
   * Vue 规则
   */
  {
    files: ['**/*.vue'],
    languageOptions: {
      parser: pluginVue.parser, // 使用 vue-eslint-parser
      parserOptions: {
        /** typescript项目需要用到这个 */
        parser: tseslint.parser,
        ecmaVersion: 'latest',
        /** 允许在.vue 文件中使用 JSX */
        ecmaFeatures: {
          jsx: true,
        },
      },
    },
    rules: {
      // 在这里追加 vue 规则
      'vue/no-mutating-props': [
        'off',
        {
          shallowOnly: true,
        },
      ],
      'vue/html-indent': ['error', 2],
      'vue/multi-word-component-names': 'off',
      'vue/max-attributes-per-line': 'off',
    },
  },

  /**
   * typescript 规则
   */
  {
    files: ['**/*.{ts,tsx,vue}'],
    rules: {},
  },

  /**
   * prettier 配置
   * off与它冲突的ESlint规则
   * 并且启用自己的Recommended规则
   * 会合并根目录下的prettier.config.js 文件
   * @see https://prettier.io/docs/en/options
   */
  eslintPluginPrettierRecommended,
);

```

### 2. Element-Plus 自动导入插件配置问题

#### 2.1 vite.config.ts 关键配置

```ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';

// 引入element-plus
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';

const pathSrc = resolve(__dirname, 'src');

// https://cn.vitejs.dev/config/
export default defineConfig({
  plugins: [
      vue(),
      // element-plus 自动导入插件
      AutoImport({
        // Auto import functions from Vue, e.g. ref, reactive, toRef...
        // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
        imports: ['vue', 'vue-router'],

        // Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)
        // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
        resolvers: [
          ElementPlusResolver({
            importStyle: 'sass', // 按需加载样式（需安装 sass）
            directives: true, // 自动导入指令（如 v-loading）
          }),

          // Auto import icon components
          // 自动导入图标组件
          IconsResolver({
            prefix: 'i', // 统一图标前缀为 <i-ep-xxx>
            enabledCollections: ['ep'], // Element Plus 官方图标
          }),
        ],

        vueTemplate: true, // 启用 Vue 模板支持
        dts: resolve(__dirname, 'auto-imports.d.ts'),
        eslintrc: { 
            enabled: true 
            filepath: './auto-import.config.js',
        }, // 生成 ESLint 配置
      }),
      Components({
        resolvers: [
          // Auto register icon components
          // 自动注册图标组件
          IconsResolver({
            prefix: 'i', // 与 AutoImport 一致
            enabledCollections: ['ep'],
            // 增加分辨率别名防止 SVG 冲突
            alias: {
              'i-svg': 'svg',
              'i-custom': 'custom',
            },
          }),
          // Auto register Element Plus components
          // 自动导入 Element Plus 组件
          ElementPlusResolver(),
        ],

        dts: resolve(__dirname, 'components.d.ts'),
        types: [
          {
            from: 'vue-router',
            names: ['RouterLink', 'RouterView'], // 自动注册路由组件
          },
        ],
      })
  ]
})
```

#### 2.2 tsconfig 配置

在 `tsconfig.app.json` 中添加

```json
 "include": [
    "**/*.d.ts"  // auto-imports.d.ts 和 components.d.ts 这两个文件
  ]
```

完整代码如下

```json
{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "incremental": true, // 添加 incremental 选项以启用增量编译

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,

    /* src别名 */
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "**/*.d.ts"  // auto-imports.d.ts 和 components.d.ts 这两个文件
  ]
}
```

#### 2.3 eslint 配置

在 `eslint.config.js` 中添加以下代码

```js
import globals from 'globals';
import tseslint from 'typescript-eslint';
// 自动导入配置
import autoImportConfig from './auto-import.config.js';

/** @type {import('eslint').Linter.Config[]} */
export default tseslint.config(
  //
  /**
   * 配置全局变量
   * 放在最后确保优先级
   */
  {
    languageOptions: {
      globals: {
        ...autoImportConfig.globals,
      },
    },
  },
);
```

完整代码如下

```js
import globals from 'globals';
import tseslint from 'typescript-eslint';
import pluginVue from 'eslint-plugin-vue';
import eslint from '@eslint/js';
// eslint-stylistic 插件
import stylistic from '@stylistic/eslint-plugin';
// eslint-plugin-prettier 插件
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
// 自动导入配置
import autoImportConfig from './auto-import.config.js';

/** @type {import('eslint').Linter.Config[]} */
export default tseslint.config(
  {
    ignores: ['node_modules', 'dist', 'public'],
    files: ['**/*.{js,mjs,cjs,ts,vue}'],
  },

  /** js推荐配置 */
  eslint.configs.recommended,
  /** ts推荐配置 */
  ...tseslint.configs.recommended,
  /** vue推荐配置 */
  ...pluginVue.configs['flat/recommended'],

  /** stylistic 配置 */
  stylistic.configs.customize({
    indent: 2, // 缩进为 2 个空格
    quotes: 'single', // 单引号
    semi: true, // 语句末尾需要分号
    jsx: true, // 允许在 JSX 中使用单引号
    arrowParens: 'always', // 箭头函数参数需要括号
  }),

  /**
   * javascript 规则
   */
  {
    files: ['**/*.{js,mjs,cjs,vue}'],
    rules: {
      'no-console': 'off', // 是否允许使用 console.log()
    },
  },

  /**
   * 配置全局变量
   */
  {
    languageOptions: {
      globals: {
        ...autoImportConfig.globals,
        ...globals.browser,
        ...globals.node,

        /** 追加一些其他自定义全局规则 */
      },
    },
  },

  /**
   * Vue 规则
   */
  {
    files: ['**/*.vue'],
    languageOptions: {
      parser: pluginVue.parser, // 使用 vue-eslint-parser
      parserOptions: {
        /** typescript项目需要用到这个 */
        parser: tseslint.parser,
        ecmaVersion: 'latest',
        /** 允许在.vue 文件中使用 JSX */
        ecmaFeatures: {
          jsx: true,
        },
      },
    },
    rules: {
      // 在这里追加 vue 规则
      'vue/no-mutating-props': [
        'off',
        {
          shallowOnly: true,
        },
      ],
      'vue/html-indent': ['error', 2],
      'vue/multi-word-component-names': 'off',
      'vue/max-attributes-per-line': 'off',
    },
  },

  /**
   * typescript 规则
   */
  {
    files: ['**/*.{ts,tsx,vue}'],
    rules: {},
  },

  /**
   * prettier 配置
   * off与它冲突的ESlint规则
   * 并且启用自己的Recommended规则
   * 会合并根目录下的prettier.config.js 文件
   * @see https://prettier.io/docs/en/options
   */
  eslintPluginPrettierRecommended,
);
```