美文网首页VUE
在你的VUE3.0项目中使用Vant框架

在你的VUE3.0项目中使用Vant框架

作者: 木羽木羽女口生 | 来源:发表于2020-12-10 13:08 被阅读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>
    

    相关文章

      网友评论

        本文标题:在你的VUE3.0项目中使用Vant框架

        本文链接:https://www.haomeiwen.com/subject/qynlgktx.html