基础
- 按照官方例子,使用
<script>
标签将官方教程(guide)写一遍,最终做个一个页面出来。(2d) - 根据官方的实例,自己写一个例子,比如编辑器。(1d)
- 阅读官方进阶教程前半部分到自定义指令为止,着重理解vue的响应式机制和组件声明周期。『渲染函数(Render Function)』如果理解吃力可以先跳过。(1d)
- 阅读教程里关于路由和状态管理的章节,然后根据需要学习vue-router和vuex。根据文档中的例子跟着即可。(1d)
扩展
- 了解 JavaScript 背后的规范,ECMAScript 的历史和目前的规范制定方式。学习 ES2015/16 的新特性,理解 ES2015 modules,适当关注还未成为标准的提案,ES6以后是各个框架的标配,必须要学。(2d)
- 命令行。(0.5d)
- nodejs基础。(0.5d)
至少要了解 npm 的常用命令,npm scripts 如何使用,语义化版本号规则,CommonJS 模块规范(了解它和 ES2015 Modules 的异同),Node 包的解析规则,以及 Node 的常用 API。应当做到可以自己写一些基本的命令行程序。注意 Node (6+) 版本开始已经支持绝大部分 ES2015 的特性,可以借此巩固 ES2015。
- 了解如何使用 / 配置 Babel 来将 ES2015 编译到 ES5 用于浏览器环境。这个简单,看着Babel官网文档即可轻松配置。(0.5d)
- 学习 Webpack。Webpack 是一个极其强大同时也复杂的工具,作为起步,理解它的『一切皆模块』的思想,并基本了解其常用配置选项和 loader 的概念/使用方法即可,比如如何搭配 Webpack 使用 Babel。(0.5d)
学习 Webpack 的一个挑战在于其本身文档的混乱,建议多搜索搜索,应该还是有质量不错的第三方教程的。英文好的建议阅读 Webpack 2.0 的文档,比起 1.0 有极大的改善,但需要注意和 1.0 的不兼容之处。
Vue 进阶阶段
- 在 node 和 webpack 基础上,可以通过vue-cli来搭建基于webpack,并且支持单文件组件的项目了。建议使用webpick-simple这个模板开始,并阅读官方教程进阶篇剩余的内容以及vue-router的文档,了解一些进阶配置。可以自己亲手从零开始搭一个项目加深理解。(1d)
- 根据 例子 尝试在 Webpack 模板基础上整合 vue-router 和 vuex。(1d)
- 深入理解 Virtual DOM 和『渲染函数 (Render Functions)』这一章节(可选择性使用 JSX),理解模板和渲染函数之间的对应关系,了解其使用方法和适用场景。(1d)
- 可选)根据需求,了解服务端渲染的使用(需要配合 Node 服务器开发的知识)。介绍一下服务端渲染的概念。nuxt集合了 vue-router 和 vuex、webpack的搭建套餐,有SEO需要的可以着重了解下, 并不是必须要学,这只是一种场景方案。
从头搭建一个服务端渲染的应用是相当复杂的。幸运的是,我们有一个优秀的社区项目 Nuxt.js 让这一切变得非常简单。Nuxt 是一个基于 Vue 生态的更高层的框架,为开发服务端渲染的 Vue 应用提供了极其便利的开发体验。更酷的是,你甚至可以用它来做为静态站生成器。推荐尝试。
-
阅读开源的 Vue 应用、组件、插件源码,自己尝试编写开源的 Vue 组件、插件。(2d)
-
vue各种属性和概念如何结合react 组件混合用,也有必要了解一下,它们有些方案是可以通用的,比如jsx语法、vue用redux等。(2d)