我以前也和楼主有一样的疑问。后来经过自己不断的上网查资料看别人博客看知乎专栏在
sf.gg 上提问终于明白了这个大杂烩。
首先官方文档的入门基础部分使用的是直接 script 标签引入 vue 源码的方式进行编码,这样的话就无需考虑前端构建,模块化, ES6 , CSS 预处理器等部分。所以初期就先专注学习 vue.js 的基本语法,把他当作一个纯前端模版引擎来用。
前端模版引擎这一个阶段过去了之后,就开始了解组件化开发,仍然不要用构建工具和 vue-cli 之类的工具,而是直接在页面中写组件。然后在组件开发里面会涉及到很多之前从未见过的名词。比如说异步组件这是为了解决大型 SPA 中按需加载组件,防止加载大量首屏用不到的组件导致首屏显示时间过长,或者消耗大量流量和服务器带宽。还有 slot ,这是解决组件嵌套问题,因为你在公司开发大型 SPA 的时候不一定是你一个人在战斗,所以你要考虑到把 SPA 拆分成各种小组件,给不同的同事开发,通过 slot 的方式留坑,让别人开发的组件来占这个坑。至于状态管理,什么父子组建通信,组件变量作用域等等,这又涉及到了另一个学问——状态管理。我觉得这一步对于像我这种之前从未开发过原生 APP 以及大型网站项目的人是非常难跨越的,因为一是没有相关经验,所以很多这些专有名词产生的原因你根本不了解,你连为什么要用他都无法理解,当然就很难懂了。并且之前都是用 jquery ,在 jq 里面,状态都是直接表现在 html 标签里面,也就是所谓的状态耦合在 dom 视图中, jquery 开发的 dom 操作其实就是状态的修改, vue.js 则是将状态和 dom 做一个绑定,然后状态单独写在 vuex 的 state 或者 vue 实例的 data 里面,通过操作状态,让 vue 自动把状态的修改同步到 dom 上。所以需要有一种前瞻性的思维和想象力,想象成这一个项目是由多个“你自己”在开发,模拟在公司中有项目小组和你一起开发,并且你是在开发一个原生 APP 或者桌面程序一样。
接下来官方文档讲的是深入响应式原理,讲的主要是 vue.js 源码级别上是如何实现双向绑定等等,这个就需要对 JavaScript 非常了解,如果你现阶段只是满足能做出成品,或者毕业设计这种 demo 级别的作品,可以稍作了解,不需要完全看懂。包括什么动画, SSR 这些都不用管太多,可以后面再慢慢学。现阶段你应该重点了解一下怎么用 Webpack 和 vue-cli , Webpack 对常用的配置项要做一定了解,能看懂别人项目中 Webpack 配置文件就算可以了。 vue-cli 则是帮你自动化写了一个 Webpack 配置文件的模版,你可以自己改也可以不用改就用它默认的,用来给你你做毕业设计之类的就足够了。
接着就是前端路由, vuex 状态管理, axios 与后端交互数据等等都是各种百度查资料查文档查案例学会的, vue-route 和 vuex 又是一门学问,新手阅读肯定会遇到很多坑,尤其是 vuex ,里面同样涉及到了太多的专业术语,这些术语百度到的文章也是晦涩难懂,所以我当初都是在
sf.gg 以及各种群提问,问他们这个词什么意思,在哪些情况下会用到等等,用这种伸手党的方式学习其实还是很快的。
这就是我的学习路线,楼主可以参考参考,当然也可以交个朋友,我也大二,现在也在用它做毕业项目。