Vue组件库

# vue组件库

# Vant

# 资源全部引入

全局注册

import Vant from 'vant'
import 'vant/lib/index.css'
Vue.use(Vant);//全局注册组件

1
2
3

# 手动按需引入

<script>
import Button from 'vant/lib/button'
import 'vant/lib/button/style'
export default{
	components:{
		[Button.name]:Button//普通局部注册组件
	}
}
</script>

1
2
3
4
5
6
7
8
9

# 自动按需引入

安装插件

yarn add vite-plugin-style-import@1.4.1 -D

在 babel.config.js 配置文件中添加配置

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

1
2
3
4
5
6
7
8
9
10

引入组件

import {Button} from 'vant'
//实际执行
import Button from 'vant/es/button';
import 'vant/es/button/style';
//全局注册
Vue.use(Button);//注意此处的全局注册组件名还是使用官方的 Button只是

1
2
3
4
5
6

# 基本使用

弹出框

函数调用

import {Dialog} from 'vant'
methods:{
	btn(){
		Dialog({message});
	}
}

1
2
3
4
5
6

编辑

上次更新: 2023/02/07, 14:51:48

← Vue插槽网易云音乐案例→