在 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>
内容版权声明:除非注明,否则皆为本站原创文章。