全局引入
1. 首先安装vant
npm i vant
2. 在main.js文件中引入并注册
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. 开始使用
<van-button type="success">成功按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
基础用法
1. 首先安装vant
npm i vant
2. 在main.js文件中引入并注册
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. 开始使用
按需引入
1. 首先安装vant
npm i vant
2. 安装插件
npm i unplugin-vue-components -D
3. 配置插件,基于 vue-cli
的项目,在 babel.config.js 中配置
module.exports = {
presets: ['@vue/cli-plugin-babel/preset'],
plugins: [
[
'import',
{
libraryName: 'vant',
libraryDirectory: 'es',
style: true,
},
],
],
}
4. 在src下创建个config的文件夹,再创建个vant.config.js文件
// 需要那个,引入那个
import { Button } from 'vant'
export function vant(app) {
// 别忘了注册
app.use(Button)
}
5. 在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. 开始使用
<van-button type="primary">1111</van-button>
原文链接:https://blog.csdn.net/qq_52845451/article/details/126578584
此处评论已关闭