【element ui】vue中引入element-ui组件
官网地址:https://element.faas.ele.me/#/zh-CN/component/layout
虽然官网介绍的也很详细了,但是初次配置引入的时候我还是出现了bug的,这里写一下我的过程:
1、npm安装
npm i element-ui --save
(不论是全部加载还是按需加载,都先要安装组件。第一次配置的时候就是没有进行这一步,导致后面引入的时候一直出现模块不存在)
2、引入Element
(1)完整引入:
import Vue from 'vue'; import ElementUI from 'element-ui';// 全部组件引入 import 'element-ui/lib/theme-chalk/index.css';// 样式需要单独引入 Vue.use(ElementUI);
(2)按需引入:
借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。
首先,安装 babel-plugin-component:
npm install babel-plugin-component -D // -D等同于--save-dev 开发依赖
然后,修改 .babelrc文件为:
{ "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], "stage-2" ], "plugins": [ "transform-vue-jsx", "transform-runtime", [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ], "env": { "test": { "presets": ["env", "stage-2"] } } }
最后,按需加载:
import Vue from 'vue'; import { Button, Select } from 'element-ui';//按需加载模块 import App from './App.vue'; Vue.component(Button.name, Button); Vue.component(Select.name, Select); /* 或写为 * Vue.use(Button) * Vue.use(Select) */