mirror of
https://github.com/sunniejs/vue-h5-template.git
synced 2025-09-08 22:29:47 +08:00
6 lines
4.4 KiB
JavaScript
6 lines
4.4 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":1756280955000}'),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>Vite 构建工具，<code>使用 vite-plugin-style-import</code> 和 <code>unplugin-vue-components/vite</code> 实现按需引入。</p><h2 id="安装插件" tabindex="-1">安装插件 <a class="header-anchor" href="#安装插件" aria-label="Permalink to "安装插件""></a></h2><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> unplugin-vue-components/vite</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -D</span></span></code></pre></div><h2 id="使用组件库" tabindex="-1">使用组件库 <a class="header-anchor" href="#使用组件库" aria-label="Permalink to "使用组件库""></a></h2><p>vant 、 varlet 和 nutUI 可以使用组件按需加载</p><p>在<code>config/vite/plugins/component.ts</code>下</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</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 style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</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:#D73A49;--shiki-dark:#F97583;">...</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-contrib.gitee.io/vant/#/zh-CN" target="_blank" rel="noreferrer">vant</a></p></li><li><p><a href="https://varlet-varletjs.vercel.app/#/zh-CN/button" target="_blank" rel="noreferrer">varlet</a></p></li></ul>`,13),l=[n];function p(h,r,o,k,d,c){return i(),a("div",null,l)}const v=s(t,[["render",p]]);export{g as __pageData,v as default};
|