重新入门前端(1)

从Vue.js开始:这并不是我认识的JavaScript

Posted by Donggu Ho on 2017-03-11

就开始学Vue.js了,试图当个正经前端。

楔子

HTML/CSS/JavaScript 也算是入门了挺久了,一直拿着 Bootstrap/jQuery 大概搞搞页面也是有点不求上进,这和北大青鸟有什么区别(叹气)。而且真的写项目就会感受到前后端无法干净地分离的痛苦,前端写了个静态页面只能丢到后端慢慢改 JSP 也是太绝望了点……当然主要的驱动力来自于校招的开始,要写简历了才发现自己可以说是一无是处。 比专注后端同辈多会那么一点点美工和CSS知识,基本意味着不会前端。所以想从 Vue.js 开始,慢慢入门那些现代前端工程化中涌现出来的各种构建工具和脚手架。嘛虽然已经大三了不过学习什么的不嫌晚嘛_(:з」∠)_

技术选型方面,之所以选择 Vue.js 而不选择 ReactAngularJS,其实并没有什么特别的理由。一开始主要是得知 Vue 是国人开发的框架,想着中文文档支持方面必然相当不错;而且既然是后起之秀,那就肯定有比前辈更进步的地方。后来又在某乎被学习曲线平稳新手友好之类的说法所安利,就很随意地选择了这个框架进行学习。加上 Vue 最近仿佛又更加火了一些,就有种买涨不买跌读作跟风的感觉。

会慢慢写这篇Blog, 在这里放一些发现好用的插件啊什么的。

  • IDE: JetBrains WebStorm
  • 浏览器: Google Chrome

从单纯的 Vue.js 开始

Vue.js 是一个 MVVM 的框架(此处应庆幸学 WPF 的时候认真研读了一下相关资料……),View 和 Model 通过注册数据绑定就能够保证双向/单向的数据联动,比起在代码中手动修改UI以及用各种 listener 再进行一串串回调真是优雅简洁多了。

同时 Vue 体现了现代前端工程思想,即组件化。代码重复无论在什么环境下都是开发者很不友好的事情,Vue 的组件化以及各个组件就近维护的思想让工程目录相当清晰,易于维护。

虽然说着要入坑前端全家桶准备来个在 2016 年学 JavaScript 是一种什么样的体验?的2017版,不过还是一点点开始嘛。构建工具什么的先撇开不谈,从单纯的 Vue.js 开始学起。

假如不考虑 Webpack 等构建工具的话,Vue 的配置可以说是超级简单:只要在 HTML 中添加一句 cdn 引用即可。

1
2
<script src="//cdn.bootcss.com/vue/2.2.1/vue.js"></script>
<!-- 使用未压缩的 vue.js 以便在控制窗口查看调试信息 -->

添加好了引用,就已经可以愉快地开始学 Vue 了。至于教程,自然是 Vue 官方教程 最佳。既然找了国人开发的框架,自然要享受一下优秀的中文文档的福利啦。无论如何母语的阅读速度总是快的嘛。官方教程较为细致,虽说已经照顾了新手的能力,但是许多地方没有配套示例/使用场景的话真是让人学了就忘。还是要结合做项目才能上手运用。

用 Vue-router 实现单页应用的路由切换

Vue Router 是 Vue 生态下的一个重要的插件,由官方提供。意义在于现在流行的单页应用下的组件路由切换。文档简明使用方法清晰不能不学呀。
需要注意的是对应 Vue 1.0 和 Vue 2.0,Vue-router 两个版本有语法的较大变化。

VueX 进行状态管理

VueX是 Vue 生态下的状态管理模式。加粗了是因为我并看不懂。该插件主要应用于大型单页应用的状态共享管理,因此对新手而言并非必须。略。

辅助工具

教程

慕课网上面有一些相当不错的付费视频教程,工程经验能够带来非常简洁高效的组织方式。

  • Vue.js入门基础
    非常基础性的 Vue.js 教学,以一个 todo list 为案例演示和练习了 Vue 的各项基础特性和语法。

  • Vue.js高仿饿了么外卖App
    综合性教程。从需求分析脚手架搭建到代码编写以及代码迁移,完全就是业界专业玩法,非常进阶。

    网站

  1. IcoMoon
    图标字体在线生成。

  2. BootCDN
    各种各样的前端资源CDN服务,版本齐全搜索方便,直接生成html语句什么的。

Chrome 插件

  1. Allow-Control-Allow-Origin: *
    解决 Chrome 跨域请求报错的问题。方便用网上接口来调试静态页面。

  2. JSONView
    在 Chrome 浏览器中格式化查看 JSON 数据。调试 API 的时候比较方便,可以进行折叠,CSS 样式可调。

  3. Vue.js devtools
    写 Vue.js 不用这个插件可以说不是人了。用来调试和查看 Vue 的结构和代码,毕竟生出来的 HTML 源码已经不是你写的那个东西了【。

WebStorm 插件

  1. Vue.js
    解决.Vue文件的语法高亮语法检查问题。