本文将带领大家使用vue-cli + electron-builder构建一个Hello World
Electron是一个基于Chromium和 Node.js，可以使用 HTML、CSS和JavaScript构建跨平台应用的技术框架，兼容 Mac、Windows 和 Linux。
在开始搭建项目之前，需要安装以下工具
node.js
1 创建项目
1.1 安装vue-cli
先查看是否已经安装了vue-cli，vue-cli的版本是什么
vue -V
如果版本叫老，可以直接卸载，再安装最新版本
卸载
npm uninstall vue-cli -g
安装
install @vue/cli -g
1.2 使用vue-cli创建项目
选取一个项目存放的路径，然后开始创建项目例如：
vue create electron-vue-helloworld
这里将项目名定为：electron-vue-helloworld输入完上述命令之后进入vue项目的创建过程。出现以下内容
Vue CLI v3.8.4? Please pick a preset: (Use arrow keys)  default (babel, eslint) > Manually select features 
第一个选项是 “default” 默认，只包含babel和eslint第二个选项是 “Manually select features”自定义安装
选择自定义安装，进入下一步选择
? Check the features needed for your project: (Press  to select,  to toggle all,  to invert selection)❯◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◉ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing
这里我们选择
babel(高级的语法转换为 低级的语法)
Router(路由)
Vuex(状态管理器)
CSS Pre-processors(css预处理器)
Linter / Formatter(代码风格、格式校验)
然后进入下一步
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)  n
这一步是设置router是否使用history模式，这里我们选n，接着进入下一步
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)  Sass/SCSS (with dart-sass)   Sass/SCSS (with node-sass)   Less ❯ Stylus 
这里是设置css预处理模块，在这里我要强调一下，不需要乱选，选择我们熟悉的一种，在这里我们选择 Stylus ，然后进入下一步
? Pick a linter / formatter config: (Use arrow keys)  ESLint with error prevention only   ESLint + Airbnb config ❯ ESLint + Standard config   ESLint + Prettier 
这一步是选择ESLint代码检查工具的配置，这里我们选择标准配置“ESLint + Standard config”，然后进入下一步
? Pick additional lint features: (Press  to select,  to toggle all,  to invert selection)❯◉ Lint on save ◯ Lint and fix on commit
这一步是选择什么时候执行ESLint检查，这里我们选择保存时检查“Lint on save”,然后进入下一步
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?   In dedicated config files ❯ In package.json 
这一步是询问 babel, postcss, eslint这些配置是单独的配置文件还是放在package.json 文件中，这里我们选择“In package.json”，然后进入下一步
? Save this as a preset for future projects? (y/N) N
这一步是询问时候以后创建项目是否也采用同样的配置，这里我们选N。到目前为止，vue项目是创建完成了，我们等待项目下载依赖包，等项目构建完毕我们开始集成electron
1.3 使用electron-builder集成electron
进入项目根目录(electron-vue-helloworld)，然后执行下列命令：
vue add electron-builder
这个时候会安装electron-builder的依赖，可能比较耗费时间，请大家耐心等待，安装完成后会出现以下选型：
? Choose Electron Version (Use arrow keys)  ^4.0.0   ^5.0.0 ❯ ^6.0.0
这一步是选择Electron的版本，我们这里选择最新版本6.0.0，等待安装完成即可。安装完成后会在src目录下生成background.js，并在package.json 文件中修main为"main": "background.js"
至此，所有的安装都已经完成了，接下来我们就可以运行程序看效果了。
1.4 运行程序
执行以下命令，运行程序
npm run electron:serve
在启动的时候，会启动很久，并出现以下信息
INFO  Launching Electron...Failed to fetch extension, trying 4 more timesFailed to fetch extension, trying 3 more timesFailed to fetch extension, trying 2 more timesFailed to fetch extension, trying 1 more times
这是在安装vuejs devtools，由于网络问题，一直安装不上。重试5次之后就会自动跳过并且启动程序。
编译成功后，会自动弹出一个桌面程序，如下图所示
下一期我们将详细的讲一下background.js，里边的一些参数都是干什么用的。

 本文将带领大家使用vue-cli + electron-builder构建一个Hello World
Electron是一个基于Chromium和 Node.js，可以使用 HTML、CSS和JavaScript构建跨平台应用的技术框架，兼容 Mac、Windows 和 Linux。
在开始搭建项目之前，需要安装以下工具
node.js
1 创建项目
1.1 安装vue-cli
先查看是否已经安装了vue-cli，vue-cli的版本是什么
vue -V
如果版本叫老，可以直接卸载，再安装最新版本  
卸载
npm uninstall vue-cli -g
安装
install @vue/cli -g
1.2 使用vue-cli创建项目
选取一个项目存放的路径，然后开始创建项目 例如：
vue create electron-vue-helloworld
这里将项目名定为：electron-vue-helloworld
 输入完上述命令之后进入vue项目的创建过程。出现以下内容
Vue CLI v3.8.4
? Please pick a preset: (Use arrow keys)
  default (babel, eslint) 
> Manually select features
第一个选项是 “default” 默认，只包含babel和eslint
 第二个选项是 “Manually select features”自定义安装  
选择自定义安装，进入下一步选择
? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection)
❯◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing
这里我们选择 1. babel（高级的语法转换为 低级的语法）
 2. Router（路由）
 3. Vuex（状态管理器）
 4. CSS Pre-processors（css预处理器）
 5. Linter / Formatter（代码风格、格式校验）
然后进入下一步
? Use history mode for router? (Requires proper server setup for index fallback 
in production) (Y/n)  n
这一步是设置router是否使用history模式，这里我们选n，接着进入下一步
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
by default): (Use arrow keys)
  Sass/SCSS (with dart-sass) 
  Sass/SCSS (with node-sass) 
  Less 
❯ Stylus
这里是设置css预处理模块，在这里我要强调一下，不需要乱选，选择我们熟悉的一种，在这里我们选择 Stylus ，然后进入下一步
? Pick a linter / formatter config: (Use arrow keys)
  ESLint with error prevention only 
  ESLint + Airbnb config 
❯ ESLint + Standard config 
  ESLint + Prettier
这一步是选择ESLint代码检查工具的配置，这里我们选择标准配置“ESLint + Standard config”，然后进入下一步
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit
这一步是选择什么时候执行ESLint检查，这里我们选择保存时检查“Lint on save”,然后进入下一步
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? 
  In dedicated config files 
❯ In package.json
这一步是询问 babel, postcss, eslint这些配置是单独的配置文件还是放在package.json 文件中，这里我们选择“In package.json”，然后进入下一步
? Save this as a preset for future projects? (y/N) N
这一步是询问时候以后创建项目是否也采用同样的配置，这里我们选N。到目前为止，vue项目是创建完成了，我们等待项目下载依赖包，等项目构建完毕我们开始集成electron
1.3 使用electron-builder集成electron
进入项目根目录（electron-vue-helloworld），然后执行下列命令：
vue add electron-builder
这个时候会安装electron-builder的依赖，可能比较耗费时间，请大家耐心等待，安装完成后会出现以下选型：
? Choose Electron Version (Use arrow keys)
  ^4.0.0 
  ^5.0.0 
❯ ^6.0.0
这一步是选择Electron的版本，我们这里选择最新版本6.0.0，等待安装完成即可。安装完成后会在src目录下生成background.js，并在package.json 文件中修main为"main": "background.js"
至此，所有的安装都已经完成了，接下来我们就可以运行程序看效果了。
1.4 运行程序
执行以下命令，运行程序
npm run electron:serve
在启动的时候，会启动很久，并出现以下信息
INFO  Launching Electron...
Failed to fetch extension, trying 4 more times
Failed to fetch extension, trying 3 more times
Failed to fetch extension, trying 2 more times
Failed to fetch extension, trying 1 more times
这是在安装vuejs devtools，由于网络问题，一直安装不上。重试5次之后就会自动跳过并且启动程序。
编译成功后，会自动弹出一个桌面程序，如下图所示
下一期我们将详细的讲一下background.js，里边的一些参数都是干什么用的。

本文将带领大家使用vue-cli + electron-builder构建一个Hello World

Electron是一个基于Chromium和 Node.js，可以使用 HTML、CSS和JavaScript构建跨平台应用的技术框架，兼容 Mac、Windows 和 Linux。
在开始搭建项目之前，需要安装以下工具


node.js


1 创建项目
1.1 安装vue-cli
先查看是否已经安装了vue-cli，vue-cli的版本是什么
vue -V

如果版本叫老，可以直接卸载，再安装最新版本
卸载
npm uninstall vue-cli -g

安装
install @vue/cli -g

1.2 使用vue-cli创建项目
选取一个项目存放的路径，然后开始创建项目

例如：
vue create electron-vue-helloworld

这里将项目名定为：electron-vue-helloworld

输入完上述命令之后进入vue项目的创建过程。出现以下内容
Vue CLI v3.8.4
? Please pick a preset: (Use arrow keys)
  default (babel, eslint) 
> Manually select features 

第一个选项是 “default” 默认，只包含babel和eslint

第二个选项是 “Manually select features”自定义安装
选择自定义安装，进入下一步选择
? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection)
❯◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

这里我们选择

babel（高级的语法转换为 低级的语法）
Router（路由）
Vuex（状态管理器）
CSS Pre-processors（css预处理器）
Linter / Formatter（代码风格、格式校验）

然后进入下一步
? Use history mode for router? (Requires proper server setup for index fallback 
in production) (Y/n)  n

这一步是设置router是否使用history模式，这里我们选n，接着进入下一步
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
by default): (Use arrow keys)
  Sass/SCSS (with dart-sass) 
  Sass/SCSS (with node-sass) 
  Less 
❯ Stylus 

这里是设置css预处理模块，在这里我要强调一下，不需要乱选，选择我们熟悉的一种，在这里我们选择 Stylus ，然后进入下一步
? Pick a linter / formatter config: (Use arrow keys)
  ESLint with error prevention only 
  ESLint + Airbnb config 
❯ ESLint + Standard config 
  ESLint + Prettier 

这一步是选择ESLint代码检查工具的配置，这里我们选择标准配置“ESLint + Standard config”，然后进入下一步
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit

这一步是选择什么时候执行ESLint检查，这里我们选择保存时检查“Lint on save”,然后进入下一步
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? 
  In dedicated config files 
❯ In package.json 

这一步是询问 babel, postcss, eslint这些配置是单独的配置文件还是放在package.json 文件中，这里我们选择“In package.json”，然后进入下一步
? Save this as a preset for future projects? (y/N) N

这一步是询问时候以后创建项目是否也采用同样的配置，这里我们选N。到目前为止，vue项目是创建完成了，我们等待项目下载依赖包，等项目构建完毕我们开始集成electron
1.3 使用electron-builder集成electron
进入项目根目录（electron-vue-helloworld），然后执行下列命令：
vue add electron-builder

这个时候会安装electron-builder的依赖，可能比较耗费时间，请大家耐心等待，安装完成后会出现以下选型：
? Choose Electron Version (Use arrow keys)
  ^4.0.0 
  ^5.0.0 
❯ ^6.0.0

这一步是选择Electron的版本，我们这里选择最新版本6.0.0，等待安装完成即可。安装完成后会在src目录下生成background.js，并在package.json 文件中修main为"main": “background.js”
至此，所有的安装都已经完成了，接下来我们就可以运行程序看效果了。
1.4 运行程序
执行以下命令，运行程序
npm run electron:serve

在启动的时候，会启动很久，并出现以下信息
INFO  Launching Electron...
Failed to fetch extension, trying 4 more times
Failed to fetch extension, trying 3 more times
Failed to fetch extension, trying 2 more times
Failed to fetch extension, trying 1 more times

这是在安装vuejs devtools，由于网络问题，一直安装不上。重试5次之后就会自动跳过并且启动程序。
编译成功后，会自动弹出一个桌面程序，如下图所示

下一期我们将详细的讲一下background.js，里边的一些参数都是干什么用的。
更多内容请关注公众号

写在前面
Vue跨平台APP开发案例：完成常用界面的开发，学习积累vue栈知识，重点是提供拿来主义代码。
今日主题
APP最常用界面之一：登录
平台支持
小程序：mpvue、cmljs(卡梅龙)
APP：uniapp、apicloud以及任何基于h5的混合应用框架
weex
效果展示
登录界面
实现分析
界面分析
整体水平居中
图标较少，大部分样式代码可实现
psd标注切片上传蓝湖
代码实现
开发工具：HBuilderX
代码
界面解析
圆角头像
结构：外圆(内部透明)+内圆+头像
界面代码：
界面样式：
登录表单
界面代码：
界面样式：
第三方登录
界面代码
界面样式
使用的技术及注意点
css扩展：sass
input的双向绑定：两种方式(v-model、bind:value + input事件 )
总结
为了平台的兼容性，全部采用flex布局。登录界面相对简单，你也可以练习下，看看会遇到什么问题。
****最后****
这个案例是一个长期的积累，希望你能够+关注，点赞！！你的支持就是我的动力！！