Vue - 12.element-ui 第三方组件使用

安装和引入

执行 npm install element-ui 安装

完整引入

不推荐使用，大量不会用到的组件也会被打包到项目中，会让整个项目体积变大

//main.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

按需导入

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

//安装
npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

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

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.use(Button)
Vue.use(Select)


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

全局配置

在引入 Element 时，可以传入一个全局配置对象。该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸，zIndex 设置弹框的初始 z-index（默认值：2000）。按照引入 Element 的方式，具体操作如下：

完整引入 Element：

import Vue from 'vue';
import Element from 'element-ui';
Vue.use(Element, { size: 'small', zIndex: 3000 });

按需引入 Element：

import Vue from 'vue';
import { Button } from 'element-ui';

Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
Vue.use(Button);

按照以上设置，项目中所有拥有 size 属性的组件的默认尺寸均为 'small'，弹框的初始 z-index 为 3000。

Vue Cli3 安装 element-ui

在vue-cli中可是使用 vue add element 安装，安装前注意提交当前工作内容，脚手架会覆盖若干文件

下载完成后会提示，选择下方按需导入

? How do you want to import Element? (Use arrow keys)
  Fully import
> Import on demand

安装完成后 main.js 内会被引入

import './plugins/element.js'

目录下多了一个 plugins/element.js ,需要单独引入新的组件在这个添加

import Vue from 'vue'
import { Button, Table } from 'element-ui'

Vue.use(Button)
Vue.use(Table)

element-ui的样式文件，在中 babel.config.js 被引入

module.exports = {
  "presets": [
    "@vue/cli-plugin-babel/preset"
  ],
  "plugins": [ //插件
    [
      "component", //组件
      {
        "libraryName": "element-ui", //库名称
        "styleLibraryName": "theme-chalk" //样式库名称
      }
    ]
  ]
}

如果是项目中途引入的 element-ui 一定要撤销一下脚手架对 App.vue 的修改，否则会报错

被引入后，可以在标签名字前加 el- ，或者复制代码模板修改模板内容，将模板内的方法添加到组件内，来使用 element 组件