Vant的安装和用法

Vant安装和用法

Vant ( ˈvænt ) 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。目前已有近50个组件，这些组件被广泛使用于有赞的各个移动端业务中。如果你需要开发一个移动商城，用 Vant 就再合适不过了。

中文文档链接：https://www.youzanyun.com/zanui/vant#/zh-CN/intro

安装Vant

npm i vant -S：这是简写形式。

npm install vant --save:这是完整写法。

如果你网络很慢的话，可以使用淘宝的源，但是不建议使用cnpm来进行安装。

npm install vant --save --registry=https://registry.npm.taobao.org

引入Vant的第一种方法（不推荐）

安装好vant后，可以使用以前常用的方法进行引入-这是一种全局引入的方式。

直接在src/main.js进行全局引入。

import Vant from 'vant' import 'vant/lib/index.css' Vue.use(vant)

简单的三行代码已经可以把Vant引入进来了，但是这种方式在最后打包发布时会增加包的大小，Vue的SPA首屏打开时本来就有些慢，所以不建议使用这种方法进行引入。

优雅的引入Vant

vant是支持babel-plugin-import引入的，它可以让我们按需引入组件模块，并且不用管理我们的样式，现在Vue项目组件库的主流引入方法。

安装babel-plugin-import

npm i babel-plugin-import -D

也可以使用完整写法

npm install babel - plugin - import -- save - dev

在.babelrc中配置plugins（插件）

"plugins" : [

     "transform-vue-jsx" ,

     "transform-runtime" ,

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

   ]

2 3 4

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

2	npm install babel - plugin - import -- save - dev

按需使用Vant组件1

我们设置好.babelrc后，就可以按需引入Vant框架了。比如现在我们引入一个Button组件，在src/main.js里加入下面的代码：

import { Button } from 'vant'

Vue . use ( Button )

有了这段代码之后，我们就可以在需要的组件页面中加入Button了.

< van - button type = "primary" > 主要按钮 < / van - button >

按需使用Vant组件2

不在src/main.js里加入代码，而在需要的页面单独引入：

有了这段代码之后，我们就可以在需要的组件页面中加入 Navbar 和 icon 了.

感谢技术胖教带我走进了Vant的大门,这是他的博客 http://jspang.com/，想学Vue的可以去博客看看哦！

        <div class="person-messagebox">
            <div class="left-message"><a href="https://blog.csdn.net/webFront">
                <img src="https://profile.csdnimg.cn/B/E/8/3_webfront" class="avatar_pic" username="webFront">
            </a></div>
            <div class="middle-message">
                                    <div class="title"><span class="tit "><a href="https://blog.csdn.net/webFront" data-report-click="{&quot;mod&quot;:&quot;popu_379&quot;,&quot;ab&quot;:&quot;new&quot;}" target="_blank">子化诗理</a></span>
                    <!-- 等级，level -->
                                            <img class="identity-icon" src="https://csdnimg.cn/identity/blog4.png">                                            </div>
                <div class="text"><span>原创文章 27</span><span>获赞 31</span><span>访问量 16万+</span></div>
            </div>
                            <div class="right-message">
                                        <a class="btn btn-sm  bt-button personal-watch" data-report-click="{&quot;mod&quot;:&quot;popu_379&quot;,&quot;ab&quot;:&quot;new&quot;,&quot;extend1&quot;:&quot;个人信息未关注&quot;}">关注</a>
                                                            <a href="https://im.csdn.net/im/main.html?userName=webFront" target="_blank" class="btn btn-sm bt-button personal-letter">私信
                    </a>
                                </div>
                        </div>
                    
    </div>