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

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

1. 配置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，如果出现对应版本号，则表示安装成功

2. 配置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查看是否安装成功

2. 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命令行

3. 安装配置 vue-cli

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

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

cnpm install --global vue-cli

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

4. 安装配置Electron

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

Electron官网

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

cnpm install -g electron

安装成功后执行：electron -v 查看一下是否安装成功

5. 安装配置Vscode

前面几个步骤我们完成了开发搭建Vue项目的环境配置，这里我们选用Vscode作为Vue项目的IDE

Vscode官网

首先下载Vscode

下载完成之后，一路Next完成安装；

   配置Vscode

 6.1 设置中文

  在商店里面下载Chinese (Simplified) Language Pack for Visual Studio Code插件进行安装

   使用快捷键在Ctrl+Shift+p 打开命令面板 输入“config” 进入locale.json，将locale.json修改为"locale":“zh-cn”

 6.2 设置Vscode快捷键和Eclipse一致

   在商店里面下载eclipse key map插件安装即可

 6.3 如何离线下载vs插件

   首先通过访问vscode商店，搜索所需插件，此处以安装vetur为例

   然后点击右边的Download Extension下载对应的离线安装包，文件格式为：xxxxx.vsix

   最后点击应用商店图标，选择 Install from VSIX, 之后选择你刚保存的文件即可完成安装，如果你发现当前安装失败，请确认下安装包和IDE版本是否适配，一般将IDE更新到最新即可

 6.4 如何查看已经安装的插件信息
点击应用商店图标，选择show installed Extensions选项，IDE自动会列出当前已安装列表

 6.5 vscode常用插件推荐

1. 中文汉化包 ： Chinese (Simplified) Language Pack for Visual Studio Code，
2. 个性化文件夹图标： vscode-icons
3. HTML 代码提示插件： HTML Snippets
4. eclipse快捷键映射： HTML Snippets
5. git历史记录查看： Git History
6. js代码提示：JavaScript (ES6) code snippets
7. 语法高亮、代码片段、Emmet、代码检测、智能提示和调试支持： Vetur