搭建electron+vue-cli4项目与打包

1. 安装vue-cli4

安装node.js，查看版本

node -v

全局安装vue-cli最新版本

npm install -g @vue/cli

2.创建vue项目

vue create vue-electron-demo （vue-electron-demo是你要创建的项目名称）

3 . 创建vue项目过程，选常用模块以及配置

此时需要选择项目的一些配置，选定敲回车，出现的顺序以及基本选择如下：上下键，空格是选择，enter是确定）

? Please pick a preset: (Use arrow keys) default (babel, eslint)———————（默认安装，选择它后项目将是默认配置） > Manually select features——————（自定义安装，选它后，后续又会出现你需要选择的一些模块）

选择自定义安装之后：(这里选择了常用模块)

? Check the features needed for your project: (*) Babel——————（转码器，将ES6代码转为ES5代码，从而在现有环境执行。 ） ( ) TypeScript——————（是JS（后缀.js）的超集，后缀为.ts,包含并扩展了 JavaScript 的语法,现很少人用） ( ) Progressive Web App (PWA) Support————（渐进式Web应用程序） (*) Router——————（vue-router 即vue路由） (*) Vuex——————（vuex ,vue的状态管理模式） (*) CSS Pre-processors——————（ CSS 预处理器（如：less、sass）） (*) Linter / Formatter——————（代码风格检查和格式化（如：ESlint）） >( ) Unit Testing——————（单元测试） ( ) E2E Testing————————（/e2e（end to end） 测试）

选好后敲回车：

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)———————— n （是否采用history模式，这里对vue-router，vue-router 默认使用hash模式，可参考vue-router的官网， ）

4. 搭建好vue的项目后，自动安装electron

vue add electron-builder——————（安装electron）

electron镜像地址

https://npm.taobao.org/mirrors/electron/

配置选项，选择Electron的版本

? Choose Electron Version (Use arrow keys) ^4.0.0 ^5.0.0 > ^6.0.0——————（这里选择electron的6.0版本）

这时候下载electron组件，可能下载半小时也下载不来。

解决方案：

安装cnpm，使用淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装electron cnpm install electron -g

几十秒搞定。

在该目录下，可通过执行命令node install.js下载安装

5.运行项目

yarn electron:serve————————（运行项目）

npm: npm run electron:serve cnpm: cnpm run electron:serve yarn: yarn electron:serve

6.打包项目

npm: cnpm run electron:build cnpm: cnpm run electron:build yarn: yarn electron:build

问题发现： 在打包过程中，下载electron包缓慢，等待时间长 解决方法： 直接在 淘宝的文件库 下载对应版本文件，下载完成后放在 C:\Users\Administrator\AppData\Local\electron\Cache 这个目录下

参考

https://zhuanlan.zhihu.com/p/75764907?from_voters_page=true