1. 下载依赖
npm install element-plus --save
2. 完整导入
如果你对打包后的文件大小不是很在乎,那么使用完整导入会更方便
main.ts
页面使用
3. 按需引入-自动导入
# 首先你需要安装 unplugin-vue-components 和 unplugin-auto-import这两款插件
npm install -D unplugin-vue-components unplugin-auto-import
修改vite.config.ts文件内容
修改后页面就能直接使用了
4. 完整导入 改变 element plus 主题颜色
4.1 首先下载sass依赖
npm install -D sass
4.2 创建一个index.sass文件 在main.ts导入
# index.sass 内容
/* 只需要重写你需要的即可 */
@forward "element-plus/theme-chalk/src/common/var.scss" with (
$colors: (
"primary": (
"base": #41d36e,
),
"success": (
"base": #f14d0b,
),
)
);
@use "element-plus/theme-chalk/src/index.scss" as *;
# main.ts 导入Tips
需要注意自己重写的这个index.sass 必须放在element-plus前面
element-plus 自己的样式文件不需要导入
# 页面展示
5. 按需引入-自动导入 改变 element plus 主题颜色
5.1 下载依赖
npm i unplugin-element-plus -D
5.2 创建一个index.sass 在vite.config.ts里面导入 具体看下一步
/* 只需要重写你需要的即可 */
@forward "element-plus/theme-chalk/src/common/var.scss" with (
$colors: (
"primary": (
"base": #41d36e,
),
"success": (
"base": #f14d0b,
),
)
);
5.3 修改vite.config.ts 直接复制就行
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
// 饿了么ui 按需导入
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
// 颜色主题修改
import ElementPlus from "unplugin-element-plus/vite";
// https://vitejs.dev/config/
export default defineConfig({
resolve: {
extensions: [".vue", ".ts"],
alias: {
"@": path.resolve(__dirname, "src"),
},
},
// 导入创建的scss
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "@/assets/style/element/index.scss" as *;`,
},
},
},
plugins: [
vue(),
AutoImport({
include: [
/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
/\.vue$/,
/\.vue\?vue/, // .vue
],
eslintrc: {
enabled: true,
},
imports: ["vue", "vue-router"],
resolvers: [ElementPlusResolver({ importStyle: "sass" })], //importStyle配置样式引入方式,自动引入修改主题色设置此属性
}),
Components({
resolvers: [ElementPlusResolver({ importStyle: "sass" })], //importStyle配置样式引入方式,自动引入修改主题色设置此属性
}),
ElementPlus({
useSource: true,
}),
],
});