第三方组件库：element-ui&iview&Vant

第三方组件库：element-ui

使用方法：
1.引入样式

<!-- 引入element-ui样式 -->
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css">

2.引入vue

<!-- 引入Vue -->
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>

3.引入element-ui组件库

//注意：第三方组件库，必须在Vue的下面引入
 <!-- 引入element-ui组件库 -->
    <script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script>

4.找想要的样式组件
https://iview.github.io/docs/guide/install

5.复制代码到对应的.vue文件

6.修改对应的数据

<div id='app'>
        <template>
            <!-- 因为template里面只能有一个根元素，官方这里拷过来以后在外面加了一层div标签包起来 -->
            <div>
                <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
            </div>  
          </template>
    </div>

<script src='https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js'></script>
    <script>
        Vue.config.productionTip = false
        let vm = new Vue({
            el: '#app',
            data() {
                return {
                  //修改相应的数据
                    num: 1
                };
            },
            computed: {},
            watch: {},
            methods: {},
            created() { },
            mounted() { },
        })
    </script>

第三方组件库：iview
使用方法：
1.引入样式

<!-- 引入element-ui样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

2.引入vue

<!-- 引入Vue -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>

3.引入element-ui组件库

//注意：第三方组件库，必须在Vue的下面引入
 <!-- 引入element-ui组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

4.找想要的样式组件
https://element.eleme.io/#/zh-CN/component/installation

5.复制代码到对应的.vue文件

6.修改对应的数据

<div id='app'>
        <template>
            <!-- 因为template里面只能有一个根元素，官方这里拷过来以后在外面加了一层div标签包起来 -->
            <div>
                <!-- <Input v-model="value" placeholder="请输入..." style="width: 300px"></Input> -->
                <!-- 注意：非 template/render 模式下，需使用 i-input -->
                <i-input v-model="value" placeholder="请输入..." style="width: 300px"></Input>
            </div>
            
        </template>
    </div>

<!-- 引入Vue -->
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <!-- 引入iview -->
    <script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script>
    <script>
        Vue.config.productionTip = false
        let vm = new Vue({
            el: '#app',
            components: {},
            data() {
                return {
                    value: ''
                };
            },
            computed: {},
            watch: {},
            methods: {},
            created() { },
            mounted() { },
        })

    </script>

第三方组件库：Vant
使用方法：
1.引入样式

<!-- 引入样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />

2.引入vue

<!-- 引入Vue -->
     <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>

3.引入vant组件库

//注意：第三方组件库，必须在Vue的下面引入
 <!-- 引入vant组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>

4.找想要的样式组件
https://youzan.github.io/vant-weapp/#/home

5.复制代码到对应的.vue文件

6.修改对应的数据

<div id="app">
        <van-button type="primary">主要按钮</van-button>
        <van-cell-group>
            <van-cell title="单元格" value="内容" />
            <van-cell title="单元格" value="内容" label="描述信息" />
        </van-cell-group>
        <van-cell-group>
            <van-field v-model="value" label="文本" placeholder="请输入用户名" />
        </van-cell-group>
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    value:'123'
                }
            },
        })
    </script>