起步:
1 扎实的 JavaScript / html / CSS 基本功, ES6 最好过一遍
2 通读官方教程 (guide) 的基础篇不要用任何构建工具, 就只用最简单的 <script>, 把教程里的例子模仿一遍, 理解用法不推荐上来就直接用 vue-cli 构建项目, 尤其是如果没有 Node/webpack 基础
3 照着官网上的示例, 自己想一些类似的例子, 模仿着实现来练手, 加深理解
4. 阅读官方教程进阶篇的前半部分, 到自定义指令 (Custom Directive) 为止着重理解 Vue 的响应式机制和组件生命周期渲染函数 (Render Function) 如果理解吃力可以先跳过
5. 阅读教程里关于路由和状态管理的章节, 然后根据需要学习 vue-router 和 vuex 同样的, 先不要管构建工具, 以跟着文档里的例子理解用法为主
6. 走完基础文档后, 如果你对于基于 Node 的前端工程化不熟悉, 就需要补课了
补课:
7 学习命令行的使用建议用 Mac
8 学习 Node.js 基础了解 npm 的常用命令, npm scripts 如何使用, 语义化版本号规则, CommonJS 模块规范(了解它和 ES2015 Modules 的异同),Node 包的解析规则, 以及 Node 的常用 API 应当做到可以自己写一些基本的命令行程序
9 了解如何使用 / 配置 Babel 来将 ES2015 编译到 ES5 用于浏览器环境
10 学习 WebpackWebpack 是一个极其强大同时也复杂的工具, 作为起步, 理解它的一切皆模块的思想, 并基本了解其常用配置选项和 loader 的概念 / 使用方法即可, 比如如何搭配 Webpack 使用 Babel
进阶:
11 有了 Node 和 Webpack 的基础, 可以通过 vue-cli 来搭建基于 Webpack , 并且支持单文件组件的项目了建议用 webpack-simple 这个模板开始, 并阅读官方教程进阶篇剩余的内容以及 vue-loader 的文档, 了解一些进阶配置有兴趣的可以自己亲手从零开始搭一个项目加深理解
12 根据 例子 尝试在 Webpack 模板基础上整合 vue-router 和 vuex
13 深入理解 Virtual DOM 和渲染函数 (Render Functions)这一章节(可选择性使用 JSX), 理解模板和渲染函数之间的对应关系, 了解其使用方法和适用场景
14(可选)根据需求, 了解服务端渲染的使用 (需要配合 Node 服务器开发的知识) 其实更重要的是理解它所解决的问题并搞清楚你是否需要它
15 阅读开源的 Vue 应用组件插件源码, 自己尝试编写开源的 Vue 组件插件
16 参考 贡献指南 阅读 Vue 的源码, 理解内部实现细节(需要了解 Flow)
参考文档:
新手向: Vue 2.0 的建议学习顺序
vue 学习路径
来源: http://www.bubuko.com/infodetail-2516639.html