乐趣区

关于vue.js:vue3中使用移动端组件库vant3

vant3 中文文档 https://vant-contrib.gitee.io…
介绍:
对于 vue 我的项目的创立后面文章有介绍
vant 的装置能够 npm install vant、或者应用 vue ui 进行装置
明天开始应用 vant 开始本人的挪动端开发
引入

// 我抉择了全局装置。引入
import Vant from 'vant';
import 'vant/lib/index.css'

装置
在以前的 vue 中你可能会想到应用 Vue.use(Vant)
在新版本的 vue 中批改为 createApp(App).use(Vant).mount(‘#app’)
{装置 X,路由等插件能够链式插入:createApp(App).use(store).use(router).use(Vant).mount(‘#app’)}
装置 babel
npm i babel-plugin-import -D
进行智能打包,也就是应用了什么就打包什么,防止包体积过大的问题

  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]


** 这样就算是装置完事了
这里是一段示例代码去试试吧 **

<template>
<div id="app">
 <van-button type="default"> 默认按钮 </van-button>
 <van-button type="primary"> 次要按钮 </van-button>
 <van-button type="info"> 信息按钮 </van-button>
 <van-button type="warning"> 正告按钮 </van-button>
 <van-button type="danger"> 危险按钮 </van-button>
</div>
</template>

<script>
import {Button} from 'vant';
export default {
  components: {[Button.name]: Button
  }
}
</script>

<style >
#app{
  width: 100%;
  height: 100%; 
}
</style>
退出移动版