mirror of
https://github.com/sunniejs/vue-h5-template.git
synced 2026-04-29 18:34:09 +08:00
7 lines
3.8 KiB
JavaScript
7 lines
3.8 KiB
JavaScript
import{_ as s,c as a,o as i,aj as e}from"./chunks/framework.DNhrqZu5.js";const g=JSON.parse('{"title":"多 UI 组件库供选择","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/ui.md","filePath":"guide/vue3/ui.md","lastUpdated":1777342606000}'),t={name:"guide/vue3/ui.md"},n=e(`<h1 id="多-ui-组件库供选择" tabindex="-1">多 UI 组件库供选择 <a class="header-anchor" href="#多-ui-组件库供选择" aria-label="Permalink to "多 UI 组件库供选择""></a></h1><p>使用 <code>unplugin-vue-components</code> 和 <code>unplugin-auto-import</code> 实现按需引入，无需手动注册组件。</p><h2 id="使用组件库" tabindex="-1">使用组件库 <a class="header-anchor" href="#使用组件库" aria-label="Permalink to "使用组件库""></a></h2><p>Vant、Varlet 和 NutUI 三个组件库均已配置按需加载。</p><p>在 <code>build/vite/plugins/component.ts</code> 下配置：</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { VantResolver, VarletUIResolver } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'unplugin-vue-components/resolvers'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> NutUIResolver </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '@nutui/auto-import-resolver'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// ...</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">resolvers</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">VantResolver</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(), </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">VarletUIResolver</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(), </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">NutUIResolver</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()],</span></span>
|
||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// ...</span></span></code></pre></div><h2 id="不需要某个组件库" tabindex="-1">不需要某个组件库 <a class="header-anchor" href="#不需要某个组件库" aria-label="Permalink to "不需要某个组件库""></a></h2><p>只需删除对应的 resolvers 即可。</p><p>删除后需全局搜索删除不需要的组件，避免报错。</p><h2 id="参考文档" tabindex="-1">参考文档 <a class="header-anchor" href="#参考文档" aria-label="Permalink to "参考文档""></a></h2><ul><li><p><a href="https://nutui.jd.com/#/zh-CN/component/button" target="_blank" rel="noreferrer">NutUI</a></p></li><li><p><a href="https://vant-ui.github.io/vant/#/zh-CN" target="_blank" rel="noreferrer">Vant</a></p></li><li><p><a href="https://varlet.pages.dev/#/zh-CN/button" target="_blank" rel="noreferrer">Varlet</a></p></li></ul>`,11),l=[n];function r(p,h,o,k,d,u){return i(),a("div",null,l)}const E=s(t,[["render",r]]);export{g as __pageData,E as default};
|