首页 > 前端日志 > 前端框架 > Vue的优秀商城框架 Vant 的介绍及安装使用教程
2018
05-29

Vue的优秀商城框架 Vant 的介绍及安装使用教程

Vant 是有赞出的一款适合用来开发电商系统的Vue基本组件和样式组件。

安装Vant

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

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

如果你网络很慢的话,可以使用淘宝的源,但是不建议使用cnpm来进行安装,用cnpm安装时我个人是会出现一些未知的问题的,建议使用下面的安装方式:

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

 

安装好后,看一下我们的package.json文件,并确认一下版本,这里安装的是1.0.5版本。如果以后版本有所升级,可能下面课程中的使用方法有所不同,这个需要注意。

 

引入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}]
]

 

按需使用Vant组件

我们设置好.babelrc后,就可以按需引入Vant框架了。比如现在我们引入一个Button组件.

在src/main.js里加入下面的代码:

import { Button } from 'vant'
Vue.use(Button)

 

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

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

 

最后编辑:
作者:eatdao
这个作者貌似有点懒,什么都没有留下。

留下一个回复

你的email不会被公开。