安装

CDN 引入

通过 unpkg.com/view-design可以看到 View UI 最新版本的资源，也可以切换版本选择需要的资源，在页面上引入 js 和 css 文件即可开始使用：

  1. <!-- import Vue.js -->
  2. <script src="//vuejs.org/js/vue.min.js"></script>
  3. <!-- import stylesheet -->
  4. <link rel="stylesheet" href="//unpkg.com/view-design/dist/styles/iview.css">
  5. <!-- import iView -->
  6. <script src="//unpkg.com/view-design/dist/iview.min.js"></script>

示例

通过 CDN 可以快速使用 View UI 写出一个示例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>ViewUI example</title>
  6.     <link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css">
  7.     <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
  8.     <script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script>
  9. </head>
  10. <body>
  11. <div id="app">
  12.     <i-button @click="show">Click me!</i-button>
  13.     <Modal v-model="visible" title="Welcome">Welcome to ViewUI</Modal>
  14. </div>
  15. <script>
  16.     new Vue({
  17.         el: '#app',
  18.         data: {
  19.             visible: false
  20.         },
  21.         methods: {
  22.             show: function () {
  23.                 this.visible = true;
  24.             }
  25.         }
  26.     })
  27.   </script>
  28. </body>
  29. </html>

NPM 安装

推荐使用 npm 来安装，享受生态圈和工具带来的便利，更好地和 webpack 配合使用，当然，我们也推荐使用 ES2015。

  1. $ npm install view-design --save

如果您使用了 NPM 安装，并使用 webpack 作为构建工具，请继续阅读快速上手章节。