Vue.js 新手学习指南

悠悠 2022-01-20 23:37 243阅读 0赞

### 起步 ###

1.  扎实的 JavaScript / HTML / CSS 基本功。这是前置条件。
2.  通读官方教程的基础篇。不要用任何构建工具，就只用最简单的 <script>，把教程里的例子模仿一遍，理解用法。
3.  照着官网上的示例，自己想一些类似的例子，模仿着实现来练手，加深理解。
4.  阅读官方教程进阶篇的前半部分，到『自定义指令 (Custom Directive) 』为止。着重理解 Vue 的响应式机制和组件生命周期。
5.  阅读教程里关于路由和状态管理的章节，然后根据需要学习 vue-router 和 vuex。
6.  走完基础文档后，如果你对于基于 Node 的前端工程化不熟悉，就需要补课了。下面这些严格来说并不是 Vue 本身的内容，也不涵盖所有的前端工程化知识，但对于大型的 Vue 工程是前置条件，也是合格的『前端工程师』应当具备的知识。

### 前端生态/工程化 ###

1.  了解 JavaScript 背后的规范，ECMAScript 的历史和目前的规范制定方式。学习 ES2015/16 的新特性，理解 ES2015 modules。
2.  学习命令行的使用。
3.  学习 Node.js 基础。可以借此巩固 ES2015。
4.  学习 Webpack。Webpack 是一个极其强大同时也复杂的工具，作为起步，理解它的『一切皆模块』的思想。

### Vue 进阶 ###

1.  有了 Node 和 Webpack 的基础，可以通过 vue-cli 来搭建基于 Webpack ，并且支持单文件组件的项目了
2.  尝试在 Webpack 模板基础上整合 vue-router 和 vuex
3.  深入理解 Virtual DOM 和『渲染函数 (Render Functions)』，理解模板和渲染函数之间的对应关系。
4.  （可选）根据需求，了解服务端渲染的使用（需要配合 Node 服务器开发的知识）。其实更重要的是理解它所解决的问题并搞清楚你是否需要它。
5.  阅读开源的 Vue 应用、组件、插件源码，自己尝试编写开源的 Vue 组件、插件。
6.  参考 贡献指南 阅读 Vue 的源码，理解内部实现细节。
7.  参与 Vue GitHub issue 的定位 -> 贡献 PR -> 加入核心团队 -> 升任 CTO -> 迎娶白富美...

原文：[https://zhuanlan.zhihu.com/p/23134551][https_zhuanlan.zhihu.com_p_23134551]

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 微信公众号：`web-7258`，本文由黄河爱浪整理转载，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[https_zhuanlan.zhihu.com_p_23134551]: https://zhuanlan.zhihu.com/p/23134551
[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20220121/d1058cf3edec4e03b48c7475ec8ad011.png