安装vue-cli,再通过vue-cli创建vue项目
npm install -g @vue/cli
vue create integrate-vue
- 执行命令后会提示进行配置,根据自己的需求选择就好了.(我使用的是Default+NPM)
创建完成后进入项目,运行测试
cd integrate-vue
npm run serve
- 进入回显的链接,看到Vue Welcome Page进入下一步
安装electron依赖
npm i -D electron
- 注意这边npm后面接的是i(install的缩写),而不是-i选项
安装electron-builder
vue add electron-builder
它会自动帮我们配置好繁琐的package.json,vue.config.js,main.js(background.js).
运行调试
npm run electron:serve
- 查看package.json可以看到这条命令的完整形式
"electron:serve": "vue-cli-service electron:serve",
-
它做了两件事,一是启动vue服务,再者是启动了electron
- vue会在后台运行,等待electron发给它请求,然后进行响应(页面的变更)
- 比较有趣的一点是vue支持了live reloading(热重载).我们可以修改App.vue,之后查看效果.
打包发布
npm run electron:build
