04 在Vue项目中使用Vant组件库

关于vant

vant —— 轻量、可靠的移动端 Vue 组件库

安装

通过npm

npm i vant -S

或是通过Vue Cli 图形化界面

在依赖彩蛋中点击“安装依赖”.png
搜索有赞团队的vant并安装.png

引入

想实现按需引入组件，要先安装babel-plugin-import，一款 babel 插件。

npm i babel-plugin-import -D

同样也可以使用Vue Cli图形化界面，在此不再赘述。
然后在babel.config.js中添加以下内容

module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

使用

引入组件，使用组件

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