关于javascript:vue中使用Vant

Vant 官网
环境:vue/cli 4.5.11

1、装置

在 package.json 中查看 Vue 的版本，下载对应的版本
Vue2 的我的项目：npm i vant -S
Vue3 的我的项目：npm i vant@next -S

2、应用

2.1、首先在 main.js 中导入 css 和 vant
import 'vant/lib/index.css'

2.2、引入组件

法一：主动按需引入组件（举荐）
1. 装置插件
npm i babel-plugin-import -D
2. 配置 babel.config.js（webpack1 在 babelrc 增加配置，无需设置 libraryDirectory）

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

3. 在的 vue 组件中应用 vant 的组件，留神组件注册的形式

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

import {Button} from 'vant'

components: {[Button.name]: Button
}

法二：手动按需引入组件
1. 在在 main.js 中导入

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

2、在 vue 组件中应用不须要再次导入组件，间接用

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

法三：导入所有组件
1. 在 main.js 中导入

import Vant from 'vant';
Vue.use(Vant);

2. 在 vue 组件中应用不须要再次导入组件，间接用

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

留神：如曾经用法一在 babel.config.js 中设置了主动按需引入，则不能在 main.js 中如法三再次导入所有组件，否则会报错Uncaught ReferenceError: Vant is not defined