Vue.js 之 iView UI 框架非工程化实践分享

Vue.js 之 iView UI 框架非工程化实践分享
​Vue.js 是美籍华人尤雨溪创作的，那会儿他还在 Google 工作，他自感 Angular.js 繁杂，进而自创了更为简洁易用的 Vue.js。本文我们主要和大家分享Vue.js 之 iView UI 框架非工程化实践，希望能帮助到大家。

vue.js 是美籍华人尤雨溪创作的，那会儿他还在 google 工作，他自感 angular.js 繁杂，进而自创了更为简洁易用的 vue.js。本文我们主要和大家分享vue.js 之 iview ui 框架非工程化实践，希望能帮助到大家。

iView UI 是由 90 后梁灏[hào]创作，网名 Aresn，在大数据公司 TalkingData 负责可视化基础架构，更了不起的是他还出了《Vue.js实战》一书，我是在“双十一”的前一天买的，行文措词简洁，表意直达困惑，入门很迅速，是我喜欢的风格。花了一周时间扫完了前十二章内容，用 WebStorm 练习了大部分实例，尽管书中用一整章内容介绍了 webpack 工程化构建方案，但由于我惯性使然，还是选择对其跳过而使用了非工程化方式来体验 Vue.js，其实多少有失暴殄。无奈，毕竟才学了一周，后期时间充裕了再接着分享工程化构建的学习心得吧。

一、 MVVM 模式

Vue.js 比较显著的特征是解耦了视图和数据，也就是说视图的变化不再需要命令式编程去显式改变，只要修改完数据就能立即自动同步，这是比较大的一个思维模式的转变，另一个就是组件化思维俯首皆是，这样开发一个应用就相当是在搭积木。

其实以上对 Vue.js 所阐述的优点也正是 MVVM 模式的写照，它原是由 MVC 所衍生，即当视图层发生变化时，会自动更新到视图模型上，反之亦然，这就是常说的双向绑定，上一张图吧：

甭管这图是否好理解，通俗地来讲，MVVM 这种模式拆分了视图和数据，这样我们在开发时只要关心数据本身即可，然后视图 DOM 这方面会由 Vue.js 自动解决。

二、非工程化起步

为了能支撑起一个最基本的应用，需要引入以下几个必要文件：

vue.min.2.5.3.js，vue.js 库

iview.2.7.0.css，iView 样式文件

iview.min.2.7.0.js，iView 库

iview /locale/zh-CN.js 语言包

iview /font 字体包

下载 Vue.js

来到 Github 上的 Vue 项目，直接下载 Zip 源码：

在 dist 目录中就可以找到 vue.js 文件：

根据不同的环境选择一个版本即可，至此第 1 步就搞定了。

下载 iView 系列文件

在 iView 官网的“组件” / “安装” 页面的开头处发现了这个链接：https://unpkg.com/iview/**，通过它可以查看到 dist** 目录：

必要文件都在这里，这些文件无法打包下载，我采取的笨办法是逐个点开，然后复制其中的内容。

在获取 iView 相关的 js 和 css 方面还有一个办法，仔细观察官网给出的 CDN 地址分别为：

http://unpkg.com/iview/dist/iview.min.jshttp://unpkg.com/iview/dist/styles/iview.css

我尝试将它们放在浏览器里进行访问：

发现地址有变更，不过这并无大碍。

至此，将各个文件放在期望的位置即可：

该图中各文件的摆放并不是很严谨，大家按自己习惯来即可。

三、实例演练

完成以上的准备工作后，就可以结合 iView UI 来正式开发了，接下来基于 table 表格组件演示一下购物车的基本操作。

引入资源

经过起步工作的筹备，可以在新建页面中逐个地引入这些资源。

HTML head 部分

 <meta> <title>购物车实例</title> <link> <script></script> <script></script> <script></script> <script> iview.lang(&#39;zh-CN&#39;); </script>