Electron+vue的使用

.现如今前端框架数不胜数，尤其是angular、vue吸引一大批前端开发者，在这个高新技术快速崛起的时代，自然少不了各种框架的结合使用。接下来是介绍electron+vue的结合使用。

2.Electron是什么？？

     对于我来说Electron相当于一个浏览器的外壳，可以把网页程序嵌入到壳里面，可以运行在桌面上的一个程序，可以把网页打包成一个在桌面运行的程序，通俗来说就是软件，比如像QQ、优酷、网易音乐等等。功能的强大超出你的想象，可以构建跨平台桌面程序，本身支持node.js，可以使用node.js的一些模块。想要深入了解可以查看官网的详细介绍。

    Electron官网：https://electronjs.org/  

3.Electron+vue的联合使用

    有vue基础跟nodejs基础的开发人员使用electron那就更顺风顺水了，没有node基础的，有vue或者angular基础的也可以学习，学起来可能会吃力些，不过也没关系，很多东西有大神已经封装好了，直接使用就行。

    接下来教你手把手搭建一个electron+vue的开发环境。

    第一步：安装nodejs

    windows下的NodeJS安装是比较方便的（v0.6.0版本之后，支持windows native），只需要登陆官网（http://nodejs.org/），便可以看到下载页面。 

 

2、下载完成后双击运行进行安装，安装过程基本直接“NEXT”就可以了（全部采用默认方式安装）。（windows的安装msi文件在过程中会直接添加path的系统变量，变量值是你的安装路径，例如“C:\Program Files\nodejs”）。

3、安装完成后可以使用cmd（win+r然后输入cmd进入 ）测试下是否安装成功。方法：在cmd下输入node -v，出现下图版本提示就是完成了NodeJS的安装。 

 

 

4、npm的安装。由于新版的NodeJS已经集成了npm，所以之前npm也一并安装好了。同样可以使用cmd命令行输入”npm -v”来测试是否成功安装。如下图，出现版本提示便OK了。 

 

5、常规NodeJS的搭建到现在为止已经完成了，急不及待的话你可以在”cmd“输入”node“进入node开发模式下，输入你的NodeJS第一句：”hello world“ - 输入：console.log(‘hello world’)。

 

 第二步:搭建vue开发环境

      1.安装淘宝npm镜像

             由于在国内使用npm是非常慢的，所以在这里我们推荐使用淘宝npm镜像，使用

       淘宝的cnpm命令管理工具可以代替默认的npm管理工具：$ npm install -g cnpm --registry=https://registry.npm.taobao.org；

       淘宝镜像安装成功之后，我们就可以全局vue-cli脚手架，输入命令：cnpm install --global vue-cli  回车；验证是否安装成功，在命令输入vue，出来vue的信息，及说明安装成功；

     

第三步ÿ