VUE

在你的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>
上一篇下一篇

猜你喜欢

热点阅读