Electron + Vue + Vscode构建跨平台应用(一)知识点补充
<https://blog.csdn.net/yi_master/article/details/83990973>

* 配置Vue.js解释环境:Node.js的安装与配置
  首先从Node官网 <https://nodejs.org/en/download/>下载Node最新版本,后续介绍中Node的版本为 v6.11.3,
地址为:Node v6.11.3 下载地址 <https://nodejs.org/en/blog/release/v6.11.3/>,
开发平台为windows ;


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

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


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


* 配置npm或者cnpm
   我们在开发的时候,经常会引用第三方的内容,那是不是我们需要知道每一个第三方包的具体位置,然后去下载打开?
   为了解决这个问题,npm 官网 <https://www.npmjs.com.cn/>
便产生了,他是一个Node.js下的包管理工具,通过这个工具你就可以下载任意一个第三方内容,而不必关系他在哪了,更奇妙的是,如果模块A和模块B有依赖关系,通过npm可以把所有依赖的包都下载下来并管理起来;
   但是因为受到服务器影响(被墙),所以无敌的淘宝制作了cnpm,cnpm官网 <http://npm.taobao.org/>,cnpm是一个完整
npmjs.org <http://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命令行 <https://www.npmjs.com.cn/>

* 安装配置 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官网 <https://electronjs.org/>

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

cnpm install -g electron

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



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

Vscode官网 <https://code.visualstudio.com/>

首先下载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插件安装即可

基本上环境就算搭建完成了。