build(deps): 添加多种插件：element-plus、iconify、windicss

build/alias/index.ts

@@ -0,0 +1,5 @@
+import path from 'path';
+
+export default {
+  '@': path.resolve(__dirname, '/src')
+};

build/env/index.ts

@@ -0,0 +1,5 @@
+import dotenv from 'dotenv';
+
+const { parsed: viteEnv } = dotenv.config(); // 加载环境
+
+export default viteEnv;

build/index.ts

@@ -0,0 +1,10 @@
+import alias from './alias';
+import viteEnv from './env';
+import plugins from './plugins';
+
+
+export {
+	alias,
+	viteEnv,
+	plugins
+}

build/plugins/html.ts

@@ -0,0 +1,12 @@
+import { minifyHtml, injectHtml } from 'vite-plugin-html'; // html插件(使用变量、压缩)
+import viteEnv from '../env';
+
+export default [
+  minifyHtml(),
+  injectHtml({
+    injectData: {
+      title: viteEnv.VITE_APP_TITLE,
+      appName: viteEnv.VITE_APP_TITLE_Label
+    }
+  })
+];

build/plugins/iconify.ts

@@ -0,0 +1,16 @@
+import ViteIcons, { ViteIconsResolver } from 'vite-plugin-icons'; // iconify图标
+import Components from 'vite-plugin-components'; // 从指定目录自动导入组件
+
+export default [
+  Components({
+    customComponentResolvers: ViteIconsResolver({ componentPrefix: 'icon' }) // 组件名前缀
+  }),
+  ViteIcons()
+];
+
+/**
+ * iconify用法(安装对应的vscode智能提示的插件: Iconify IntelliSense)
+ * 找图标：网址 https://icones.js.org/ 或者 vscode安装 icones插件
+ * 确定图标名字：找到图标后复制名字 如：mdi:ab-testing 组件为: <icon-mdi-ab-testing />
+ * 样式：同html标签一样直接应用style属性或者class属性; 通过设置color和font-size属性设置对应的颜色和大小
+ */

build/plugins/index.ts

@@ -0,0 +1,8 @@
+import WindiCSS from 'vite-plugin-windicss';
+import html from './html';
+import iconify from './iconify';
+import styleImport from './style-import';
+
+const plugins = [...html, ...iconify, ...styleImport, WindiCSS()];
+
+export default plugins;

build/plugins/style-import.ts

@@ -0,0 +1,20 @@
+import styleImport from 'vite-plugin-style-import'; // 按需加载UI框架的组件样式
+
+export default [
+  styleImport({
+    libs: [
+      {
+        libraryName: 'element-plus',
+        esModule: true,
+        ensureStyleFile: true,
+        resolveStyle: name => {
+          name = name.slice(3);
+          return `element-plus/packages/theme-chalk/src/${name}.scss`;
+        },
+        resolveComponent: name => {
+          return `element-plus/lib/${name}`;
+        }
+      }
+    ]
+  })
+];