比官方文档更易懂的Vue.js教程！包你学会！

jiezi

6 年前

欢迎大家前往腾讯云 + 社区，获取更多腾讯海量技术实践干货哦~
本文由蔡述雄发表于云 + 社区专栏蔡述雄，现腾讯用户体验设计部 QQ 空间高级 UI 工程师。智图图片优化系统首席工程师，曾参与《众妙之门》书籍的翻译工作。目前专注前端图片优化与新技术的探研。

2016 年，乃至接下来整个 2017 年，如果你要问前端技术框架什么最火，那无疑就是前端三巨头：React、Angular、Vue。没错，什么 jQuery，seaJs，gulp 等都逐渐脱离了热点。面试的时候不吹上一点新技术，好像自己就不是搞前端的似的。当然，希望大家都是抱着好学的心来开始一门学艺的，不管怎样，求求你，请接着看下去吧~
本系列文将会通过很多一目了然的例子和一个实战项目——组件库，来帮助大家学习 Vue，一步一步来，毕竟这篇文章还有接下来的【升学篇】和【结业篇】呢。
什么是 Vue.js
不管你想不想了解，你只需要大概知道，Vue 就是和 jQuery 一样是一个前端框架，它的中心思想就是数据驱动，像远古时代的老前辈 jQuery 是结构驱动，什么意思呢，以前我们写代码时常用 $(‘.dom’).text(‘ 我把值改变了 ’)，这种写法先要获得结构，然后再修改数据更新结构，而 Vue 的做法直接就是 this.msg=” 我改变了 ”，然后 msg 就会同步到某个结构上，视图管理抽象为数据管理，而不是管理 dom 结构了。不懂没关系，慢慢来。
还有一点必须要知道的是，Vue 是国人写的，技术文档也妥妥的是中文，想到这我就有学习的动力。
搭建环境
工欲善其事必先利其器，我们的学习计划从学会搭建 Vue 所需要的环境开始，node 和 npm 的环境不用说是必须的，现在前端流程化很热门，基本上新的技术都会在这套流程的基础上做开发，我们只需要站在巨人的 XX 上装 * 就可以了。我假设你的机子上已经有了最新的 node 和 npm 了，那我们就只需要执行以下命令：
$ npm install -g vue-cli
构建完了之后，随便进入一个我们事先准备好的目录，比如 demo 目录，然后在目录中做初始化操作：
$ vue init webpack myProject
webpack 参数是指 myProject 这个项目将会在开发和完成阶段帮你自动打包代码，比如将 js 文件统一合成一个文件，将 CSS 文件统一合并压缩等。要是不知道 webpack 的话，建议先了解下为好，当然不了解也不影响我们接着往下走。
init 的过程中会问你给项目定义一些描述，版本之类的信息，可以不管，一直输入 y 确定跳过，完成之后出现以下界面，红框部分会提示你接下来要做的操作，按照它的提示继续敲代码就对了。

cd myProject
npm install
npm run dev
npm install 是安装项目所需要的依赖，简单理解就是安装一些必要的插件，需要等一段时间；
npm run dev 是开始执行我们的项目了，一旦执行这个命令之后，等一小会，浏览器应该会自动帮你打开一个 tab 为 http://localhost:8080/#/ 的链接，这个链接就是我们本地开发的项目主页了，如果没有，说明出错了。请移步到评论区回复吧。。。
(PS：开发完成后执行 npm run build 会编译我们的源代码生成最终的发布代码，在 dist 目录下)

看看 Vue 都给我们生成一些什么文件，这其中我们需要关注的是以下文件

package.json 保存一些依赖信息，config 保存一些项目初始化配置，build 里面保存一些 webpack 的初始化配置，index.html 是我们的首页，除了这些，最关键的代码都在 src 目录中，index 在很多服务器语言中都是预设为首页，像 index.htm，index.php 等；打开 build 目录中的 webpack.base.conf.js，会看到这样的代码

说明我们的入口 js 文件在 src 目录中的 main.js，接下来我们就分析下这些初始化代码先；
跟着代码走
Vue 的核心架构，按照官方解释和个人理解，主要在于组件和路由两大模块，只要理解了这两大模块的思想内容，剩下 API 使用就只是分分钟的事情了。所以在我的系列文中，会围绕组件和路由教大家开发一个前端组件库，这个过程也是我个人学习的练手项目，个人觉得一步步做下来之后，对 Vue 的理解就可以算是出师了，胜过读 10 遍书籍文档，那是后话了，先让我们看看最基本的 Vue 生成的默认代码吧！
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from ‘vue’
import App from ‘./App’
import router from ‘./router’

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
el: ‘#app’,
router,
template: ‘<App/>’,
components: {App}
})
先是第一句
import Vue from ‘vue’
这句很好理解，就像你要引入 jQuery 一样，vue 就是 jquery-min.js，然后 Vue 就是 $；然后又引入了./App 文件，也就是目录中和 main.js 同级的 App.vue 文件；在 Vue 中引入文件可以直接用 import，文件后缀名可以是.vue，这是 Vue 自己的文件类型，之前说的 webpack 会将 js 和 css 文件打包，同样的道理，在 webpack 中配置 vue 插件后（项目默认配置），webpack 就可以将.vue 类型的文件整合打包，这和 nodeJs 中 require 差不多的道理。
说回 App.vue 这个文件，这是一个视图（或者说组件和页面），想象一下我们的 index.html 中什么也没有，只有一个视图，这个视图相当于一个容器，然后我们往这个容器中放各种各样的积木（其他组件或者其他页面），App.vue 中的内容我们后面说；
import router from ‘./router’
这句代码引入一段路由配置，同样的后边说（很快就说到的不用急）
接下来的 new Vue 实例化，其实就相当于平时我们写 js 时候常用的 init 啦，然后声明 el：’#app’，意思是将所有视图放在 id 值为 app 这个 dom 元素中，components 表明引入的文件，即上述的 App.vue 文件，这个文件的内容将以 <App/> 这样的标签写进去 #app 中，总的来说，这段代码意思就是将 App.vue 放到#app 中，然后以 <App/> 来指代我们的#app。
import Vue from ‘vue’
import App from ‘./App’/* 引入 App 这个组件 */
import router from ‘./router’/* 引入路由配置 */

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
el: ‘#app’,/* 最后效果将会替换页面中 id 为 app 的 div 元素 */
router,/* 使用路由 */
template: ‘<App/>’,/* 告知页面这个组件用这样的标签来包裹着, 并且使用它 */
components: {App}/* 告知当前页面想使用 App 这个组件 */
})
单页面组件
好了，现在打开我们的 App.vue 文件，在 Vue 中，官网叫它做组件，单页面的意思是结构，样式，逻辑代码都写在同一个文件中，当我们引入这个文件后，就相当于引入对应的结构、样式和 JS 代码，这不就是我们做前端组件化最想看到的吗，从前的 asp、php 也有这样的文件思想。
<template>
<div id=”app”>
<img src=”./assets/logo.png”>
<router-view></router-view>
</div>
</template>

路由
这里补充下路由的大致概念：传统的 php 路由是由服务器端根据一定的 url 规则匹配来返回给前端不同的页面代码，如以下地址
https://isux.tencent.com/abou…
注意这里只有 about 和 recruit，这些不带 xxx.html 的地址其实是服务器端经过一层封装指定到某些文件上去。同样的道理，前端也可以根据带锚点的方式实现简单路由（不需要刷新页面）
https://zhitu.isux.us/index.p…
其中 #mac 就是我们的锚点路由，注意开始我们在浏览器中打开的地址：
http://localhost:8080/#/，
路由让我们可以访问诸如 http://localhost:8080/#/about/ 或者 http://localhost:8080/#/recruit 这些页面的时候不带刷新，直接展示。现在回到我们刚才打开的 App.vue 文件中看这行代码
<router-view></router-view>
这句代码在页面中放入一个路由视图容器，当我们访问 http://localhost:8080/#/about/ 的时候会将 about 的内容放进去，访问 http://localhost:8080/#/recruit 的时候会将 recruit 的内容放进去

如此看来，无论我们打开 http://localhost:8080/#/about/ 还是 http://localhost:8080/#/recruit 页面中的图片都是公用部分，变得只是路由器里面的内容，那么路由器的内容谁来控制呢？
前面说的 src/main.js 中有一句引入路由器的代码。
import router from ‘./router’
现在就让我们打开 router 目录下的 js 文件。
import Vue from ‘vue’
import Router from ‘vue-router’
import Hello from ‘@/components/Hello’
import About from ‘@/components/about’
import Recruit from ‘@/components/recruit’

Vue.use(Router)

export default new Router({
routes: [
{
path: ‘/’,
name: ‘Hello’,
component: Hello
},
{
path: ‘/about’,
name: ‘about’,
component: About
},
{
path: ‘/recruit’,
name: ‘recruit’,
component: Recruit
}
]
})
前面先引入了路由插件 vue-router，然后显式声明要用路由 Vue.use(Router)。注意到 Hello，About 等都是页面（也可以是组件），接着注册路由器，然后开始配置路由。
路由的配置应该一目了然，给不同的 path 分配不同的页面（或组件，页面和组件其实是一样的概念），name 参数不重要只是用来做识别用的。看到这里就可以明白，前面说的红色框的内容，其实就是 Hello 里面的内容，打开 components 目录下的 Hello.vue 就能明白了。

到这里就可以完成路由的配置，我个人习惯喜欢把页面放在 pages 目录下，组件放在 components 目录下，可能有人会问如果要访问 http://localhost:8080/#/about/me 的话要如何配置呢，很简单只要给路由加多一个子路由配置，如下：
{
path: ‘/blog’,
name: ‘blog’,
component: Blog,
children: [
{
path: ‘/’,
component: page1
},
{
path: ‘info’,
component: page2
}
]
}
访问 /blog 的时候会访问 Blog 页面，Blog 里面放个路由器就可以了，然后访问 http://localhost:8080/#/blog/ 的时候会往路由容器中放置 page1 的内容，访问 http://localhost:8080/#/blog/info 的时候会往路由容器中放置 page2 的内容
//blog.vue
<template>
<div> 公用部分 </div>
<router-view></router-view>
</template>
小结
贯穿我们刚才学习的过程，从初始化到页面展示，Vue 的页面架构流程大概是这样的

总结下前面讲的内容先：

搭建环境
代码逻辑
单页面组件（简单带过）
路由
子路由

以上的流程就是我们刚开始接触 Vue 时候的简单介绍，在之前就说过学习 Vue 能掌握组件和路由的基本概念之后，对于我们后续了解他的工作机制有着很大的帮助，本篇章我们只是简单介绍了单页面组件，在下一篇文章中，我们将通过一个实战的项目，来充分了解组件化在 Vue 构建中的重要性。
时间不早了，我也该回去睡觉了，消化一下，我们下一篇文章见~~~
文末附上所有相关代码和官方文档地址~~~
http://cn.vuejs.org/v2/guide/
附件：src.zip

问答 vue.js 怎么使用插件？相关阅读 Vue.js 实战总结 Angular 和 Vue.js 深度对比 0 基础菜鸟学前端之 Vue.js【每日课程推荐】机器学习实战！快速入门在线广告业务及 CTR 相应知识