最简单的Vue.js入门方法

最近花了几天看了下vue, 确实vue相对于其他两大前端框架来说,学习成本会低很多。 文档、社区、资料都很完善。下面是我觉得还不错的学习路径,希望对你有帮助。

传统的前端项目开发最大的问题是没法工程化模块化。 css跟js(es6之前)本身不支持模块化开发,也就导致了代码文件没法按功能拆分、组合、压缩优化,这在大型项目的开发上制造了很多麻烦。另外在大前端日趋火热的当下,为了写一次接口能适配到不同端(PC、wap、android、ios、桌面应用、小程序.etc),前后端分离也是必不可少。基于以上原因,使用一款成熟的前端框架,对于前端项目开发来说是很有必要的,能很大的提高生产力。

如果你对前端工程化不慎了解的话建议先看看这篇文章: 前端工程化

Ok,在明白了前端框架的必要性后,我们就要开始学习vue.js了。

学习vue.js的前提是掌握了 html/js/css,这块应该没什么难度,大家很容易就能掌握。
接下来需要掌握ES6, 这是大前提一定要懂,一定要懂,一定要懂, 推荐阅读阮一峰的 ES6入门
接着你需要去了解一下webpack, 推荐阅读这篇 入门 Webpack,看这篇就够了

在了解es6跟webpack之后,就可以正式进入我们的vue.js学习之旅了。
首先通读一下官网的教程官方教程, 看的期间要跟着敲代码。 官方教程的内容还是蛮多的,有些内容也不是很好理解。所以看不懂就跳过。 这一步我们只要知道vue有什么功能就行了。
看完了之后,再去看一下 Vue Router, 路由这个功能开发中也是必要的。
最后再看下Vue CLI, 正式开发的时候我们都是用这个工具来构建项目。

OK,官方教程看完,我相信你还是很迷,到底怎么使用vue去开发一个项目,心里还是没底。 没关系,接下来我们就找找视频教程实战,练练手。
视频的话可以到腾讯课堂上面看(我发现这里有免费的实战视频,其他地方好像都收费。)
我这里推荐个视频 Vue实战-景点介绍小应用,通过这个视频你基本能明白怎么样使用vue、vue-cli、vue-router去开发一个项目。

恭喜你,做完以上操作,估计几天也过去了, 你也算入门vue了。 接下来呢,你可以以视频+github案例的方式继续深入学习Vue.js。
这里我推荐个不错的demo vue2-elm

PS:本文为什么没提及vuex, 是因为vuex对入门来说不是必要的。

    原文作者:前端
    原文地址: https://segmentfault.com/a/1190000018574802
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞