Global introduction
1. First install vant
npm i vant
2. Introduce and register in main.js file
import { createApp } from 'vue'
import App from './App.vue'
// 1. 引入Vant
import Vant from 'vant'
// 2. 引入组件样式
import 'vant/lib/index.css'
const app = createApp(App)
// 3. 注册Vant为全局
app.use(Vant)
app.mount('#app')
3. Get started
<van-button type="success">成功按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
Basic usage
1. First install vant
npm i vant
2. Introduce and register in main.js file
import { createApp } from 'vue'
import App from './App.vue'
// 1. 引入你需要的组件
import { Button } from 'vant'
// 2. 引入组件样式
import 'vant/lib/index.css'
const app = createApp(App)
// 3. 注册你需要的组件
app.use(Button)
app.mount('#app')
3. Get started
Introduce on demand
1. First install vant
npm i vant
2. Install the plug-in
npm i unplugin-vue-components -D
3. Configure the plug-in, based on vue-cli
the project, configured in babel.config.js
module.exports = {
presets: ['@vue/cli-plugin-babel/preset'],
plugins: [
[
'import',
{
libraryName: 'vant',
libraryDirectory: 'es',
style: true,
},
],
],
}
4. Create a config folder under src, and then create a vant.config.js file
// 需要那个,引入那个
import { Button } from 'vant'
export function vant(app) {
// 别忘了注册
app.use(Button)
}
5. Import in main.js
import { createApp } from 'vue'
import App from './App.vue'
import { vant } from '@/config/vant.config.js'
import 'vant/lib/index.css'
const app = createApp(App)
vant(app)
app.mount('#app')
6. Get started
<van-button type="primary">1111</van-button>