在vue项目中使用vant(全局引入，按需引入，页面中引入)

haoxinqing222

于 2020-08-26 11:22:33 发布

阅读量1.1w

点赞数 4

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

本文链接：https://blog.youkuaiyun.com/haoxinqing222/article/details/108236351

版权

1 篇文章

订阅专栏

本文详细介绍了Vant UI框架的安装方法，包括使用npm进行安装的简写和完整写法，以及如何通过全局引入、按需引入和页面单独使用三种方式在项目中引入Vant组件。

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

安装：

npm i vant -S(简写)
npm install vant --save(完整写法)

引入：
1、全局引入

main.js:import Vant from 'vant'
import 'vant/lib/vant-css/index.css'
Vue.use(Vant)

2、按需引入（推荐）
首先，安装babel-plugin-import

npm i babel-plugin-import -D(简写)
npm install babel-plugin-import --save-dev(完整写法)

然后，在.babelrc文件中

 "plugins": [
     "transform-vue-jsx", 
     "transform-runtime",
     <!--这个是添加的-->
     ["import",{"libraryName":"vant","style":true}]
 ]

最后，在main.js中

import {Button} from 'vant'
Vue.use(Button)
// 引入的多的话
import { Button, Row, Col } from 'vant'
Vue.use(Button).use(Row).use(Col)

3、如果想在页面中单独使用组件

import { Button, Row, Col } from 'vant'
export default{
    components: {
        [Button.name]:Button // 有的组件有专门的引入方式，比如Dialog，可以看看
    }
}