今天我们来看引入大杯Element，其实引入很简单，跟着文档操作就完事了。所以这篇文章重点是看如何修改主题以及在修改主题中我遇到的问题。

废话少说，开整！

引入Element-plus

npm install element-plus --save

// main.ts

import { createApp } from 'vue';

import ElementPlus from 'element-plus'; // ++

import 'element-plus/lib/theme-chalk/index.css'; // ++

import App from './App.vue';


createApp(App).use(ElementPlus).mount('#app'); // edit

此时在项目中引入Element组件测试发现，已经可以正常使用了。

修改Element主题

在Element文档中有如何修改主题的教程，我们项目中主要的需求就是修改主题色，因此本文也以修改主题色为例子。

创建文件

首先我新增了两个文件，color.sass 和 element-theme.sass（这里假设你的项目已经引入了sass）。之所以创建两个文件，是因为 color.sass 除了给element主题提供颜色配置，还会引入为全局变量，方便在组件中使用。

配置主题

// color.sass

$--color-primary: red

// element-theme.sass

@improt "./color.sass" // 引入主题色文件


$--font-path: '~element-plus/lib/theme-chalk/fonts'

@import "~element-plus/packages/theme-chalk/src/index"

// main.ts

import { createApp } from 'vue';

import ElementPlus from 'element-plus';

import 'element-plus/lib/theme-chalk/index.css'; // --

import './styles/element-theme.sass'; // ++

import App from './App.vue';


createApp(App).use(ElementPlus).mount('#app');

如上按照element官网给的例子引入以后，在vite项目中会报错。

这是因为 ~ 这种路径写法是vue-cli中的约定，它使我们可以引用node_modules包内的资源，详见文档：URL转换规则

所以我们在这里需要把路径 ~element-plus 改成 node_modules/element-plus。也就是文件变成了这个样子：

@import "./color.sass"


$--font-path: 'node_modules/element-plus/lib/theme-chalk/fonts'

@import "node_modules/element-plus/packages/theme-chalk/src/index"

文章写到这里的时候遇到了一个尴尬的问题，在我们的生产项目搭建框架时，路径改成由 node_modules 引入后，主题色修改没有问题，可以生效。但是fonts文件加载请求报404，如下图1。但是文章用的实验项目，同样的方式修改后，一切正常，如图2。

经过反复测试后发现，是因为生产项目配置了多入口，启动项目时对应了不同的入口文件，导致引入fonts文件报错。具体原因有待研究，希望了解的兄弟不吝赐教

关于多入口文件配置以及解决element字体引入的问题，后边会有一篇文章单独介绍，这里就先不剧透了。

配置全局变量

前面单独创建了一个color.sass是为了将文件里的颜色变量引入到全局，方便在组件中使用。
为了简化使用，我们可以在文件中为常用颜色额外定义简短变量，但是要注意，不能修改element需要的变量！

$--color-primary: #ff0000


$primary: #ff0000

引入全局变量需要在vite.config.ts文件中配置css预处理器，并将引入的变量文件传给预处理器。配置方式如下

// vite.config.ts

...

export default defineConfig({

  ...

  css: {

    preprocessorOptions: {

      sass: {

        // \n 处理文件中多个引入报换行错误的问题

        additionalData: "@import './src/styles/color.sass'\n",

      },

    },

  },

});

引入后我们在组件内进行测试

// HelloWorld.vue

<style scoped lang="sass">

a

  color: $primary

</style>

可以看到页面上已经生效了

因为通过这种方式插入全局变量，会为所有的.sass文件都插入对应的文件引入，所以在前面我们定义的 element-theme.sass 文件中就可以不写 color.sass 文件的引入了。

// element-theme.sass


// @import "./color.sass" // edit


$--font-path: 'node_modules/element-plus/lib/theme-chalk/fonts'

@import "node_modules/element-plus/packages/theme-chalk/src/index"

修改默认语言

可能是为了立足中国，走向世界。使用组件时会发现大杯Element的默认语言变成了英文，我们需要自己引入并修改默认语言为中文。

// main.ts

import { createApp } from 'vue';

import ElementPlus from 'element-plus';

import './styles/element-theme.sass';

import locale from 'element-plus/lib/locale/lang/zh-cn'; // ++

import App from './App.vue';


createApp(App).use(ElementPlus, { locale }).mount('#app'); // edit

修改完成后，再去看看组件，是不是已经变成了中文。

引入大杯Element并修改主题的工作已经完成了，项目中我们就可以使用自定义主题色的Element组件。并且抛出了主题色全局变量，方便我们在组件中使用。

下次我们将一次性引入Vuex和Vue Router，这两项工作完成后，就已经完成了项目框架的雏形，可以开始开发了。不过后续我们仍然会有一些优化以及Vue3开发过程中相较于Vue2有较大变化的方法总结，整理不易，希望大家多多支持。