在你的VUE3.0项目中使用Vant框架
2020-12-10 本文已影响0人
木羽木羽女口生
如果你想在你的Vue3.0项目中使用Vant框架,那么你必须安装对应版本的Vant
npm
# Install vant 2.x for Vue 2 project
npm i vant -S
# Install vant 3.x for Vue 3 project
npm i vant@next -S
如果你在Vue3.0下使用的是npm i vant -S这个命令去安装,就会报错
安装完成之后你就需要在你的babel.comfig.js中做修改(这一步存在争议,貌似注释了或者不写也没有问题)
plugins:[
['import',{
libaryName:'vant',
libaryDirectory:'es',
style:true
},'vant']
]
然后就是修改你的main.js函数,这样你就可以全局应用到它。
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'vant/lib/index.css'
import Vant from 'vant'
import './styles/index.less'
createApp(App).use(store).use(router).use(Vant).mount('#app')
然后你就可以在你的App.vue文件中导入你要用到的组件
<template>
<div id='app'>
<van-button type="primary">Primary</van-button>
<van-button type="info">Info</van-button>
<van-button type="default">Default</van-button>
<van-button type="danger">Danger</van-button>
<van-button type="warning">Warning</van-button>
<router-view/>
</div>
</template>
<style lang="less"></style>