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有多种引入方式,这里采用的是完整引入,比较方便初学者使用。