vue-cli中常用的ui框架(vant-ui篇)

## vant-ui 简介

       Vant 是有赞前端团队开源的移动端组件库，于 2017 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。

      目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本。    

## 使用步骤:

1. 安装:

       在现有项目中使用 Vant 时，可以通过 npm 或 yarn 进行安装：

# Vue 2 项目，安装 Vant 2：
npm i vant -S

# Vue 3 项目，安装 Vant 3：
npm i vant@next -S

2.引入组件 :

 ## 自动按需引入组件 (vant有三种引入方式,但我们最常用也是最推荐的方式就是自动按需引入组件 所以在这里我只写自动按需引入方式啦)

      自动按需引入组件时我们需要先下载一个插件 babel-plugin-import

# 安装插件
npm i babel-plugin-import -D

     babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。

    对于使用 babel7 的用户，可以在 babel.config.js 中配置（我们现在一般都是babel7用户）        

module.exports = {

          plugins: [

            ['import', {

              libraryName: 'vant',

              libraryDirectory: 'es',

              style: true

            }, 'vant']

          ]

        };

上述这段配置代码是官网上的配置代码,我们使用时只需将plugins属性及其内容复制添加到项目babel.config.js 配置文件中的module.export={}中就可以了.

3.使用:

    前面的组件下载及一些必须的配置就已经完成了,接下来就是我们最为关心的使用问题啦!

    使用的时候也有两种方式: (这里我们以vant中button组件为例)

    方式1:

    ## 引入： 使用哪个组件就引入那个组件（引入代码直接官网复制）

         eg：引入button组件  import { Button } from 'vant';  

    ## 注册：在需要使用组件页面的compontents中注册该组件：  

components: {

            "van-button":Button//注册名称不能随便起 需要看组件名称 

                               如主要按钮需起名为van-button才能正常使用

           }

    ## 使用：复制想要使用的按钮添加至组件页面中 ,如:

       主要按钮

   方式1我个人觉得很麻烦,，每个页面使用组件时都需引入和注册,所以推荐方式2方法使用组件.

  方式2:  在min.js中引入 (所有页面都可直接使用不用再注册) 推荐

         引入  在min.js中引入（以按钮组件为例）      

 //引入组件
import { Button } from 'vant';
//使用该组件
Vue.use(Button);

         使用: 直接在想要使用该组件的页面使用就ok啦,是不是比起第一种方式觉得很方便呢

    主要按钮

       这些是我在项目开发时总结的一些小知识,希望有帮助到各位,最后再附上vant官网地址,官网上的文档及API能够更好的帮助你使用vant-ui框架

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