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

根据不同的环境选择一个版本即可,至此第 1 步就搞定了。
下载 iView 系列文件
在 iView 官网的“组件” / “安装” 页面的开头处发现了这个链接:https://unpkg.com/iview/**,通过它可以查看到 dist** 目录:

必要文件都在这里,这些文件无法打包下载,我采取的笨办法是逐个点开,然后复制其中的内容。
在获取 iView 相关的 js 和 css 方面还有一个办法,仔细观察官网给出的 CDN 地址分别为:
http://unpkg.com/iview/dist/iview.min.js
http://unpkg.com/iview/dist/styles/iview.css
我尝试将它们放在浏览器里进行访问:

发现地址有变更,不过这并无大碍。
至此,将各个文件放在期望的位置即可:

该图中各文件的摆放并不是很严谨,大家按自己习惯来即可。
三、实例演练
完成以上的准备工作后,就可以结合 iView UI 来正式开发了,接下来基于 table 表格组件演示一下购物车的基本操作。
引入资源
经过起步工作的筹备,可以在新建页面中逐个地引入这些资源。
HTML head 部分
<head>
<meta charset="UTF-8">
<title>购物车实例</title>
<link rel="stylesheet" href="iViewContent/iview.2.7.0.css" rel="external nofollow" >
<script src="utility_js/vue.min.2.5.3.js"></script>
<script src="utility_js/iview.min.2.7.0.js"></script>
<script src="iViewContent/locale/zh-CN.js"></script>
<script>
iview.lang('zh-CN');
</script>
</head>
按一贯的方式引用,样式居前,随后紧跟着 vue.js 和 iView.js,以及 iView 中文语言包 zh-CN.js,然后立即调用 lang 方法使其生效。
绑定数据
首先把数据绑定起来,从而看一看整体效果,至于其他的行为操作先不管:

HTML body 部分
<body>
<div id="app">
<i-table id="datatable1"
size="small"
:columns="columns"
:data="cartList"
stripe
highlight-row>
</i-table>
</div>
<script src="iViewUI_cart.js"></script>
</body>
内容版权声明:除非注明,否则皆为本站原创文章。
