使用vantUI组件库进行移动端开发

//引入vant 组件库  主要针对移动端

/*

常规选择第一种引入方式，按需引入，需要安装插件

babel-plugin-import 

 页面中引入时 注意语法 

[Button.name]:Button

*/

实战。项目环境配置

vant 组件库 引入

实战（联系人列表增删改查功能）

一、安装vant组件库（https://youzan.github.io/vant/#/zh-CN/，它是移动端组件库，我们可以在快熟上手这一栏，找到安装的教程）

1、安装vant组件库

2、引入组件库（方式一：通过插件方式自动按需要进行自动引入，例如：import {Button} from 'vant',这种方式不需要引入样式，方式二：手动按需要引入，此种方式需要引入样式。方式三：导入所有组件，不推荐，导致项目压缩包变大，请求变慢），有点类似于element-ui

3、注册组件

<template>
  <van-button type="default">Default</van-button>
  <van-button type="primary">Primary</van-button></template><script>
  import {Button} from 'vant'
  
  export default {
    components: {
      [Button.name]: Button
    }
  }</script>

vant组件