1、 安装 vue-cli:
npm install -g vue-cli
2、安装脚手架样板代码
vue init simulatedgreg/electron-vue 工程名
![4970496-da07d55ba8f9fba4.png](https://img-blog.csdnimg.cn/img_convert/bf39dd45a1913094f651c6e6a175c089.png)
脚手架安装
3、工程文件树展示:
- .electron-vue目录:打包构建的webpack配置
- build目录:主要放了应用icon图标、已经存放打包好的应用(如:exe、dmg)
- dist目录:electron目录、web目录
① web目录:编译好的vue工程代码
② electron目录:编译好的electron工程代码,应用web目录二次编译的。 - src目录下:main目录、renderer目录
① main目录:主要是electron的一些窗口配置、应用配置(如窗口默认大小、是否支持拉伸)。
②renderer目录:应用页面绘制代码,vue代码,vue页面工程。
![4970496-4aff4995f6088ef5.png](https://img-blog.csdnimg.cn/img_convert/549ae449f3a66132a208e126764d0a0f.png)
工程文件树
4、package.json文件
- npm run build:应用构建,Mac上执行只能编译构建dmg、Windows上执行只能构建exe
- npm run dev:开发debug模式(默认工程未配置热更新)
![4970496-0530e73cfb77acb8.png](https://img-blog.csdnimg.cn/img_convert/72ec9f130873f790b7961f2f293dca8a.png)
package文件
相关资料:
electron-vue:https://simulatedgreg.gitbooks.io/electron-vue/content/cn/
electron:https://electronjs.org/docs