vant 的使用

一.vant 的安装

1.安装

简写形式：npm i vant -S
完整形式：npm install vant -save

2.按需引入

1.需要安装babel插件 --babel-plugin-import

指令:npm i babel-plugin-import -D (简写)
完整指令:npm install babel-plugin-import --save-dev

2.在babel.config.js中配置文件

// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

3.在main.js中引入即可在组建中使用

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

4.按需引入的封装如下

1.在main.js中引入如下

// 全局引入
import 'vant/lib/index.css';
// 按需引入UI库 vant
import '@/plugins/vant'

2.在src文件夹中创建如下文件夹

image.png

3.放置想要使用的文件

// 按需全局引入 vant组件
import Vue from 'vue'
// 导航栏
import { NavBar ,} from 'vant';
// 轮播
import { Swipe, SwipeItem } from 'vant';


Vue.use(NavBar);
Vue.use(Swipe);
Vue.use(SwipeItem);

3.全局引用

1.直接在main.js中直接引入如下

import Vant from   "vant"
import "van/lib/vant-css/index.css"
Vue.use(vant)

2.在需要的组建中直接引入然后使用

import { Button } from 'vant'
  
主要按钮