JSFiddle - React, Tailwind, and code Playground

by lin zhou

HTML

<!-- 引入样式 -->
<link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">

<!-- 引入Vue -->
<script src="//unpkg.com/vue"></script>

<!-- 引入Vue路由 -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<!-- 引入组件库 -->
<script src="//unpkg.com/iview/dist/iview.min.js"></script>

<div id="app">
    <i-button @click="show">Click me!</i-button>
    <Modal v-model="visible" title="Welcome">欢迎使用 iView</Modal>
</div>

<div id="app1">
  <p>
    <router-link to="/foo">Foo</router-link>
    <router-link to="/bar">Bar</router-link>
  </p>
  <router-view></router-view>
</div>

CSS

#app{
  margin-left: 10px;
  margin-top: 10px;
}

#app1{
  margin:12px;  
}

p{
  display:inline-block;
  font-size:14px;
}

JavaScript

//iview 的使用
 new Vue({
        el: '#app',
        data: {
            visible: false
        },
        methods: {
            show: function () {
                this.visible = true;
            }
        }
    })
    
  // vue 模板的使用 https://router.vuejs.org/zh-cn/essentials/getting-started.html
   const FOO = {template:'<div>foo</div>'};
   const BAR = {template:'<div>bar</div>'};
   const ROUTERS = [{path:'/foo', component:FOO},
    								{path:'/bar', component:BAR}];
                    
   const router = new VueRouter({
    	'routes':ROUTERS
    });
    
 new Vue({
    	router
    }).$mount('#app1');