分享：Vue.js新手入门指南-0518-v1.0张雅慧（续）

 

11.我在学习Vue.js的时候老是听到Webpack，这是啥？

 

Webpack是一个前端打包和构建工具。如果你之前一直是手写HTML，CSS，JavaScript，并且通过link标签将CSS引入你的HTML文件，以及通过Script标签的src属性引入外部的JS脚本，那么你肯定会对这个工具感到陌生。不要紧，我们先来了解一下为什么要用Webpack，然后带着原因去学习就好了。

 

12.为什么要用Webpack

 

前面说了，做一个单页应用程序本身就相当复杂，而且在做的时候肯定会使用到很多素材和别的第三方库，我们该如何去管理这些东西呢？

 

还有前面讲到了Webpack是一个前端打包工具，前端代码为什么要打包呢？因为单页应用程序中用到很多素材，如果每一个素材都通过在HTML中以src属性或者link来引入，那么请求一个页面的时候，可能浏览器就要发起十多次请求，往往请求的这些资源都是一些脚本代码或者很小的图片，这些资源本身才几k，下载连1秒都不需要，但是由于HTTP是应用层协议，它的下层是TCP这个运输层协议，TCP的握手和挥手过程消耗的时间可能比下载资源本身还要长，所以需要把这些小文件全部打包成一个文件，这样只要一次TCP握手和挥手的过程，就把多个资源给下载下来了，并且多个资源由于都是共享一个HTTP请求，所以head等部分也是共享的，相当于形成了规模效应，让网页展现更快，用户体验更好。

 

 

前面说到Webpack还有构建的功能，这就不得不提到了ECMAScript6这个新版本的JavaScript，但是现在国内外还有很多人用着老版本的浏览器，这些浏览器并不支持ECMAScript6，那么我们的前端项目如何在这种浏览器上运行呢？这就需要Webpack的Loader自动载入一个转换器来将我们写的ECMAScript6转换成浏览器能支持的老版本JavaScript语言，这个转换器的名字叫做babel，如果你以后听到或者看到了这个单词，应该要知道它就是一个ECMAScript6 to 老版本JavaScript的转换器了。这也是Webpack的构建功能。当然对前端有更深入的同学还会知道Sass，Less，stylus之类的CSS预处理器，我们也可以通过在Loader中编写特定的规则来实现自动将这些CSS预处理语言转换成普通浏览器能识别的CSS代码。

 

开头的介绍提到了vue.js可以使用单文件组件开发项目，其实也是通过Webpack将单文件组件中的模版，样式以及JS转换到主页面中

 

当然Webpack不止这点功能，它还可以通过安装各种插件来扩展，比如说热加载技术，就是解放键盘的F5键。让我们修改代码，并且按Ctrl+S保存之后，浏览器页面自动刷新变化，不需要我们去手动刷新，还有一些插件可以自动添加注释，自动给CSS代码加上一些浏览器内核对CSS3兼容前缀，就像webkit-xxx之类的一样。

 

13.NPM和Node.js又是什么？它们是什么关系？

 

首先讲讲Node.js。我们知道通常情况下，JavaScript的运行环境都是浏览器，因此JavaScript的能力也就局限于浏览器能赋予它的权限了。比如说读写本地系统文件这种操作，一般情况下运行在浏览器中的JavaScript代码是没有这个操作权限的。如果我们想用JavaScript写出一些能够运行在操作系统上的，能够具有像PHP，JAVA之类的编程语言具有的功能的程序该怎么办呢？Node.js就解决了这个问题。Node.js是一个服务端的JavaScript运行环境，通过Node.js可以实现用JavaScript写独立程序。像我们之前提到的Webpack就是Node.js写的，所以作为一个前端开发，即使你不用Node.js写独立程序，也得配一个Node.js运行环境，毕竟很多前端工具都是使用它写的。

 

NPM是一个node.js的包管理器。我们在传统开发的时候，JQuery.js大多都是百度搜索，然后去官网下载，或者直接引入CDN资源，这种方法太过于麻烦。如果以后遇到其他的包，这个包的代码本身可能还调用了其他的包（也称这个包和其他的那几个包存在依赖关系），那么我们要在自己的项目中引入一个包将变得十分困难。现在我们有了NPM这个包管理器，直接可以通过

 

npm install xxx包名称

的方式引入它，比如说

 

npm install vue

就自动在当前项目文件夹下导入了这个包，并且npm自动下载好了vue这个包依赖的其他包。

 

至于有的人在按照网上的npm教程配置的时候踩坑了，发现下载速度很慢或者完全下载不了，那是因为我国有着众所周知的原因，网上也有各种解决方法可以解决这个问题，大家多善用搜索引擎。

 

前面提到了Webpack可以安装各种插件来扩展功能，其实也是通过这种方式扩展。

 

如果你学过PHP的话，NPM就和PHP里面的Composer差不多。也和CentOS下的yum和Ubuntu下的apt-get差不多。

 

14.Vue-CLi又是啥？

 

它是一个vue.js的脚手架工具。说白了就是一个自动帮你生成好项目目录，配置好Webpack，以及各种依赖包的工具，它可以通过

 

npm install vue-cli -g

的方式安装，后面的-g表示全局安装的意思，意味着你可以打开命令行之后直接通过vue命令调用它。

 

15.我该不该学Vue.js？

 

现在Vue.js无论是发展势头还是作者支持还是很好的，而且它本身中文资料就比较多，教程也很多，现在随随便便打开几个和前端开发有关的知乎专栏，基本上都能见到相关文章，社区也很活跃。

 

至于你该不该学，取决于你自己，如果你当前只是做做以内容展示为主的项目，或者就是成天用各种CMS建站仿站，并且以后都不打算更换更好的工作，那么可以暂时不用学。如果你开发的项目交互非常多，而且前后端开发都对前后端分离有很清楚的认识，那么可以大胆的学习，并且在实际项目中运用。

 

16.Vue.js怎么火起来的？

 

关于这个问题，网上说法很多，我自己认为主要还是前些年大前端变革太快，而最近一年开始Vue.js+Webpack这个组合开始逐渐稳定下来了，而且已经有了很多中文资料。

 

对比它的竞争对手AngularJS，新旧版本项目无法平滑升级，变革太大让用户感觉不安稳。

 

而React本身主流推荐用的是JSX，需要额外学习一门语法（什么？学Vue.js还要学ECMAScript6？现在ECMAScript6是趋势，并不是因为Vue.js才要学的），并且React本身用的是render写法编写模版代码，这让很多用习惯了Smarty等后端模版引擎得人来使用感觉很不适应，现在看来React本身在中国一些论坛社区的火爆程度还是没有Vue.js高。

 

当然也并不是说除了Vue.js以外其他框架都很差。像知乎新版也是用React开发的，他还是有各自优秀的地方大家可以深入学习之后做出自己的判断。

 

17.我在很多地方还看到Vuex和Vue-route，它们又是什么？

 

Vuex是vue的一个状态管理器。用于集中管理一个单页应用程序中的各种状态。

 

Vue-route是vue的一个前端路由器，这个路由器不是我们上网用的路由器，而是一个管理请求入口和页面映射关系的东西。它可以实现对页面局部进行无刷新的替换，让用户感觉就像切换到了网页一样。

 

要讲清楚这两个东西，又得花费大量篇幅，所以这里只是简单提一下，先学好vue.js本身才是最重要的。

 

18.我还在一些地方看到过Vue-resource和Axios，它们又是什么？

 

我们在传统的前后端不分离的开发中，后端直接把数据通过模版引擎拼接进了返回的HTML中。而现在做单页应用程序属于前后端分离开发，那么这个单页应用程序中的数据就得通过ajax的方式获取，也要通过ajax的方式提交到后端。

 

在传统开发中我们都是通过xmlhttprequest手动操作，或者通过JQuery的ajax方法来进行数据提交获取。

 

vue.js本身没有封装ajax操作库，所以我们要通过Vue-resource和Axios来进行ajax操作，而因为种种原因，现在vue.js2.0已经将axios作为官方推荐的ajax库了。

 

19.我该学Vue.js2.0还是1.0呢？

 

现在很多框架和语言都是学新不学旧（Python慢慢也变得如此），因此如果不是为了维护老旧项目，肯定推荐学Vue.js2.0。而且学会了Vue.js2.0，再去学习Vue.js1.0也不是什么难事。

 

20.写Vue.js用什么开发工具和电脑呢？

 

前端开发基本上不需要太高端的电脑都能胜任，现在这个时代是台电脑，装个编辑器都可以做前端开发的。

 

Vue.js的组件文件本质上还是普通的代码文件，所以各种编辑器配合一些语法检查插件就足够了。我自己用的是sublime text 3，安装一些插件之后可以实现.vue单文件组件高亮代码以及各种自动完成。Webstorm中也有类似插件，大家可以在网上各种教学文章的指导下配置好环境。

 

结语：

 

可能包括我在内的很多人在看到Vue.js那神奇的双向绑定优雅写法都会有一种非常惊艳，而看到中文文档发布之后有种想立马学习的冲动。可惜大前端终究是大前端，如果一个对于前端各个方面没有深入认识就想着能一步登天，肯定对不起大前端的“大”字。原本看着只想学一个Vue.js，没想到顺带把ECMAScript6，Webpack配置，ESLint配置，bable配置，npm使用，node.js语法，以后vue全家桶中的vuex，vue-route等等等等都学了一遍。前段时间网上也流传出了一个职位叫做Webpack配置工程师，从这里也可以看出弄懂前端这个大杂烩确实不是那么容易。大家一起加油，有什么问题也可以在评论区回复，我会抽空补充在文章内容中。谢谢各位的支持！~

 

 

本文章由

 

@昌维

原创，在知乎专栏-代码之美 https://zhuanlan.zhihu.com/codes 首发，转载请注明出处。