Uni-App内引入Vant框架

文章目录

      前言

1. Uni-App优点
2. 搭建项目
3. 问题及解决
4. 总结

---

前言

最近写一个项目用的是Vue框架，因为后期还要使用推送功能就决定利用Uni-App来进行开发，因为听说Uni-App的多适应功能强，一次开发可以在多个平台运行。

1.Uni-App优点

一套代码编到11个平台，这不是梦想。眼见为实，扫描11个二维码，亲自体验最全面的跨平台效果！（这是官网原话）

2.项目搭建

 1.首先在连接中下载vant。链接：vant组件下载链接

 上述的链接由于是GitHub可能反应比较慢，但是一定是可以使用的。

2.建立Uni-App项目，打开Hbuilder，新建项目，选择uni-app里的默认模板直接创建就行。

3.在项目中引入vant。

首先在根目录下创建一个新的文件wxcomponents（与pages同级），接着把刚才在连接中下载的压缩包解压后的dist文件夹复制到wxcomponents文件中，并将dist文件名改为vant（如图）。

 4.接着在pages.json中加入下列代码（Uni-App官网上有的）。

"autoscan": true,
	  "custom": {
	         "^van-(.*)": "@/wxcomponents/vant//index.vue"// 匹配wxcomponents目录内的vue文件
	   
	  }

  意思把vant - $1目录下生成index.vue文件（编译器可以搞定它）。

5.在App.vue中的style标签里加上下列代码。

@import "/wxcomponents/vant/common/index.wxss"

  6.点击运行到浏览器。

 烦死了又按了Ctrl+Z（习惯性的动作），还要重写。

3.问题及解决

完成以上步骤后，大家遇到的问题应该就是这个了。

莫慌！！！

解决：

找到icon文件夹下的index.vue，直接Ctrl+K进行格式化。

接着我们使用vant组件，在index.vue使用button组件。

 

直接在运行中找到浏览器：

 运行结果：

 完成了！

4.总结

以上就是今天所讲的内容，这只是vant引入问题，接下来就开始写项目了，如果还会遇到其他的问题我会继续分享的，这样可以和各位码友们一起成长。