vue+elementui 部分引入 + 自定义主题！！

1.版本   

"element-ui": "^2.15.2",
"vue": "^2.6.11"

（如需使用sass）——> 直接使用最新版本可能出现bug

"sass": "^1.26.5",
"sass-loader": "^8.0.2"

2. 尝试过很多次，一度奔溃，要不然就是只能全局引入并且修改主题色，要不然就是只能部分引入并且不能修改主题色， 我们的目标是： 既要部分引入（减少体积） 又要修改主题色（个性！）

心路历程：

1. 直接按照文档全局引入

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

2. 部分引入

首先

npm i babel-plugin-component -D 
or
yarn add babel-plugin-component -D 

新手小伙伴注意了，如果你原本是用的 npm就使用npm安装，不要用yarn 不然就会将你的项目里面需要的依赖都安装上，同理yarn

然后

在你的项目里面的 .babelrc 或者 babel.config.js里面写如下代码：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ]
  ]
}

这样 部分引入就搞定。

3. 修改主题

部分引入搞定了，但是主题呢，依旧是官网上的主题，要自己个性一下怎么办？

参照官网文档，有两个方法：

方法一： 安装一些包，或者用scss修改覆盖原本主题

npm i element-theme -g

...

但是我在使用过程中，安装包老是出问题，安装不上， 覆盖主题也没有生效...（不知道是不是操作不当，原因之一就是看到了有更简单修改主题方式，不想折腾了。就是接下来的方法二）

方法二： 官网的修改主题

直接在这里面修改配色，然后点击下载按钮，会得到一个压缩包，里面有theme文件夹，文件夹里有一个font文件夹和index.css

不过我貌似没看到哪里可以修改字体，所以这个font文件夹应该没什么用...

好了，得到了这个theme文件夹，可以按照官网的做法，将theme导入到项目根目录下（和 package.json同级），为了方便。

然后在main.js里面 import '../theme/index.css'

这里有个注意的地方， 这个import '../theme/index.css'一定要在 import App之前，不然始终无法加上样式，前面的 import 'element-ui/lib/theme-chalk/index.css' 也是这样，我在这里搞了好久，一度怀疑人生。

 

ok!可以了，导入index.css之后，你的主题色就生效了，不过还有个问题，这样导入的主题色只能在全部引入组件的时候使用，不然会报找不到某个组件css文件的错误，想想也是，你根本就没有分别导入每个组件的css，之前在使用官网的主题的时候，是借用了 babel-plugin-component 将每个组件要用的css样式指明了引入的路径：

{
   libraryName: 'element-ui',
   styleLibraryName: 'theme-chalk'
}

就是这个，其实babel-plugin-component的作用就是根据你传递的参数去找引用，从而实现部分引入组件。

但是你现在用 这个index.css 了 即便是参照官网改成这样

styleLibraryName: '~theme'

但是单个组件的css在哪儿呢？theme文件夹里面只有一个index.css 没有 button.css select.css...

怎么办？

突然看到了在最开始的时候，有这样一个引用

import 'element-ui/lib/theme-chalk/index.css'

这个东西好像和我们定制的主题的 theme文件夹下面的 index.css很像啊！

那就用theme的这个 index.css 替换掉node-modules文件夹里面的这个index.css ？

可行吗？ 可行！

最终方案于是有了

1.先替换掉

2.main.js 引入css

import Vue from 'vue'
import { Button } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
Vue.use(Button)
...

.3.babelrc / babel.config.js 改回

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ]
  ]
}

主题色已修改！部分引入！