vant组件使用
先回忆vue安装脚手架步骤:
npm install vue-cli -g
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引入方式
- 全局引入
可以在工程目录下的src
文件目录中main.js
全局引入
引入组件
import Vant from 'vant'
引入组件中的css样式
import 'vant/lib/vant-css/index.css'
注册组件
Vue.use(vant)
- 按需引入
说明:全局引入是引入插件的所有文件,这样会使浏览器预览时变慢,所以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>