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

左手的ㄟ右手 2022-12-16 13:14 179阅读 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组件，可能下载半小时也下载不来。  
![在这里插入图片描述][20201021154349959.png_pic_center]

**解决方案：**

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

![在这里插入图片描述][20201021154550345.png_pic_center]  
几十秒搞定。

在该目录下，可通过执行命令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包缓慢，等待时间长  
![在这里插入图片描述][20201021164106927.png_pic_center]  
解决方法：  
直接在 淘宝的文件库 下载对应版本文件，下载完成后放在  
C:\\Users\\Administrator\\AppData\\Local\\electron\\Cache 这个目录下

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MjAxNDY_size_16_color_FFFFFF_t_70_pic_center]

参考

> https://zhuanlan.zhihu.com/p/75764907?from\_voters\_page=true

[20201021154349959.png_pic_center]: /images/20221123/d542d28f8c5a4ab3834f221d91f0f520.png
[20201021154550345.png_pic_center]: /images/20221123/723e05df844249319e888ea072d37a40.png
[20201021164106927.png_pic_center]: /images/20221123/e9f628088076421a8223e073361246c9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MjAxNDY_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/da03508e209c4470a3337814c17af240.png