uni-app如何使用vant-ui
<p><strong>1、前提：已经有uni-app项目</strong></p><p><strong>2、小程序版 Vant Weapp文档地址：https://youzan.github.io/vant-weapp/#/home</strong></p>
<p><strong>3、在项目中创建一个文件夹叫 wxcomponents，注意这个文件和pages文件夹平级。</strong></p>
<p><strong>4、前往https://github.com/youzan/vant-weapp下载压缩文件，将该项目的dist文件夹替换wxcomponents => vant下的dist文件夹</strong></p>
<p><img src="https://img2020.cnblogs.com/blog/984565/202106/984565-20210608100526337-1653431065.png" alt="" loading="lazy"></p>
<p><strong>5、在根目录下App.vue中引入index.wxss</strong></p>
<div class="cnblogs_code">
<pre>@import "/wxcomponents/vant/dist/common/index.wxss";</pre>
</div>
<p><strong>6、在pages.json页面将vant的组件注册到对应的页面</strong></p>
<div class="cnblogs_code">
<pre>"usingComponents"<span style="color: rgba(0, 0, 0, 1)">: {
</span>"van-row": "/wxcomponents/vant/dist/row/index"<span style="color: rgba(0, 0, 0, 1)">,
</span>"van-col": "/wxcomponents/vant/dist/col/index"<span style="color: rgba(0, 0, 0, 1)">,
</span>"van-icon": "/wxcomponents/vant/dist/icon/index"<span style="color: rgba(0, 0, 0, 1)">,
</span>"van-button": "/wxcomponents/vant/dist/button/index"<span style="color: rgba(0, 0, 0, 1)">
}</span></pre>
</div>
<p><img src="https://img2020.cnblogs.com/blog/984565/202106/984565-20210608100927228-1406695437.png" alt="" loading="lazy"></p>
<p><strong> 7、即可在配置好的页面使用当前组件</strong></p>
<div class="cnblogs_code">
<pre><template>
<view class="content">
<van-button type="primary">默认按钮</van-button>
</view>
</template></pre>
</div>
<p><strong>8、也可以将usingComponents配置到globalStyle下，这样全局页面都可以使用</strong></p>
<p><img src="https://img2020.cnblogs.com/blog/984565/202106/984565-20210608101053083-1870441584.png" alt="" loading="lazy"></p>
<p> </p><br><br>
来源：https://www.cnblogs.com/zjianfei/p/14861654.html
頁:
[1]