V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
terencehyz
V2EX  ›  问与答

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

  •  2
     
  •   terencehyz · 2017-03-05 13:29:56 +08:00 via iPhone · 17951 次点击
    这是一个创建于 2580 天前的主题,其中的信息可能已经有所发展或是发生改变。
    我目前的路径…
    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 (本科生二年级)不知道该继续看饿了么的视频、然后自己看文档来修改…还是应该怎么弄。
    第 1 条附言  ·  2017-03-06 01:00:51 +08:00
    感谢各位给出的建议。
    我自己也发现我的基础比较薄弱、决定先把基础搞定、然后按照帖子里朋友给出的建议再学习一下!
    22 条回复    2018-03-11 20:11:40 +08:00
    sox
        1
    sox  
       2017-03-05 13:34:08 +08:00 via Android   ❤️ 4
    构建问题用 http://cookingjs.github.io/zh-cn/index.html 然后专注写 app 🙃
    SuperMild
        2
    SuperMild  
       2017-03-05 13:38:35 +08:00
    学完第 1 步就可以开始写自己的 app 了,遇到问题再有针对性地学习。
    terencehyz
        3
    terencehyz  
    OP
       2017-03-05 13:40:50 +08:00 via iPhone
    @SuperMild 学完第一步自己写感觉就用到了双向数据绑定,写 app 的话不知道该怎么下手
    terencehyz
        4
    terencehyz  
    OP
       2017-03-05 13:41:05 +08:00 via iPhone
    @sox 下午看看这个😄
    Mbin
        5
    Mbin  
       2017-03-05 13:52:53 +08:00 via iPhone
    有基础的话只看官方文档就行了吧, github 开源项目那么多,随便找一个跟着敲一遍,还能不会?
    Rice
        6
    Rice  
       2017-03-05 14:02:06 +08:00
    vue.js 用起来超简单的……
    基本上只看官方文档就 OK 了。
    SuperMild
        7
    SuperMild  
       2017-03-05 14:06:33 +08:00
    @terencehyz 找些示例小程序敲一遍,注意理解它的理念。
    dong3580
        8
    dong3580  
       2017-03-05 15:36:32 +08:00
    熟悉 angularjs ,看了看 vue.js , 可以现学现卖了。
    youchoudeyu
        9
    youchoudeyu  
       2017-03-05 16:15:25 +08:00
    @dong3580 哈哈。我也是从 angular 转到 vue 学习的,的确会觉得浅很多。
    murmur
        10
    murmur  
       2017-03-05 16:16:22 +08:00
    vue 粉路过
    redux 真难理解,但是你用 vuex 发现这东西真 tm 好使,太好理解了

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

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

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

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

    @SuperMild 嗯嗯。😄

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

    @youchoudeyu 嗯呢,感谢建议。一直觉得实践一个项目比较容易掌握框架,这次实践的时候比较困难
    geek123
        20
    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
    alber1986
        21
    alber1986  
       2017-10-26 10:42:42 +08:00
    最全 vue 视频教程,我只能帮你到这了 http://www.sucaihuo.com/video/56.html
    geek123
        22
    geek123  
       2018-03-11 20:11:40 +08:00
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1184 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 18:16 · PVG 02:16 · LAX 11:16 · JFK 14:16
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.