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

electron-vue 专栏收录该内容
2 篇文章 0 订阅
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

  • 1
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值