关于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>

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理