关于 Vue.js

简单小巧的核心(代码压缩后大小仅为 17KB),渐进式技术栈,足以应付任何规模的应用

vue-intro

书中简单的介绍现代 Web 开发中常见的高级功能,个人觉得不管是前端还是后端,技术不断更新和迭代的过程,都是包含了很多软件设计思想在里面,如何去解决高内聚,低耦合问题,如何在复杂的软件设计流程中,去写出易于维护的代码。还有一点比较重要的是,如何在快速迭代的软件开发周期内,去解放生产力。于是就会大量涌现很多优秀的开源框架和扩展库,去解决现实生活中的实际问题。

  • 解耦视图与数据
  • 可复用的组件
  • 前端路由
  • 状态管理
  • 虚拟 Dom

谈谈 Vue.js 在设计上使用 MVVM, 也就是 Model-View-ViewModel。作为在后端道路上工作几年的我来说,对于 MVC 可谓再熟悉不过了,对于 MVVM 作为 MVC 衍生出来的架构思想,独到之处便是 View 与 ViewModel 之间的数据双向绑定。这个时候我会想到在使用 PHP 框架构建 Web 项目的时候,控制器层从数据仓库中获取视图数据,并将数据绑定到指定模板上,通过 PHP 模板输出到浏览器中,往往我们在中间会加入一层 Presenter,类似 构建 Api 项目的 Transformer 层,当数据层发生更新时,对应的模板数据也会更新。

对于传统的前端开发模式,Jqeury + SeaJS 等,想想那些前端框架还未百花齐放的时候,,追加 Dom 节点,修改子节点,拼接 Dom 节点,移除 Dom 节点等一大串逻辑复杂且臃肿肥大的代码,随着项目的不断迭代,技术人员的逐步更换,项目越来越变得难以维护,视图代码和业务逻辑紧耦合在一起。但是现在下新的概念越来越多,ES6,前端工程化,NodeJS,NPM 等,越来越能体现出技术的革新之迅速。而这一切都是在朝着提高开发效率,降低维护成本而前进。

那么再回头看看 Vue.js,本身通过初次学习的时候,对于这种代码结构很熟悉,视图与数据的解耦恰恰能够让代码更加清晰,更加易于维护和扩展。

初步了解构建一个 Vue 项目,就像搭建一个 Laravel Web 项目一样,一个基本的思路的 Maybe

  • 结合实际需求,引入适合的第三方库
  • 配置文件构建
  • 项目路由命名
  • 项目部署和测试
  • 项目发布

那么发布一个 Vue 项目的基本思路也应该大致是

  • Vue-cli 脚手架初始化项目
  • 引入合适的前端工具库
  • 配置文件构建
  • 打包文件配置
  • Vuex 管理状态,vue-router 管理路由文件
  • 语法检查,项目部署和测试
  • 项目发布