• 安装
    • CDN 引入
      • 示例
    • NPM 安装

    安装

    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 作为构建工具，请继续阅读快速上手章节。