接上文已经创建的vue2工程。

1. 安装elementUI

cnpm i element-ui -S

2. 完全引入

在main.js完整引入:

//导入ElementUI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

//使用ElementUI
Vue.use(ElementUI);

之后在项目组件中可以直接使用elementUI的标签进行开发

3. 按需引入

按需引入可以根据需要只引入部分组件,减少文件体积。按需引入需安装插件:

cnpm install babel-plugin-component -D

新增配置文件.babelrc,内容:

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

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

import Vue from 'vue'
import App from './App.vue'


import { Button, Select } from 'element-ui';

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

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐