Vue3+ Vite + Element-Plus + TypeScript 从0到1搭建
一环境准备
二vite 项目初始化
按照 🍃Vite 官方文档 - 搭建第一个 Vite 项目 说明，执行以下命令完成 vue 、typescirpt 模板项目的初始化
npm init vite@latest vue3-element-admin --template vue-ts
-
vue3-element-admin: 自定义的项目名称 -
vue-ts：vue+typescript模板的标识，查看 create-vite 以获取每个模板的更多细节：vue，vue-ts，react，react-ts
初始化完成项目位于 D:\project\demo\vue3-element-admin , 使用 VSCode 导入，执行以下命令启动：
npm install
npm run dev
浏览器访问 localhost:5173 预览
三 src 路径别名配置
相对路径别名配置，使用 @ 代替 src
npm install @types/node --save-dev
import { fileURLToPath, URL } from "node:url" resolve: {alias: {"@": fileURLToPath(new URL("./src", import.meta.url))}},路径别名使用
// src/App.vue
import HelloWorld from '/src/components/HelloWorld.vue'↓
import HelloWorld from '@/components/HelloWorld.vue'
四unplugin 自动导入
Element Plus 官方文档中推荐
按需自动导入的方式，而此需要使用额外的插件unplugin-auto-import和unplugin-vue-components来导入要使用的组件。所以在整合Element Plus之前先了解下自动导入的概念和作用
安装插件依赖
npm install -D unplugin-auto-import unplugin-vue-components
vite.config.ts - 自动导入配置
import Components from "unplugin-vue-components/vite"; // 自动导入 Vue 组件
import AutoImport from "unplugin-auto-import/vite"; // 自动导入 Vue 相关 API// 自动导入组件（如 Element Plus 组件）Components({// 默认只针对src/components目录实现自动导入dirs: ["src/components", "src/layout"], // 后面布局组件也有相关的组件期望自动导入dts: "./components.d.ts",}),// 自动导入常用的 Vue API，比如 'ref' 和 'vue-router'AutoImport({imports: ["vue", "vue-router"], // 自动导入 Vue 和 Vue Router 的 APIdts: "./auto-imports.d.ts", // 生成的 TypeScript 声明文件路径 // 生成的全局变量放到此目录下eslintrc: {enabled: true, // 启用 ESLint 配置生成filepath: "./.eslintrc-auto-import.json" // 生成的 ESLint 配置文件路径}}),
自动导入效果
运行项目 npm run dev 自动生成文件
使用： 不用导入也可以
五、整合 Element Plus
5.1安装
npm install element-plus --save5.2按需导入（自动导入）
npm install -D unplugin-vue-components unplugin-auto-import
5.3vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({// ...plugins: [// ...AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})5.4 使用
5.5自动引入element-plus的样式 (不需要了！！)
在编写我们组件库的组件时，需要使用按需加载的方式引入element-plus组件，如：
<template><el-input />
</template>
<script setup lang="ts">
import { ElInput } from 'element-plus'
import 'element-plus/theme-chalk/src/base.scss'
import 'element-plus/theme-chalk/src/input.scss'
</script>
可以看到我们不仅要引入组件，还需要引入基础样式和组件样式，这个需要的element-plus组件变多的话，非常麻烦。
我们需要使用unplugin-element-plus帮助我们自动引入样式
安装unplugin-element-plus 到组件库的包下
pnpm i unplugin-element-plus -D
在vite配置文件里添加下面配置
// /packages/components/vite.config.ts
import ElementPlus from 'unplugin-element-plus/vite'
export default defineConfig(() => {return {plugins: [// ...ElementPlus({// 导入scss而不是cssuseSource: true}),]}
})
配置好后，编写组件时只用向下面这样就行
<template><el-input />
</template>
<script setup lang="ts">
import { ElInput } from 'element-plus'
</script>
六 使用element-plus 的图标
npm install @element-plus/icons-vue使用
<el-input:prefix-icon="Search"style="width: 240px"placeholder="Please input"/><script setup lang="ts">
import { Search } from "@element-plus/icons-vue";
</script>七整合 SVG 图标
安装
npm install vite-plugin-svg-icons --save
npm install fast-glob --save
在vite.config.js配置
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
import path from "path"; // svgIconcreateSvgIconsPlugin({// Specify the icon folder to be cachediconDirs: [path.resolve(process.cwd(), "src/assets/svg")],// Specify symbolId formatsymbolId: "icon-[dir]-[name]",}),定义一个svgicon组件
<template><svg aria-hidden="true" class="svg-icon"><use :xlink:href="symbolId" :fill="color" /></svg>
</template><script setup lang="ts">
import { computed } from "vue"
const props = defineProps({prefix: {type: String,default: "icon"},iconClass: {type: String,required: false,default: ""},color: {type: String,default: ""}
})const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`)
</script><style scoped>
.svg-icon {display: inline-block;width: 1em;height: 1em;overflow: hidden;vertical-align: -0.15em; /* 因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果 */outline: none;fill: currentcolor; /* 定义元素的颜色，currentColor是一个变量，这个变量的值就表示当前元素的color值，如果当前元素未设置color值，则从父元素继承 */
}
</style>
在main.js中
import "virtual:svg-icons-register"使用
<svg-icon icon-class="anchorsNavigation" />如果想要修改svg图片颜色，需要修改svg图片里面的fill属性改为currentColor，如下：
八整合 SCSS
安装
npm i -D sass
创建 themeVar.scss 变量文件，添加变量 $bg-color 定义，注意规范变量以 $ 开头
// src/styles/themeVar.scss
$bg-color:#242424;
Vite 配置导入 SCSS 全局变量文件
// vite.config.tscss: {preprocessorOptions: {scss: {// 按需导入自定义主题additionalData: `@use "@/styles/themeVar.scss" as *;`,},},},上面导入的 SCSS 全局变量在 TypeScript 不生效的，需要创建一个以 .module.scss 结尾的文件
// src/styles/variables.module.scss// 导出 themeVar.scss 文件的变量
:export{bgColor:$bg-color
}
TypeScript 使用 SCSS 全局变量
<!-- src/components/HelloWorld.vue -->
<script setup lang="ts">import variables from "@/styles/variables.module.scss";console.log(variables.bgColor)
</script><template><div style="width:100px;height:100px" :style="{ 'background-color': variables.bgColor }" />
</template>
九Element Plus 主题
/* 自定义 element-plus 主题 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with ($colors: ('white': #ffffff,'black': #000000,'primary': ('base': #2394FF,),'success': ('base': #3abb5f,),'warning': ('base': #f59a23,),'danger': ('base': #f56c6c,),'error': ('base': #ec4c40,),'info': ('base': #909399,),),$table: ('header-bg-color': #F2F3F5,'header-text-color': #1D2129,'text-color': #303133,'row-hover-bg-color': #fff,)
);/** 全局SCSS变量 */:root {--menu-background: linear-gradient(180deg, #1f2935 0%, #425365 100%);--menu-text: #fff;--menu-active-text: #fff;--menu-hover: #161d26;// 修复表格 fixed 列被选中后由于透明色导致叠字的 bug.el-table {--el-table-current-row-bg-color: rgb(235 243 250);};
}$menu-background: var(--menu-background); // 菜单背景色
$menu-text: var(--menu-text); // 菜单文字颜色
$menu-active-text: var(--menu-active-text); // 菜单激活文字颜色
$menu-hover: var(--menu-hover); // 菜单悬停背景色$sidebar-width: 256px; // 侧边栏宽度
$sidebar-width-collapsed: 64px; // 侧边栏收缩宽度
$navbar-height: 64px; // 导航栏高度
2.在vite.config.js配置中导入scss文件类型
plugins: [vue(),viteMockServe({mockPath: "mock",localEnabled: true,}),// element-plus配置AutoImport({resolvers: [ElementPlusResolver()],}),Components({// 1.在element-plus配置中导入sass文件类型resolvers: [ElementPlusResolver({ importStyle: "sass" })],}),]查看：
primary type类型成功从蓝色替换成黄色了
十vue3+ts+vite解决低版本火狐报错空白屏
下载依赖
npm install @vitejs/plugin-legacy2、在vite.config.ts中引入
import legacy from '@vitejs/plugin-legacy'plugins: [ // 提供对旧版浏览器的支持，将现代 JavaScript 编译为旧版浏览器兼容的代码legacy({targets: ["defaults", "not IE 11"], // 目标是现代浏览器，排除 IE 11}),
]十一Vite：性能优化-gzip压缩
https://juejin.cn/post/7473152293983453203
plugins: [
// 为生产环境的构建启用 gzip 压缩，减小文件体积viteCompression({threshold: 100000, // 文件大于 100Kb 开启压缩algorithm: "gzip", // 使用 gzip 算法进行压缩ext: ".gz" // 压缩后的文件扩展名}),
]