uni-app下使用vant组件
<h1 id="uni-app下使用vant组件">uni-app下使用vant组件</h1><h2 id="1-创建uni-app">1. 创建uni-app</h2>
<p>下载打开HbuilderX,注意这里下载app开发版的。然后创建新项目，创建的时候选择uni-app默认模板</p>
<p><img src="https://img2020.cnblogs.com/blog/2178912/202101/2178912-20210109211906751-591554111.png"></p>
<h2 id="2-下载vant组件">2. 下载vant组件</h2>
<p>vant的GitHub下载地址下载完成后解压，然后在项目更目录下创建文件夹<code>wxcomponents</code>，注意这里的<code>wxcomponents</code>目录级别和<code>pages</code>在同一级别，然后再该目录下创建<code>vant</code>目录。回到刚才解压的vant目录，找到<code>dist</code>文件夹，把它复制到<code>vant</code>目录下</p>
<p><img src="https://img2020.cnblogs.com/blog/2178912/202101/2178912-20210109211915077-1529817012.png"></p>
<h2 id="3-引用vant组件">3. 引用vant组件</h2>
<h4 id="31--首先在appvue文件内添加">3.1首先在<code>app.vue</code>文件内添加</h4>
<pre><code class="language-css">@import "/wxcomponents/vant/dist/common/index.wxss";
</code></pre>
<p><img src="https://img2020.cnblogs.com/blog/2178912/202101/2178912-20210109211930447-1387297735.png"></p>
<h4 id="32-在pagesjson文件内添加组件引用">3.2 在pages.json文件内添加组件引用</h4>
<p><img src="https://img2020.cnblogs.com/blog/2178912/202101/2178912-20210109211945875-742009304.png"></p>
<p>你可以选择在一个页面的配置文件里面配置，但是只能在这个页面内使用，你也可以选择在globalStyle里面配置，是的所有页面都可以直接使用</p>
<pre><code class="language-json">"usingComponents":{
"van-button": "/wxcomponents/vant/dist/button/index"
}
</code></pre>
<h2 id="4-使用组件">4. 使用组件</h2>
<p>在你要使用的页面内添加你要使用的组件就可以了<img src="https://img2020.cnblogs.com/blog/2178912/202101/2178912-20210109212004566-1193279790.png"></p>
<p><img src="https://img2020.cnblogs.com/blog/2178912/202101/2178912-20210109212013736-351430392.png"></p><br><br>
来源：https://www.cnblogs.com/wines/p/14256507.html
頁:
[1]