一、vue开发环境介绍-node.js的安装

一、概述

vue.js是现代前端开发中一个重要的流行框架，与Angular.js和React.js类似，提供了对html,js以及css的编译能力，同时提供了一个运行时的框架，用于组合组件化的调用方式，这与传统的在页面增加css和js，实现页面效果有很大的区别。

vue其实采用编译+底层框架的方式提供了对web开发的一个便利的措施，vue包含几个部分，第一，利用webpack为基础，开发了vue-loader，这个很牛x，是个编译器，把你写的vue的文件，编译成浏览器能识别的js和css。第二，从框架层面，提供了双向数据绑定，页面路由，事件分发等能力，等于对浏览器的基础js和dom的能力进行了封装。

传统的前端开发方式是，编写页面，编写样式，编写脚本，在页面中引入样式和脚本，即可运行。现代的前端开发方式为：开发组件，开发路由连接组件，编译应用，发布调试。所以，与传统页面开发不同，首先要搭建一个编译环境，这个编译环境主要基于webpack来实现，包含了babel,less,scss,lint等工具。而这些工具都是基于Node.js的环境来运行的。

因此，vue.js开发环境的搭建主要包含以下几个步骤：

• Node.js环境的搭建，包括npm的配置；
• 基于npm安装vue工程的脚手架，官方脚手架最新为vue-cli3，整合并封装了webpack内容；
• 在工程中设置反向代理环境以及一些其他可选的配置。
   
   

说明:

• node.exe是node.js的运行环境，类似java的java.exe
• npm用于管理nodejs组件包的下载和依赖关系包的下载，类似于java的maven或者是python的pip工具;
• 由于国内外网络原因，尽量在安装完成后设置npm的国内镜像代理，加快下载速度，国内最常用的就是淘宝镜像;
• 单独设置global和cache的文件夹的目的是为了修改默认存放位置，现在很多工具都把下载内容放在C盘的User目录下，如果你的nodejs安装路径不在C盘，你的C盘也不想那么大的话，尽可能设置一下。
• 安装完成并且成功的标志就是在cmd或者powershell下，直接输入node -v以及npm -v能够打印出版本，证明环境变量和安装都正确.

 
 

二、什么是Node.js？

nodejs不是一个js框架，千万不要认为是类似jquery的框架，nodejs是js运行时，运行环境，类比java中jvm，java的开端是什么，无疑是jvm，自从有了jvm，java才能吹牛说自己是“一次编写处处运行”，不管你是windows还是linux，只要安装了对应版本的jvm都可以运行.class文件。

同样nodejs的作用和jvm的一样一样的，也是js的运行环境，不管是你是什么操作系统，只要安装对应版本的nodejs，那你就可以用js来开发后台程序。这具有划时代的意义，意味着一直以来只能在浏览器上玩来玩去的js，可以做后端开发了，从有了nodejs后就催生出一大批用js做后台开发的前端人员，这部分人员就是偏前端的“全栈程序员”。记住，nodejs是和jvm同等地位的js运行环境，打开了前端人员走向后端的道路。

• 简单来说，node是一个运行环境，是vue的运行环境，vue的运行是要依赖于node的npm的管理工具来实现。
• 简单的说 Node.js 就是运行在服务端的 JavaScript。
• Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。
• Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

 
 

三、vue.js和Node.js

我们使用Vue.js一定要安装node.js吗？准确的说是使用vue-cli 搭建项目的时候需要nodejs。你也可以创建一个 .html 文件，然后通过如下方式引入 Vue，一样可以使用Vue。

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

但是使用node是比较方便的，打包部署，解析vue单文件组件，解析每个vue模块，拼在一起等，启动测试服务器localhost, 帮你管理 vue-router，vue-resource这些插件。所以通常情况下我们会使用Vue+node方式，方便省事。

 
 

三、vue、node、npm、webpack

 

• vue.js : 是比较流行的前端框架，它的使用需要node.js环境；

• node.js功能：
  准确的说是使用vue-cli 脚手架搭建项目的时候需要nodejs。也可以用script标签引入vue.min.js这样的，在js里实例化vue也行。
  使用node有几件事，打包部署，解析vue单文件组件，解析每个vue模块，拼在一起，转码es6，less，等，启动测试服务器localhost8080, 帮助管理 vue-router，vue-resource这些插件，直接拿来用。
  也就这些好处，这都是所谓前端工程化，也是前端发展趋势，掌握这些东西也能提升身价。

• npm：前端依赖包管理器（包含在nodejs中）
  类似maven，帮助下载和管理前端的包，这个下载源是外国服务器，如果想提高下载速度的话，建议更换成淘宝镜像，类似maven之于阿里云镜像。

• webpack：可以看做是模块打包机
  它做的事情：分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
  webpack能够把.vue后缀名的文件打包成浏览器能够识别的js，而这个.vue文件装换需要打包器vue-loader→npm下载→node包管理工具。
  Vue.js可以在html里引用，使用npm引入是方便包管理。等到应用需要的库和框架多起来后，一个个从html里引入就不方便了。所以用到打包工具比如webpack，可以直接require引入之后将不同模块打包成单个js文件。同时这些工具提供各种自动化处理，让前端开发更爽。最后Vue.js是数据驱动，和JQuery思路不同，你几乎不需要自己进行复杂低效的dom操作，开发简介明了。

• 关系梳理：
  webpack能够把.vue后缀名的文件打包成浏览器能够识别的js，而这个.vue文件装换需要打包器vue-loader，这个vue-loader打包器是可以从npm上面下载（npm上面有很多资源包），npm下载文件之后，webpack打包文件的时需要node环境去运行。

 
 

四、vue-cli脚手架是什么及其脚手架搭建

vue脚手架的作用是用来自动一键生成vue+webpack的项目模版，包括依赖库，免去你手动安装各种插件，寻找各种cdn并一个个引入的麻烦。

vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。

vue-cli是有Vue提供的一个官方cli，专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js+webpack的项目模板，是为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载，保存时 lint 校验，以及生产环境可用的构建版本。

vue-cli就是Vue的脚手架工具，和我们工地看到的脚手架真是那么一回事，它帮助我们搭建基本的开发环境，好比架子搭建好了，利用它可以搞定目录结构，本地调试，单元测试，热加载及代码部署等。

 
 

五、什么是单页面应用？

单页Web应用（single page web application，SPA），就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。

单页面应用与多页面应用的对比：

说白就是无刷新，整个webapp就一个html文件，里面的各个功能页面是javascript通过hash,或者history api来进行路由，并通过ajax拉取数据来实现响应功能。因为整个webapp就一个html，所以叫单页面！

通俗点来讲，在应用整个使用流程里浏览器由始至终没有刷新，所有的数据交互由ajax完成。
但是用户体验起来和app一样，有明确的页面区分，即所谓的web app。

 
 

六、Node.js环境搭建

1、下载node.js:

  下载地址：[https://nodejs.org/zh-cn/](https://nodejs.org/zh-cn/)

2、安装：

安装参考地址：
https://www.cnblogs.com/liangsongbai/p/5506073.html
傻瓜式下一步安装：




安装成功，文件夹结构如下，并在上面安装过程中已自动配置了环境变量和安装好了npm包，此时可以在dos命令中输入：node -v,npm -v,分别查看node和npm的版本号，有即是安装成功。

 
 

3、配置npm在安装全局模块时的路径和缓存cache的路径：

因为在执行例如npm install webpack -g等命令全局安装的时候，默认会将模块安装在C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中，不方便管理且占用C盘空间，如下图所示：

所以这里配置自定义的全局模块安装目录，在node.js安装目录下新建两个文件夹 node_global和node_cache，随便在计算机哪个盘建一个全局目录，比如我的在D盘新建两个目录：

D:\Program Files (x86)\nodejs\node_global   （全局文件目录）
D:\Program Files (x86)\nodejs\node_cache    （缓存文件目录）

然后在cmd命令下执行如下两个命令：

npm config set cache "D:\Program Files (x86)\nodejs\node_cache"

npm config set prefix "D:\Program Files (x86)\nodejs\node_global"

 
 

4、配置环境变量：

在环境变量 -> 系统变量中新建一个变量名为 “NODE_PATH”， 值为“D:\Program Files (x86)\nodejs\node_modules”，如下图：

最后编辑用户变量里的Path，将相应npm的路径改为：D:\Program Files\nodejs\node_global，如下：

更改前：

更改后：

到此node.js安装和npm配置完成！！！

 
 

5、测试Node.js安装成功：

在cmd命令下执行 npm install webpack -g 然后安装成功后可以看到自定义的两个文件夹已生效：



webpack 也已安装成功，执行 npm webpack -v 可以看到所安装webpack的版本号：

至此：node.js安装成功，测试成功！！！