Vue2 - 引入Element-UI组件样式

第一步 安装Element-UI组件库

官方文档 https://element.eleme.cn/#/zh-CN/component/installation

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

在终端cd到项目文件夹下安装

npm i element-ui -S

也可以通过CDN（不推荐）
目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

完整引入（不推荐）

https://element.eleme.cn/#/zh-CN/component/quickstart

在 main.js 中写入以下内容：

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);

new Vue({
  el: '#app',
  render: h => h(App)
});

以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。

缺点：会导致项目比较大（几M）

第二步 按需引入（推荐）

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，在终端cd到项目文件夹下安装 babel-plugin-component：

npm install babel-plugin-component -D

在项目下 babel.config.js 文件追加如下配置（使用于当前新版本Vue的配置）

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

接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

import Vue from 'vue';
import { Button, Select ，Row} from 'element-ui';//按需要引入组件
import App from './App.vue';

//应用组件
Vue.component(Button.name, Button);
Vue.component(Row.name, Row);
//Vue.component('自定义的名字', Select);
Vue.component('myButton', Button);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

应用组件时调用的Vue.component(Button.name, Button);中的Button.name是element-ui中Button组件的名字“el-button”，即此为意吧组件的调用名字匹配为el-button，即Vue.component('el-button', Button)。

由此我们也可以自定义组件名字Vue.component('myButton', Button); 然后通过myButton标签去调用。

main.js 如上配置完成后，重启服务。

第三步 使用UI组件

在App.vue中使用为例

可能会遇到的问题

问题一：找不到模块（即环境问题）

如：Error: Cannot find module 'babel-preset-es2015'

原因：环境未安装该模块

解决方法：根据找不到的模块名称，直接在终端安装即可。如：

npm i babel-preset-es2015 

⚠️注意此处的安装的模块是根据我的错误而定，模块名字根据报错而定，请勿直接复制粘贴。

问题二：配置报错

Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/wangjiabao/workspace/myProjects/project_Vue/study/28vUe-ui/node_modules/babel-preset-es2015/lib/index.js

原因：

项目下的 babel.config.js 文件， 按官方文档中 .babelrc 配置方法 去配置。官方文档中 .babelrc 配置方法适用旧版本的Vue，目前新版本的Vue没有.babelrc文件，取而代之的是babel.config.js 。若用 .babelrc 配置方法 去配置 babel.config.js 。会报配置错误。

解决方法：按新版的babel.config.js 配置方法（请参考上方的 第二步 按需引入（推荐））。更新配置后，重启服务。