vue3 项目引入element plus 组件库 以及修改主题颜色

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
''AI助手
运行
运行

修改vite.config.ts文件内容

修改后页面就能直接使用了

4. 完整导入  改变 element plus 主题颜色

4.1 首先下载sass依赖

npm install -D sass
''AI助手
运行
运行

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 *;
''AI助手
运行
运行

# main.ts 导入Tips

需要注意自己重写的这个index.sass 必须放在element-plus前面 

element-plus 自己的样式文件不需要导入

# 页面展示

5.  按需引入-自动导入 改变 element plus 主题颜色

5.1 下载依赖

npm i unplugin-element-plus -D
''AI助手
运行
运行

5.2 创建一个index.sass 在vite.config.ts里面导入 具体看下一步

/* 只需要重写你需要的即可 */
@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    "primary": (
      "base": #41d36e,
    ),
    "success": (
      "base": #f14d0b,
    ),
  )
);
''AI助手
运行
运行

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,
    }),
  ],
});
''AI助手
运行
运行