学习 vue.js 的正确方法到底是什么

[terencehyz]

我目前的路径…
1. vue.js 的官方文档
http://cn.vuejs.org/v2/guide
把基础部分都看了、并且示例代码也跟着敲了。下面的进阶部分看不太懂大致看了一下。

2. 慕课网上的所有基础视频，跟着敲了一遍。看完发现其实就是官方文档的基础内容

3. 下载别人写好的项目。运行完 npm install 、 npm run dev 会报各种错误…自己不会 debug …会有版本的问题

4. b 站上“台湾小凡”录制的 vue-cli 的视频…这个视频可能是台湾口音…说话太慢…调快速度又听不清…基本没用

5. 慕课网上的付费视频，饿了么实战（某群里共享的）看这个的时候总是出现各种问题、大部分是因为版本不同、导致使用方法什么的都发生了变化、处于不停的找问题（现在看了一半…感觉要看不下去了）。


所以现在很迷茫…到底该怎么学…学 vue 想写 webapp 以及数据库作业想用 vue.js （本科生二年级）不知道该继续看饿了么的视频、然后自己看文档来修改…还是应该怎么弄。

感谢各位给出的建议。
我自己也发现我的基础比较薄弱、决定先把基础搞定、然后按照帖子里朋友给出的建议再学习一下！

[sox]

构建问题用 http://cookingjs.github.io/zh-cn/index.html 然后专注写 app 🙃

[SuperMild]

学完第 1 步就可以开始写自己的 app 了，遇到问题再有针对性地学习。

[terencehyz]

@SuperMild 学完第一步自己写感觉就用到了双向数据绑定，写 app 的话不知道该怎么下手

[terencehyz]

@sox 下午看看这个😄

[Mbin]

有基础的话只看官方文档就行了吧， github 开源项目那么多，随便找一个跟着敲一遍，还能不会？

[Rice]

vue.js 用起来超简单的……
基本上只看官方文档就 OK 了。

[SuperMild]

@terencehyz 找些示例小程序敲一遍，注意理解它的理念。

[dong3580]

熟悉 angularjs ，看了看 vue.js , 可以现学现卖了。

[youchoudeyu]

@dong3580 哈哈。我也是从 angular 转到 vue 学习的，的确会觉得浅很多。

[murmur]

vue 粉路过
redux 真难理解，但是你用 vuex 发现这东西真 tm 好使，太好理解了

redux 在狂吹状态机， vuex 就告诉你，我能共享变量，我能把变量映射出来，至于这些变量干嘛你自己随便

[youchoudeyu]

@terencehyz 还是自己做一个东西出来比较好，个人博客啊或者普通的网站啊，用着用着你就理解为什么这样用了

[terencehyz]

@youchoudeyu 想数据库的大作业用 vue.js 写，之前用 angular.js 写过一个 app ，想用 vue 重写一遍，然后打包。但是现在最基础的都会了，看饿了么综合实例的时候，感觉心态爆炸。
主要现在自己写东西不知道从哪下手

[terencehyz]

@SuperMild 有推荐的么

[Sapp]

看了你的描述，和 vue 没关系，你还是补补基础吧，比如你说的最简单的 npm/yarn 、命令行报错解决方式、命令行基础操作。 vue 最简单的学习方法就是看官网，看一遍直接上手做做东西，这个框架入门真是不比 jQuery 难多少，压根不需要去看什么视频。

[SuperMild]

@terencehyz 一般官方示例就够用了。自己写东西建议不要想太多，直接写，比如数据库作业，就先写一个搜索框，做一个最最基本的搜索功能，成了之后再加一个“添加项目”功能，完了再加一个删除项目功能，就这样一点点搭起来，很快就会有头绪了。

[sodatea]

尤雨溪有说过建议的学习顺序的
https://zhuanlan.zhihu.com/p/23134551

你的问题是基础不牢

[changwei]

我以前也和楼主有一样的疑问。后来经过自己不断的上网查资料看别人博客看知乎专栏在 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 以及各种群提问，问他们这个词什么意思，在哪些情况下会用到等等，用这种伸手党的方式学习其实还是很快的。

这就是我的学习路线，楼主可以参考参考，当然也可以交个朋友，我也大二，现在也在用它做毕业项目。

[g0thic]

看了这么多还迷茫可能是和经验和基础有关？

[terencehyz]

@g0thic 和基础有一定关系，对于报错的解决、以及框架的使用方法和技巧等基础能力有欠缺

@changwei 非常感谢你的回答☺️。会根据你的学习路线看看我哪里还有欠缺并学习。加你马化腾啦～

@sodatea 确实一些基础的工具不太清楚

@SuperMild 嗯嗯。😄

@Sapp 决定最近会看看基础、然后按照帖子里朋友给出的建议试一下

@youchoudeyu 嗯呢，感谢建议。一直觉得实践一个项目比较容易掌握框架，这次实践的时候比较困难

[geek123]

网上有很多可以学的内容，我这里有 vue.js 入门、vue.js 提高、vuex、vue router、vue 工程化全系列的 vue 教程，希望能帮到你：

http://www.hubwiz.com/course/?type=vue&ch=v2ex

[alber1986]

最全 vue 视频教程，我只能帮你到这了 http://www.sucaihuo.com/video/56.html

[geek123]

推荐 Vue.js 的入门级全家桶教程：

1.vue.js 入门与提高 http://xc.hubwiz.com/course/592ee9b2b343f27b0ae1ba99?affid=v2ex20180311

2.vuex 2 入门与提高 http://xc.hubwiz.com/course/597d463fff52d0da7e3e397a?affid=v2ex20180311

3.vue-router 入门与提高 http://xc.hubwiz.com/course/5983d3aeff52d0da7e3e3d50?affid=v2ex20180311

4.vue.js 工程化实践 http://xc.hubwiz.com/course/598bad66c7fd1d49453979c9?affid=v2ex20180311