Vue.js 2.0 渐进开发应使用实践

内容

导读：为什么要使用 Vue.js

用任何新框架和库其实都是为理解决我们当前开发所遇到的问题，或者者能提升其开发效率。每个人的成本就是时间，好的工具则能够帮助我们节约时间，从项目角度而言，也就帮我们节约了成本。而 Vue.js 就是一款能降低开发成本、提升开发效率的工具，它能帮助我们从繁琐的 DOM 操作中解脱出来。开发中，我们设定好正确视图和数据的规则后，只要要关注数据的变化，视图上的内容是会随之变化的，而不需要我们手动再操作 DOM 元素进行修改。

此外，前台开发的模式也逐步开始往组件化方向转变，Web Components 的概念也开始逐步成为标准，拥有自己独立的 HTML 片段、JS 文件以及 CSS 样式，这样在用时可以不使用担心对自己本身业务上的代码造成影响。Vue.js 对这一概念也进行了自己的实现，这样对于提升代码复使用、拆解大型项目，都有着很好的帮助。

兼容性

Vue.js 不支持 IE8 及其以下版本，由于 Vue.js 用了 IE8 不能模拟的 ECMAScript 5 特性。Vue.js 支持所有兼容 ECMAScript 5 的浏览器。

内容列表

本系列将从零开始详情 Vue.js，内容安排如下：

• Vue 的基础概念及构建开发环境
• 网页开发的基础内容：数据渲染、事件绑定和表单解决
• 提升代码复使用性（1）：指令和组件
• 提升代码复使用性（2）：混合属性、过滤器、过渡和插件
• 开发线上项目必经过程：前后台联调及打包发布
• 数据请求、文件上传、处理跨域问题
• 第三方库与业务代码分离、多页面分离资源引使用
• 单页应使用的基础：vue-router
• 路由公告及用
• 利使用导航守卫实现权限控制
• 路由优化：解耦与按需加载
• 组件间通信及构建大型应使用所需的状态管理：Vuex
• Vuex 的基本使用法
• Vuex 的常见用技巧
• 实战：日历式的 TODO List
• 提升 SEO 和加快首屏显示时间：服务端渲染
• 预渲染
• 服务端渲染官方库：vue-server-renderer
• 服务端渲染框架：Nuxt.js
• 编写高质量的 Vue 项目：测试使用例
• Karam + Mocha：单元测试
• Nightwatch：E2E 测试

期望能使帮助开发者快速掌握 Vue.js，理解其用方式和用场景，并构建可上线的真实项目。

适合阅读人群

本系列的文章适合以下人群阅读：

• 对 Vue.js 感兴趣但尚未用的前台开发者；
• 对 Vue.js 处于试验阶段但尚未正式上线或者用规模还不大的开发者。

版本商定

本系列内容采使用 Vue.js 版本为 2.5.6，大部分代码都会用 ES6，希望读者对 ES6 有肯定的理解。

第01课：Vue 的基础概念及构建开发环境

数据与视图

Vue.js 最大的特点之一就是数据驱动视图，也就是说当数据发生变化时，视图（即可使用户界面）也随之发生变化，而不需要我们手动去升级 DOM 元素。