文章目录
前言
-
Uni-App优点
-
搭建项目
-
问题及解决
-
总结
前言
最近写一个项目用的是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/$1/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组件。
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
<van-button type="primary">LL</van-button>
</view>
</view>
</template>
直接在运行中找到浏览器:
运行结果:
完成了!
4.总结
以上就是今天所讲的内容,这只是vant引入问题,接下来就开始写项目了,如果还会遇到其他的问题我会继续分享的,这样可以和各位码友们一起成长。
更多推荐
Uni-App内引入Vant框架
发布评论