Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型 ## **安装 element-ui** 1. 进入项目根目录 2. npm i element-ui -S ## **在渲染进程中引入 element-ui** 在/project-name/src/renderer/main.js中引入 element ui ``` import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` ## **使用 element-ui** 此时就可以在任意 .vue 文件中添加和使用 element-ui 元素了。 在/project-name/src/renderer/components/LandingPage.vue中开始体验element-ui ~~~ <el-button @click="message" type="success" icon="el-icon-search" round>默认按钮</el-button> ~~~ ## **运行效果如下:** ![](https://img.kancloud.cn/87/5b/875b2dd93d63a3389ee3c71cbe49ea74_800x455.png) ## **可能遇到的问题:** el-table这个组件显示不正常 ## **解决方案:** 需要将element-ui加入到白名单里面,修改/project-name/.electron-vue/webpack.renderer.config.js 将: ~~~ let whiteListedModules = ['vue'] ~~~ 修改为: ~~~ let whiteListedModules = ['vue', 'element-ui'] ~~~ 然后表格控件就正常显示了!