Vue Vant组件库使用

vant组件使用

先回忆vue安装脚手架步骤：

1. npm install vue-cli -g
2. vue init webpack

vant安装

简写形式：npm i vant -S
完整形式：npm install vant -save
注意：如果网速慢的情况下可以使用淘宝镜像安装，不建议使用cnpm
命令行：npm install vant --save --registry=https://registry.npm.taobao.org、

说明：如果安装成功可以在node-model中看到vant文件目录

vant引入方式

1. 全局引入
   可以在工程目录下的src文件目录中main.js全局引入

引入组件

import Vant from 'vant'

引入组件中的css样式

import 'vant/lib/vant-css/index.css'

注册组件

Vue.use(vant)

2. 按需引入

说明：全局引入是引入插件的所有文件，这样会使浏览器预览时变慢，所以vant是支持babel-plugin-import引入的，它可以让我们按需引入组件模块，并且不用管理我们的样式，现在Vue项目组件库的主流引入方法。

安装babel-plugin-import

 npm i babel-plugin-import -D

也可以以完整命令安装：

npm install babel-plugin-import --save-dev

安装完成之后在.babelrc文件中配置plugins（插件）

"plugins": [
    "transform-vue-jsx", 
    "transform-runtime",
    ["import",{"libraryName":"vant","style":true}]
  ]

这样就可以在src目录下的main.js中按需引入组件了
例如：

import { Button } from 'vant'
Vue.use(Button)

引入完成之后就可以在需要的组件页面中加入Button了

<van-button type="primary">主要按钮</van-button>