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']
~~~
然后表格控件就正常显示了!
- 快速安装electron-vue
- 集成element-ui
- 实例:封装api请求接口、数据签名、数据存储
- 实例:用户登录,本地存储用户信息
- 实例:获取用户列表,分页查询
- 实例:用户增加,表单校验,防重复提交
- 实例:用户编辑
- 实例:用户删除
- 实例:集成echarts,完成图表统计
- 实例:监听网络变化,弹出断网通知(解决win10通知沒法出來的问题)
- 实例:自定义应用程序菜单、系统右键菜单
- 实例:自定义系统托盘,托盘右键菜单,图标闪烁
- 实例:自定义关闭按钮,点击右上角关闭按钮隐藏到托盘
- 实例:开机自启动
- 实例:实现单实例,确保只有一个应用程序
- 实例:集成socket.io主动给客户端发送消息
- thinkphp整合phpsocketio
- 集成vue-socket.io
- 实例:打包软件,自定义软件名称、软件版本
- 实例:NSIS安装包定制及美化
- 实例:版本升级,自动下载更新