Vue移动端开发Vant组件库的介绍和应用

Vant

1. 介绍

  • Vue移动组件库 => Vant【有赞】 => 更新维护快
  • Vue PC组件 => element-ui【饿了么】 => 更新维护快

vant官方网站: https://youzan.github.io/vant/#/zh-CN/

其他常用的Vue移动端开发UI组件库:

  1. Mint-UI
  2. cube-ui
  3. Vux

注意: 实际开发时用什么组件库不一定。

2. 安装-引入使用

  • 在项目中引入vant组件库

步骤

  1. 安装:

    npm i vant
    
  2. 完整引入(main.js):

    import Vue from 'vue'
    // 引入vant
    import Vant from 'vant'
    // 引入vant相关css样式
    import 'vant/lib/index.css'
    
    // 注册
    Vue.use(Vant)
    
  3. 测试组件(App.vue),使用vant组件:

    <template>
      <div id="app">
        <h2>App根组件</h2>
        <van-button type="default">默认按钮</van-button>
        <van-button type="primary">主要按钮</van-button>
        <van-button type="info">信息按钮</van-button>
        <van-button type="warning">警告按钮</van-button>
        <van-button type="danger">危险按钮</van-button>
        <router-view></router-view>
      </div>
    </template>
    

效果

在这里插入图片描述

注意:

​ vant有多种引入方式,这里采用的是完整引入,比较方便初学者使用。

已标记关键词 清除标记
相关推荐
<span style="color:#666666;font-size:14px;background-color:#FFFFFF;">VUE是目前最火的前框架之一,就业薪资很高,本课程教您如何快速学会VUE应用到实战,教你如何解决内存泄漏,常用UI的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习VUE高薪就业的你来说,那么这门课程便是你手中的葵花宝典。</span><br /> <br /> <span style="color:#666666;font-size:14px;background-color:#FFFFFF;">学习技巧:学习当中不要只看,一定要多敲代码,如果碰到某一个知识点不是很明白,不要钻牛角尖,千万不要因为一个点,放弃整个森林,接着往下学,硬着头皮开发项目只要能亲自开发一个完整的项目,你会发现不明白的地方自然而然就明白了,项目做出来就真正的学会了。</span><br /> <br /> <span style="color:#666666;font-size:14px;background-color:#FFFFFF;">此vue课程以面试和实战为基础进行讲解,每个知识点都会让你知道在实际项目开发中如何使用,学习后,可以开发大型项目,增强逻辑思维,至少让你拥有3年以上开发经验的实力!</span><br /> <br /> <span style="color:#666666;font-size:14px;background-color:#FFFFFF;">代码和ppt均可下载!</span><br /> <br /> <p> <span style="color:#666666;font-size:14px;background-color:#FFFFFF;">免费提供《企业级完整实战项目接口文档》,绝对可用。</span> </p> <p> <img src="https://img-bss.csdn.net/202001090736032736.png" alt="" /><img src="https://img-bss.csdn.net/202001090736166806.png" alt="" /><img src="https://img-bss.csdn.net/202001090736273968.png" alt="" /> </p> <p> <br /> </p> <p> <br /> </p>
©️2020 CSDN 皮肤主题: 我行我“速” 设计师:Amelia_0503 返回首页