03. Vue3集成Element-Plus

837 字约 2 分钟读完9898 次阅读

Elemen-Plus 简介

Element-Plus 是一套前端 UI 框架，非常适合前端基础比较差的同学，可以通过它快速实现精美的页面样式

官网：https://element-plus.org

国内镜像网站（访问速度快）：https://cn.element-plus.org/

Vue3 集成 Element-Plus

安装依赖

npm i element-plus -S

在 main.js 里面引入

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

app.use(ElementPlus, {
  locale: zhCn,
})

全局使用 icon

安装依赖

npm install @element-plus/icons-vue

注册所有图标

在 main.js 里引入

// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

当你在按钮或者输入框组件里面使用图标，你需要单独导入图标

Element-Plus 主题色设置

安装依赖

npm i sass@1.71.1 -D
npm i unplugin-auto-import -D
npm i unplugin-element-plus -D
npm i unplugin-vue-components -D

配置 index.scss

@forward "element-plus/theme-chalk/src/common/var.scss" with ($colors: (
  "primary": ("base": #0742b1),
  "success": ("base": #2b8f01),
  "warning": ("base": #ffad00),
  "danger": ("base": #e52f2f),
  "info": ("base": #5e41b8),
));

配置 vite.config.js

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'

plugins: [
  vue(),
  // 按需定制主题配置
  ElementPlus({
    useSource: true,
  }),
  AutoImport({
    resolvers: [ElementPlusResolver({ importStyle: 'sass' })],
  }),
  Components({
    resolvers: [ElementPlusResolver({ importStyle: 'sass' })],
  }),
],  

css: {
  preprocessorOptions: {
    scss: {
      // 自动导入定制化样式文件进行样式覆盖
      additionalData: `
        @use "@/assets/index.scss" as *;
      `,
    }
  }
},

注意文件名不要空格

启动报错处理

如果遇到这样的错误：

只能修改 node_moudules 包里面的文件内容
文件路径：vue\node_modules\element-plus\theme-chalk\src\mixins_var.scss

重启后就正常了