Element 开发环境配置

1. 背景

Element是基于Vue 2.0的桌面端组件库，目前非常流行。可以说是国内目前最主流的Vue桌面组件库，具备非常完善的组件和高度灵活的特性，相当值得学习使用。

本篇来说下Element开发环境的配置。

2. 安装

使用npm安装即可，命令为npm i element-ui -S。

3. 引入

安装完成后，需要在Vue项目中引入，建议直接完整引入ElementUI的全部功能。

修改main.js文件如下：

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({

 router,

 store,

 render: h => h(App)

}).$mount('#app')

也就是说，添加如下4行代码即可

import Vue from 'vue';

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

如果是对加载速度有较高要求，也可以按需引入，此处可以参考Element官网。

4. 小结

Element Vue需要在Vue工程环境下开发，具体Vue工程构建方式可以参考我的博客：Vue工程项目环境安装、项目构建运行、打包部署详解。