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