vue学习笔记--Element引入

完整引入：
首先要在入口文件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);