vant的安装和引入

Vant ( ˈvænt ) 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。 通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。 目前已有近50个组件，这些组件被广泛使用于有赞的各个移动端业务中。 如果你需要开发一个移动商城，用 Vant 就再合适不过了。 npm i vant -S ：这是简写形式。 npm install vant --save :这是完整写法。 如果你网络很慢的话，可以使用淘宝的源，但是不建议使用cnpm来进行安装。 安装好vant后，可以使用以前常用的方法进行引入-这是一种全局引入的方式。 直接在src/main.js进行全局引入。

特性

• 60+ 高质量组件
• 95% 单元测试覆盖率
• 完善的中英文文档和示例
• 支持按需引入
• 支持主题定制
• 支持国际化
• 支持 TS
• 支持 SSR

建议搭配 webpack，babel 使用 Vant，这样可以使用 webpack 提供的丰富插件和个性化配置。Vant 支持了 babel-plugin-import，通过 babel 插件使用 Vant，可以优化代码体积，提高前端性能。

安装

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

按需引入

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

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

在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']
  ]
};

在main.js中引入即可在组建中使用   【跟element很像】

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

全局引用

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

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

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

import { Button } from 'vant'
  
<van-button type="primary">主要按钮</van-button>