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

如果你想在你的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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容