完整引入：
首先要在入口文件main中：
//引入vue
import Vue from 'vue';
//引入 ElementUI
import ElementUI from 'element-ui';
//完整引入时，css 样式需要单独引入
import 'element-ui/lib/theme-chalk/index.css';
//引入APP
import App from './App.vue';
Vue.use(ElementUI);
//注册组件
new Vue({
el: '#app',
render: h => h(App)
});
按需引入：
首先，安装 babel-plugin-component
npm install babel-plugin-component -D
修改配置文件 .babelrc
{
"presets": [
["env", { "modules": false }],
"stage-3"
]
}
修改为
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
然后在main.js文件中按需引入，与完整引入不同，引入的element-ui是Button, Select组件，这种方法不需要单独引入css文件
//引入Button, Select组件
import { Button, Select } from 'element-ui';
//使用Button, Select
- Vue.use(Button)
- Vue.use(Select)
如果 使用部分引入，且手动引入了 css文件，可以修改webpack.config.js 文件中
配置loader项
{
test: /.(eot|svg|ttf|woff|woff2)(?\S*)?$/,
loader: 'file-loader'
}
配置全局对象
size 字段：规定组件的大小
zIndex 字段：规定弹出框的初始值，默认2000
完整引入时：
Vue.use(Element, { size: 'small', zIndex: 3000 });
部分引入时：
Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
Vue.use(Button);
