002、Vue3 + Vite + TypeScript + Element-Plus，第一个后台管理项目走向第2步：整合一些配置

一、配置 alias 别名

先安装依赖，否则报错

pnpm install -D @types/node

vite.config.ts 增加 resolve 配置：

import { resolve } from "path";

import { UserConfig, ConfigEnv, loadEnv, defineConfig } from "vite";

export default ({ mode }: ConfigEnv): UserConfig => {

  const env = loadEnv(mode, process.cwd());

  return {

    resolve: {

      alias: {

        '@': resolve(__dirname, 'src'),

      },

    }

  }  

}

tsconfig.json 新增配置：
"compilerOptions": {
    ...
    "baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
    "paths": { // 路径映射，相对于baseUrl
        "@/*": ["src/*"] 
    }
}
 

路径别名使用 

// src/App.vue
import HelloWorld from './components/HelloWorld.vue'
                        ↓
import HelloWorld from '@/components/HelloWorld.vue'
 

 二、安装自动导入

为了避免在多个页面重复引入 API 或 组件，由此而产生的自动导入插件来节省重复代码和提高开发效率。Element Plus 官方文档中推荐 按需自动导入 的方式，而此需要使用额外的插件 unplugin-auto-import 和 unplugin-vue-components 来导入要使用的组件。所以在整合 Element Plus 之前先了解下自动导入的概念和作用，可以网上查阅

看看效果

插件名	未使用自动导入	使用自动导入
unplugin-auto-import
unplugin-vue-components

安装插件

pnpm install -D unplugin-auto-import unplugin-vue-components  

先建立个.eslintrc.cjs文件，空的

module.exports = {

}

vite.config.ts - 自动导入配置

新建 /src/types 目录用于存放自动导入函数和组件的TS类型声明文件

plugins: [

      AutoImport({

        // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等

        imports: ["vue"],

        eslintrc: {

          enabled: true, // 是否自动生成 eslint 规则，建议生成之后设置 false

          filepath: "./.eslintrc-auto-import.json", // 指定自动导入函数 eslint 规则的文件

        },

        dts: resolve(pathSrc, "types", "auto-imports.d.ts"), // 指定自动导入函数TS类型声明文件路径

      }),

      Components({

        dts: resolve(pathSrc, "types", "components.d.ts"), // 指定自动导入组件TS类型声明文件路径

      }),

    ]

.eslintrc.cjs - 自动导入函数 eslint 规则引入

module.exports = {

    "extends": [

        "./.eslintrc-auto-import.json"

    ],

}

 tsconfig.json - 自动导入TS类型声明文件引入，就是前面建的目录

{
  "include": ["src/types/**/*.d.ts"]
}
 

 运行产生效果

 三、整合Element Plus

安装 Element Plus

pnpm install element-plus -S

安装自动导入 Icon 依赖 

pnpm install -D unplugin-icons

unplugin-icons是由知名开发者Anton Fu创建的一个轻量级、高效的图标解决方案。它通过扫描你的源代码，自动引入并优化你使用的图标，避免手动管理图标库带来的繁琐步骤。只需简单的配置，你就可以享受到按需加载、自动添加前缀和大小调整等强大特性。 

vite.config.ts 配置 (加粗为加入代码)

// vite.config.ts
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver"; 

plugins: [

      AutoImport({

        // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等

        imports: ["vue"],

        eslintrc: {

          enabled: true, // 是否自动生成 eslint 规则，建议生成之后设置 false

          filepath: "./.eslintrc-auto-import.json", // 指定自动导入函数 eslint 规则的文件

        },

        resolvers: [

          // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)

          ElementPlusResolver(),

          // 自动导入图标组件

          IconsResolver({}),

        ],

        vueTemplate: true, // 是否在 vue 模板中自动导入

        dts: resolve(pathSrc, "types", "auto-imports.d.ts"), // 指定自动导入函数TS类型声明文件路径

       

      }),

      Components({

        resolvers: [

          // 自动导入 Element Plus 组件

          ElementPlusResolver(),

          // 自动注册图标组件

          IconsResolver({

            enabledCollections: ["ep"] // element-plus图标库

          }),

        ],

        dts: resolve(pathSrc, "types", "components.d.ts"), 

      }),

      Icons({

        // 自动安装图标库

        autoInstall: true,

      }),

    ]

示例代码 HelloWorld.vue最后面添加

<!-- src/components/HelloWorld.vue -->
<div>
  <el-button type="success"><i-ep-SuccessFilled />Success</el-button>
  <el-button type="info"><i-ep-InfoFilled />Info</el-button>
  <el-button type="warning"><i-ep-WarningFilled />Warning</el-button>
  <el-button type="danger"><i-ep-WarnTriangleFilled />Danger</el-button>
</div>

效果图

这里会出现一个错误/* unplugin-vue-components disabled */<script setup lang="ts">

需要在vite.config.ts加入，重新运行即可

 plugins: [

      vue(),

。。。。。

四、这篇就到此，后面继续整合