vue-cli 初始化vue项目构建
vue init webpack project-name
electron 配置源码:
1. git clone https://github.com/electron/electron-quick-start**
2. 找到clone下来的项目入口文件main.js 和 package.json 修改路径配置**
main.js :
3. 在已建好vue-cli项目中,安装electron依赖:**
npm install electron --save-dev
npm install electron-packager --save-dev
4. 将修改后的main.js 拷到vue项目中的build文件夹下,并重命名为electron.js**
并将main.js 拷贝到vue项目的根目录下
并在vue项目根目录下新增preload.js 文件 (文件预处理、预加载的地方)
并更改 config/index.js 中的assetsPublicPath
**5. 在vue项目中的package.json 文件中新增 ****
**6. 此时 就可以在命令行执行 npm start 命令 可打开electron窗口调试及更改代码 ****
7. 打包 :**
首先打包vue项目,build出来生成dist文件
1) 复制build文件夹下的electron.js 文件到dist目录修改文件名为main.js ,后修改loadUrl路径的格式
2) 接着复制package.json 到dist目录中。
3) 将vue项目根目录中的package.json (注意不是dist下的)新增electron_build 命令
8. 最后,运行:**
npm run build
npm run electron_build
最后,我们基于 js 的前端桌面应用就已经打包完成了~