electron桌面应用开发（二）

一番码客 : 挖掘你关心的亮点。
http://efonfighting.imwork.net

前言

今天接着上一篇electron的文章往下写。操作仍然是在win10下的powershell下进行的。主要记录element-ui的安装与使用。

安装并使用element-ui

安装

在项目根目录，执行如下命令完成element-ui的安装。

npm i element-ui -S

安装完之后，我们看项目根目录下的package.json，里面有dependencies和devDependencies，分别是开发环境和调试环境的依赖库。这时我们看到dependencies里已经有了element-ui这一项。

目录结构

上图中我们能看到目前状态的目录结构，重点关注一下几个。

• package.json：应用的入口文件。其中的main字段表示的脚本是应用的启动脚本，缺省值是index.js。
• src/main：electron主进程。
• src/renderer：electron渲染进程，包含Vue的所有代码。

使用

安装完成之后，我们在src/render/main.js中引入element ui。

import Vue from 'vue'
import axios from 'axios'

import App from './App'
import router from './router'
import store from './store'

/* 添加如下三行，引入element-ui */
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
Vue.http = Vue.prototype.$http = axios
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  components: { App },
  router,
  store,
  template: '<App/>'
}).$mount('#app')

此后我们便可以在.vue文件中使用element ui元素了。

比如我们修改src\renderer\components\LandingPage.vue，添加一个button。

<el-button @click="message" type="success" icon="el-icon-search" round>一番码客</el-button>

npm run dev运行，效果如下。

一番今日

长假第一天，在家看阅兵仪式。感叹国家的凝聚力和军事实力，科技是强国之道，科技的发展也是需要人文的推动，人还是核心的核心。

很庆幸自己的工作多少还是带点科技的色彩，如果下功夫，也可以在科技的专研上更进一步。

科技加上军人的坚毅与雷厉风行，真是提气又靓丽，一种令人向往的神气！

一直以来，做科研是一件坐冷板凳的事，在一生平凡的工作、生活中，保持好奇、保持热情，便会是不平凡的一生。

参考

• electron-vue 集成 element-ui

• Electron-vue实战—搭建项目与安装Element UI
• 文档| Electron

一番雾语：我们坚毅的在前进的道路上前行，感恩路上的伴侣与风景，步伐始终坚毅。

免费知识星球： 一番码客-积累交流
微信公众号：一番码客
微信：Efon-fighting
网站： http://efonfighting.imwork.net