vue + typescript 引入Vant-UI

最新推荐文章于 2025-04-02 10:16:04 发布

kangkang_style

最新推荐文章于 2025-04-02 10:16:04 发布

阅读量2.4k

点赞数

分类专栏： vue 文章标签： vue typescript

本文链接：https://blog.youkuaiyun.com/kangkang_style/article/details/111028971

版权

vue 专栏收录该内容

32 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中结合TypeScript来引入并使用Vant-UI组件库，包括安装步骤、配置过程以及解决类型定义问题，帮助开发者提升Vue应用的开发体验和代码质量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装 vant 
	npm install vant --save

1. 全局引入
	在 main.ts 中全局引入
	import 'vant/lib/vant-css/index.css'
	Vue.use(Vant)

2. 按需引入 
	两种按需引入方法，都可以实现按照需求引入，推荐第二种
	
	第一种：
		步骤一：
			在src下定义 plugins 目录，并在其下创建vant.ts文件
			在 vant.ts 中按需引入组件
			例：
				import Vue from 'vue'
				import {
				  Button
				} from 'vant'
				Vue.use(Button)
		
		步骤二：
			在 main.ts 中引入 vant.ts 即可
			例：
				import './plugins/vant'
	
	
	第二种：
		步骤一：
			安装按需引入插件
			npm install babel-plugin-import --save-dev
			
		步骤二：
			在配置文件中引入插件声明
			在 babel.config.js中 添加 plugins 声明
			例：
				module.exports = {
				  presets: [
					'@vue/cli-plugin-babel/preset'
				  ],
				  plugins: [
					[
					  'import',
					  {
						libraryName: 'vant',
						libraryDirectory: 'es',
						style: true
					  }
					]
				  ]
				}
	
		步骤三：
			在使用页面引入组件即可
			例：Home.vue
				<template>
				  <div class="home">
					<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
					<van-button type="primary">hello world</van-button>
				  </div>
				</template>

				<script lang="ts">
				import { Component, Vue } from 'vue-property-decorator'
				import HelloWorld from '@/components/HelloWorld.vue'
				import { Button } from 'vant'
				@Component({
				  components: {
					HelloWorld,
					[Button.name]: Button
				  }
				})
				export default class Home extends Vue {}
				</script>
	
	
推荐第二种，真正做到按需引入，第一种胜在简单，各凭喜好。