Electron + Vue + Vscode构建跨平台应用（二）Electron + Vue环境搭建

Electron + Vue + Vscode构建跨平台应用（一）知识点补充

配置Vue.js解释环境：Node.js的安装与配置

首先从Node官网下载Node最新版本，后续介绍中Node的版本为 v6.11.3, 地址为：Node v6.11.3 下载地址, 开发平台为windows ；

一路Next就完成了Node.js的安装；笔者Node.js安装目录为： D:\SoftWare\NodeJs；

然后在环境变量Path中添加Node.js的可执行路径

配置完成之后，当然要测试下Node是否安装成功，在cmd命令行中使用 node -v，如果出现对应版本号，则表示安装成功

配置npm或者cnpm

我们在开发的时候，经常会引用第三方的内容，那是不是我们需要知道每一个第三方包的具体位置，然后去下载打开？为了解决这个问题，npm 官网便产生了，他是一个Node.js下的包管理工具，通过这个工具你就可以下载任意一个第三方内容，而不必关系他在哪了，更奇妙的是，如果模块A和模块B有依赖关系，通过npm可以把所有依赖的包都下载下来并管理起来；但是因为受到服务器影响（被墙），所以无敌的淘宝制作了cnpm,cnpm官网，cnpm是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟一次以保证尽量与官方服务同步。我们安装的Node.js中已经自带了npm，我们可以通过cmd命令测试npm是否安装成功

不过为了后续方便引入其他模块，我还是决定使用cnpm；他的安装只需要执行如下命令

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成之后，执行cnpm -v查看是否安装成功

npm/cnpm命令

在后续的开发过程中，我们需要使用cnpm去下载其他模块，所以我们有必要掌握cnpm的一些命令，因为cnpm是npm的镜像，所以你可以像使用npm命令一样使用cnpm

2.1 安装Node模块： npm install moduleNames 安装完毕后会产生一个node_modules目录，其目录下就是安装的各个node模块。 node的安装分为全局模式和本地模式。一般情况下会以本地模式运行，包会被安装到和你的应用程序代码的本地node_modules目录下。在全局模式下，Node包会被安装到Node的安装目录下的node_modules下。全局安装命令为$npm install -g moduleName。

2.2 查看安装模式：npm get global 通过该命令查看本机的安装模式是不是全局安装，如果显示为false，则表示为本地安装

2.3 设定安装模式 npm set global=true

2.4 卸载指定安装模块 npm uninstall sax

疑问：在一个项目中，我把代码提交到Git上，别人Clone下来之后，怎么知道我需要下载哪些依赖库

我们clone代码之后，你会发现是没有node_modules这个文件夹的，node_modules用来保存依赖库，此时我们就需要通过npm install来下载依赖库，但是需要下载哪些库，这时候就需要定义package.json，配置好dependencies和devDepencies，这样其他同学在执行install命令的时候，就可以下载对应的依赖库了

更多的命令行请参考 npm命令行

安装配置 vue-cli

vue-cli是为了帮助我们快速构建Vue项目用的

cmd命令行下执行(下面命令是全局安装)

cnpm install --global vue-cli

待安装完成之后，输入vue，如果提示如下则表明安装成功

安装配置Electron

Electron就像套在Vue项目外的一个壳子，他的存在使得你的Vue可以运行在浏览器中 Electron 基于 Chromium 和 Node.js, 让你可以使用 HTML, CSS 和 JavaScript 构建应用。 Electron 是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目 Electron 兼容 Mac, Windows 和 Linux，它构建的应用可在这三个操作系统上面运行

Electron官网

执行下面命令进行安装，通过如下命令就可以把Electron引入到Vue项目中（在$PATH 中全局安装 electron）