当前位置：首页 > news >正文

第三方组件库：element-uiiviewVant

news 来源：原创 2025/5/5 8:59:59

第三方组件库：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 = falselet 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 = falselet 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>