如何引入vantUI组件

发布时间:2021-05-10 16:14:51 作者:Leah
来源:亿速云 阅读:274

如何引入vantUI组件?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

  vue中vant组件引入方式

  需求是用vue做一个移动端商城,查了一些前端框架,就这个还合适,

  按照文档上面所说的组件按需引用的写法如下:

  import{Row,Col}from'vant';

  Vue.use(Row).use(Col);

  然后再页面上写对应的HTML代码:

  <van-row>

  <van-colspan="8">span:8</van-col>

  <van-colspan="8">span:8</van-col>

  <van-colspan="8">span:8</van-col>

  </van-row>

  会报错,,

  比如找不到vue啊什么的。。。

  正确的引用方式应该是下面这个样子的:

  import{Swipe,SwipeItem,Row,Col}from"vant";

  exportdefault{

  name:"index",

  components:{

  [Swipe.name]:Swipe,

  [SwipeItem.name]:SwipeItem,

  [Row.name]:Row,

  [Col.name]:Col

  },

  data(){

  return{

  };

  }

  };

  安装Vant

  npmivant-S:这是简写形式。

  npminstallvant--save:这是完整写法。

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

  npminstallvant--save--registry=

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注亿速云行业资讯频道,感谢您对亿速云的支持。

推荐阅读:
  1. 详解vue引入子组件方法
  2. React中如何引入Angular组件详解

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vantui

上一篇:引入directory_separator的方法

下一篇:怎么引入文件

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》