首页 > 其他 > 详细

Vue项目使用vant框架

时间:2020-02-22 17:25:50      阅读:138      评论:0      收藏:0      [点我收藏+]

  近期在开发h5端项目,用到vant框架,vant是一款基于Vue的移动UI组件,看了vant的官方文档(https://youzan.github.io/vant/#/zh-CN/)感觉不错,功能比较齐全,可视化页面效果也不错,接下来与大家分享一下vant引入流程。

  1、在项目里面安装 vant:npm install vant -S  也可简写为:npm i vant -S  (接下来  install  将简写为  i )

    安装完成之后就可以在  package.json  的依赖关系(dependencies)中看到  vant  及版本

              技术分享图片

 

 

    2、接下来安装  babel-plugin-import ,这是一款babel插件,这样就可以按需引入功能了。

    npm i babel-plugin-import -D

              技术分享图片

 

 

   3、然后要在 .babelrc.js 中配置 plugins(插件)

              技术分享图片

 

               cli3的配置如下:

              技术分享图片

 

   4、然后按需引入 vant 组件,例如在 index.vue 中使用 Button 组件,就可以直接在 index.vue 中引入

              技术分享图片

  5、如果多个页面组要用到同一个组件(Button),可以再 main.js 中引入

              技术分享图片

 

   好了,大家可以试试效果怎么样哦!有疑问可以留言或评价,看到消息后我会及时回复的,希望可以帮到大家,谢谢!

 

Vue项目使用vant框架

原文:https://www.cnblogs.com/singGirl/p/12346226.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!