Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式。本文通过一个简单的实例开始上手Vue.js开发。

 

  一、技术准备

  使用传统mvc项目的开发人员,笔者建议在开始项目前,对以下两个技术点进行了解。

  1、 Vue.js基础知识 Vue.js特点就是入门简单,api 简洁一致,文档清晰。对于了解Html,CSS,JavaScript花几个小时看一遍,就能掌握基础的东西。 可参考http://www.runoob.com/vue2/vue-tutorial.html

  2、 ES6的模块化加载 有ES6中,可以不使用SeaJS或者RequireJS,而直接使用import和export在浏览器中导入和导出各个模块了, 具体使用参考http://www.cnblogs.com/diligenceday/p/5503777.html

 

  二、开发工具

  工欲善其事必先利其器,开发Vue项目建议使用“属于21世纪”的代码编辑器——Atom,它开源免费而且是跨平台的,基于 WEB 技术(Chromium+Node.js)开发的,简单理解的话编辑器本身其实是一个跑在本地的网页,用户可以用Javascript来编写编辑器插件,缺点就是基于WEB导致性能不是很理想,但这不影响笔者对它的爱,Atom好用,而且有大量的高亮提示,语法插件可使用 ,当然你也可以通过安装插件使用宇宙第一IDE-VisualStudio进行开发。使用Atom建议安装以下插件。

  1、minimap 让你了解当前屏幕所处相对位置,如下图App.Vue文件右侧所示