vant 组件库的基本使用

vant组件库

该项目将使用到vant-ui组件库，这里的目标就是认识他，铺垫知识

1、什么是组件库

组件库：第三方封装好了很多很多的 组件，整合到一起 就是一个组件库。Vue的组件库并不是唯一的

vant组件库：https://youzan.github.io/vant-weapp/#/home

2、vant组件 全部导入 和 按需导入的区别

1. 全部导入：好处方便（占用性能、体积大）
2. 按需导入：好处体积小、性能比全部导入高（用什么导入什么）移动端推荐使用

3、全部导入的使用步骤：

① 安装

这里使用 yarn ：yarn add vant@latest-v2

② 导入注册组件

// 导入vant组件
import Vant from 'vant'
import 'vant/lib/index.css'

// 插件安装初始化（内部将所有的vant所有组件进行导入注册）
Vue.user(Vant)

③ 使用

    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" info="5" />
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button text="加入购物车" type="warning" />
      <van-goods-action-button text="立即购买" />
    </van-goods-action>

效果：

4、按需导入的使用步骤：

① 安装组件 （上面已安装）

这里使用 yarn ：yarn add vant@latest-v2

② 安装插件

yarn add bable-plugin-import -D

③ 在babel.config.js中配置

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

④ 按需加载，在main.js

import { Button, Icon } from 'vant'

Vue.use(Button)
Vue.use(Icon)

⑤ app.vue中进行测试

<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

5、封装vant文件包

把引入组件的步骤抽离到单独的js文件中比如 utils/vant-ui.js（方便维护）

import { Button, Icon } from 'vant'

Vue.use(Button)
Vue.use(Icon)

main.js中进行导入

// 导入按需导入的配置文件
import '@/utils/vant-ui'