话不多说，先上最终成果

第一步：安装node.js

首先确保你安装了node.js  没有安装的话去官网下载安装https://nodejs.org/zh-cn/  不推荐使用最新版本，因为有可能electron还不支持最新版的node.js，建议从8.0以上的版本开始

（注意：npm 命令被集成到了node.js里，安装node的时候已经自动将npm安装了。）

以往各个版本下载链接 https://nodejs.org/zh-cn/download/releases/

8.x版本，安装版下载链接 https://nodejs.org/dist/latest-v8.x/node-v8.15.0-x64.msi

安装完毕后，校验是否安装成功，使用：node -v  名称看下版本号，笔者这里用的8.10.0版本

第二步：cnpm安装

 由于在国内使用npm时会很慢，有些模块安装会涉及到国外网需要翻墙才行，导致安装失败！因此强烈推荐淘宝镜像的npm镜像

cnpm命令。 cnpm命令基本上和npm一模一样，只要用到npm的地方直接替换成cnpm就行。

全局安装cnpm，输入命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

校验是否安装成功，查看版本号 cnpm -v

 

第三步：安装vue-cli

命令：cnpm install -g vue-cli

第四步：GitHub下载启动demo

GitHub上有一个开源的可以生成electron-vue项目的模板，下载该模板后通过命令可生成electron-vue项目

官网模板链接：https://github.com/SimulatedGREG/electron-vue

下载完毕后，进入到下载的文件根目录下，启动cmd命令行窗口。

输入命令：vue init simulatedgreg/electron-vue my-project  （注意：一个字母都不要改变，原命令粘贴就行）

输入完命令后回车，会有一些选项要自己填写，看下图（蓝色部分是笔者选择过的）

Application Name：项目名称

Application Id： 项目标识Id（一般使用公司网址）

Application Version ：你的程序的版本号

Project description：项目描述

Use Sass / Scss ：Yes

Select which Vue plugins to install：要安装的插件，默认是全选的，按空格键取消选择，前面尖括号里有*号表示选中状态

Use linting with ESLint? ：是否使用ESLint插件做语法检查

Which ESLint config would you like to use?：如果使用上一步的ESLint，你希望用哪一种检查配置

 Set up unit testing with Karma + Mocha?：是否使用 Karma 和 Mocha集成测试模块

What build tool would you like to use?：你喜欢用哪一种打包方式

 author：作者名称

以上，在你选择完前一个选项后，下一个选项才会出现。最终会在该目录下出现一个 my-project文件夹，这个文件里就是一个融合了electron和Vue的demo起步案例，具体可以根据自己的需求改写。

进入my-project 文件夹，输入命令：cnpm install  按照项目的各种依赖模块

完事后，输入命令：cnpm run dev  来启动项目，大功告成！

另外，笔者红框圈起来的地方都可以定制，包括在windows下方的任务栏中的图标都可以定制

 

 

第五步：窗口定制

窗口定制的代码连接：https://github.com/pocher/vue-electron-demo