如何正确引入Element Ui
element ui的网站快速成型工具，Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，他大大的提高了我们的开发效率，所以很多人都在使用element ui来完成类似后台管理系统的项目。今天，我来说一说它的两种引入方式。
操作流程
npm i element-ui -S 安装Element Ui
完整版引入
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app', render: h => h(App)
});
以上为完整版引入Element UI的所有组件
按需引入
借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
首先，安装 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.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为 * Vue.use(Button) * Vue.use(Select) */
new Vue({
el: '#app',
render: h => h(App)
});
又或者
在src路径下创建plugins文件夹，再创建一个js填入
import Vue from "vue";
// 在下面的大括号中按需导入所需 Element-UI 中的组件即可
import { Button, Form, FormItem, Input, Message, Radio } from "element-ui";
// 注意：导入的组件都需要使用 Vue.use() 进行注册
Vue.use(Button);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Input);
Vue.use(Radio);
// 还可以在此文件中将 Element-UI 中的组件注册为 Vue 的全局方法，如下
// 为 Vue 挂载一个全局的弹窗提示方法，在组件中使用 this.$message 即可调用
Vue.prototype.$message = Message;
然后再main.js引入
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import iView from "iview";
import "iview/dist/styles/iview.css";
import "./plugins/element.js";
Vue.config.productionTip = false;
Vue.use(ElementUI);
// Vue.use(iView);
new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");
这样也可以实现elemnet ui 的按需加载！
