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

2017-03-05 13:29:56 +08:00
 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 (本科生二年级)不知道该继续看饿了么的视频、然后自己看文档来修改…还是应该怎么弄。
17970 次点击
所在节点    问与答
22 条回复
sox
2017-03-05 13:34:08 +08:00
构建问题用 http://cookingjs.github.io/zh-cn/index.html 然后专注写 app 🙃
SuperMild
2017-03-05 13:38:35 +08:00
学完第 1 步就可以开始写自己的 app 了,遇到问题再有针对性地学习。
terencehyz
2017-03-05 13:40:50 +08:00
@SuperMild 学完第一步自己写感觉就用到了双向数据绑定,写 app 的话不知道该怎么下手
terencehyz
2017-03-05 13:41:05 +08:00
@sox 下午看看这个😄
Mbin
2017-03-05 13:52:53 +08:00
有基础的话只看官方文档就行了吧, github 开源项目那么多,随便找一个跟着敲一遍,还能不会?
Rice
2017-03-05 14:02:06 +08:00
vue.js 用起来超简单的……
基本上只看官方文档就 OK 了。
SuperMild
2017-03-05 14:06:33 +08:00
@terencehyz 找些示例小程序敲一遍,注意理解它的理念。
dong3580
2017-03-05 15:36:32 +08:00
熟悉 angularjs ,看了看 vue.js , 可以现学现卖了。
youchoudeyu
2017-03-05 16:15:25 +08:00
@dong3580 哈哈。我也是从 angular 转到 vue 学习的,的确会觉得浅很多。
murmur
2017-03-05 16:16:22 +08:00
vue 粉路过
redux 真难理解,但是你用 vuex 发现这东西真 tm 好使,太好理解了

redux 在狂吹状态机, vuex 就告诉你,我能共享变量,我能把变量映射出来,至于这些变量干嘛你自己随便
youchoudeyu
2017-03-05 16:19:03 +08:00
@terencehyz 还是自己做一个东西出来比较好,个人博客啊或者普通的网站啊,用着用着你就理解为什么这样用了
terencehyz
2017-03-05 16:36:18 +08:00
@youchoudeyu 想数据库的大作业用 vue.js 写,之前用 angular.js 写过一个 app ,想用 vue 重写一遍,然后打包。但是现在最基础的都会了,看饿了么综合实例的时候,感觉心态爆炸。
主要现在自己写东西不知道从哪下手
terencehyz
2017-03-05 16:40:08 +08:00
@SuperMild 有推荐的么
Sapp
2017-03-05 16:53:40 +08:00
看了你的描述,和 vue 没关系,你还是补补基础吧,比如你说的最简单的 npm/yarn 、命令行报错解决方式、命令行基础操作。 vue 最简单的学习方法就是看官网,看一遍直接上手做做东西,这个框架入门真是不比 jQuery 难多少,压根不需要去看什么视频。
SuperMild
2017-03-05 16:59:38 +08:00
@terencehyz 一般官方示例就够用了。自己写东西建议不要想太多,直接写,比如数据库作业,就先写一个搜索框,做一个最最基本的搜索功能,成了之后再加一个“添加项目”功能,完了再加一个删除项目功能,就这样一点点搭起来,很快就会有头绪了。
sodatea
2017-03-05 17:59:11 +08:00
尤雨溪有说过建议的学习顺序的
https://zhuanlan.zhihu.com/p/23134551

你的问题是基础不牢
changwei
2017-03-05 19:10:57 +08:00
我以前也和楼主有一样的疑问。后来经过自己不断的上网查资料看别人博客看知乎专栏在 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
2017-03-05 19:45:42 +08:00
看了这么多还迷茫可能是和经验和基础有关?
terencehyz
2017-03-06 00:59:31 +08:00
@g0thic 和基础有一定关系,对于报错的解决、以及框架的使用方法和技巧等基础能力有欠缺

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

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

@SuperMild 嗯嗯。😄

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

@youchoudeyu 嗯呢,感谢建议。一直觉得实践一个项目比较容易掌握框架,这次实践的时候比较困难
geek123
2017-09-19 11:47:59 +08:00
网上有很多可以学的内容,我这里有 vue.js 入门、vue.js 提高、vuex、vue router、vue 工程化全系列的 vue 教程,希望能帮到你:

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

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/345052

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX