Vant安装和使用

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

子化诗理

77205人浏览 · 2018-05-11 10:45:15

子化诗理 · 2018-05-11 10:45:15 发布

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/vant-css/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 
 } 
 ] 

]

 
       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的可以去博客看看哦！

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^