mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-06 17:18:40 +08:00
38 lines
24 KiB
JavaScript
38 lines
24 KiB
JavaScript
import{_ as l,E as o,c as p,o as h,aR as a,j as i,a as s,I as t,w as n}from"./chunks/framework.C7RrxATG.js";const q=JSON.parse('{"title":"Quick Start","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/quick-use.md","filePath":"en-US/guide/quick-use.md","lastUpdated":1762249100000}'),d={name:"en-US/guide/quick-use.md"},r=a(`<h1 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-label="Permalink to "Quick Start""></a></h1><p>This section introduces how to install, configure, and use <code>Wot UI</code> in your <code>uni-app</code> project.</p><h2 id="before-using" tabindex="-1">Before Using <a class="header-anchor" href="#before-using" aria-label="Permalink to "Before Using""></a></h2><p>Before using, please make sure you have learned Vue's official <a href="https://vuejs.org/guide/quick-start.html" target="_blank" rel="noreferrer">Quick Start</a> and uni-app's <a href="https://uniapp.dcloud.net.cn/resource.html" target="_blank" rel="noreferrer">Learning Path</a>.</p><h2 id="installation" tabindex="-1">Installation <a class="header-anchor" href="#installation" aria-label="Permalink to "Installation""></a></h2><div class="warning custom-block"><p class="custom-block-title">About Installation</p><p><code>Wot UI</code> provides two installation methods: <code>uni_modules</code> and <code>npm</code>. Choose according to your needs.</p><ul><li>Using <code>uni_modules</code> installation requires no additional configuration, it's plug-and-play, but updating the component library requires handling code differences (generally just overwriting is fine).</li><li>Using <code>npm</code> installation requires additional configuration, but updating the component library doesn't require handling code differences.</li></ul></div><h3 id="npm-installation" tabindex="-1">npm Installation <a class="header-anchor" href="#npm-installation" aria-label="Permalink to "npm Installation""></a></h3><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-y2l3e" id="tab-Mqb6w6N" checked><label data-title="npm" for="tab-Mqb6w6N">npm</label><input type="radio" name="group-y2l3e" id="tab-3rx8S64"><label data-title="yarn" for="tab-3rx8S64">yarn</label><input type="radio" name="group-y2l3e" id="tab-S25sxfD"><label data-title="pnpm" for="tab-S25sxfD">pnpm</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active"><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;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> i</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> wot-design-uni</span></span></code></pre></div><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;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> wot-design-uni</span></span></code></pre></div><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;"> wot-design-uni</span></span></code></pre></div></div></div><h3 id="uni-modules-installation" tabindex="-1">uni_modules Installation <a class="header-anchor" href="#uni-modules-installation" aria-label="Permalink to "uni_modules Installation""></a></h3><p><code>Wot UI</code> supports the <a href="https://uniapp.dcloud.net.cn/plugin/uni_modules.html#uni-modules" target="_blank" rel="noreferrer">uni_modules</a> specification and is available in the uni-app plugin market.</p><p>In the <code>uni-app plugin market</code>, choose to import using <code>HBuildX</code>, or manually create a uni_modules folder in the src directory and extract <code>Wot UI</code> into uni_modules, with the following structure:</p><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;">-</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> uni_modules</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">-</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> -</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> -</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> wot-design-uni</span></span></code></pre></div><p>Download link: <a href="https://ext.dcloud.net.cn/plugin?id=13889"><span>wot-design-uni</span></a></p><h2 id="sass" tabindex="-1">Sass <a class="header-anchor" href="#sass" aria-label="Permalink to "Sass""></a></h2><p><code>Wot UI</code> depends on <code>sass</code>, so before using it, you need to confirm whether <code>sass</code> is already installed in your project. If not, you can install it using the following command:</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-TgHLR" id="tab-F-UQGzZ" checked><label data-title="npm" for="tab-F-UQGzZ">npm</label><input type="radio" name="group-TgHLR" id="tab-yb31LT4"><label data-title="yarn" for="tab-yb31LT4">yarn</label><input type="radio" name="group-TgHLR" id="tab-n9XFabC"><label data-title="pnpm" for="tab-n9XFabC">pnpm</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active"><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;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> i</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sass</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -D</span></span></code></pre></div><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;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sass</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -D</span></span></code></pre></div><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;"> sass</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -D</span></span></code></pre></div></div></div><div class="warning custom-block"><p class="custom-block-title">Reminder</p><p><code>Dart Sass 3.0.0</code> has deprecated a batch of APIs, and the component library hasn't been compatible yet, so please ensure your <code>sass</code> version is 1.78.0 or earlier. See <a href="/en-US/guide/common-problems.html#sass-throws-lots-of-errors-and-warnings">Common Problems</a>.</p></div><h2 id="configuration" tabindex="-1">Configuration <a class="header-anchor" href="#configuration" aria-label="Permalink to "Configuration""></a></h2><h3 id="import-components" tabindex="-1">Import Components <a class="header-anchor" href="#import-components" aria-label="Permalink to "Import Components""></a></h3><div class="tip custom-block"><p class="custom-block-title">Reminder</p><p>When using <code>uni_modules</code> installation, <code>Wot UI</code> components naturally support the <code>easycom</code> specification, requiring no additional configuration for automatic component import. When using <code>npm installation</code>, you need to follow this step. Choose one of the following two solutions.</p></div>`,20),c={id:"configure-easycom-for-automatic-component-importsolution-1",tabindex:"-1"},k=i("a",{class:"header-anchor",href:"#configure-easycom-for-automatic-component-importsolution-1","aria-label":'Permalink to "Configure easycom for Automatic Component Import<el-tag type="primary" style="vertical-align: middle;margin-left:8px;" effect="dark" >Solution 1</el-tag>"'},"",-1),u=a(`<p>Traditional Vue components require three steps: installation, import, and registration before they can be used. <code>easycom</code> simplifies this to one step. As long as the component path follows the specification (see <a href="https://uniapp.dcloud.net.cn/collocation/pages.html#easycom" target="_blank" rel="noreferrer">easycom</a>), you can use it directly in the page without importing and registering.</p><div class="tip custom-block"><p class="custom-block-title">Reminder</p><ul><li>For compilation speed, uni-app won't trigger recompilation when directly modifying <code>easycom</code> in <code>pages.json</code>. You need to modify page content to trigger it.</li><li>Please ensure you only have one <code>easycom</code> field in your <code>pages.json</code>, otherwise please merge multiple import rules yourself.</li></ul></div><div class="language-JSON vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">JSON</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// pages.json</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> "easycom"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
|
||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> "autoscan"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> "custom"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
|
||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> "^wd-(.*)"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"wot-design-uni/components/wd-$1/wd-$1.vue"</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
|
||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // This is the existing content</span></span>
|
||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> "pages"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
|
||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // ......</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ]</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div>`,3),g={id:"configure-automatic-component-import-based-on-vitesolution-2",tabindex:"-1"},m=i("a",{class:"header-anchor",href:"#configure-automatic-component-import-based-on-vitesolution-2","aria-label":'Permalink to "Configure Automatic Component Import Based on vite<el-tag type="primary" style="vertical-align: middle;margin-left:8px;" effect="dark" >Solution 2</el-tag>"'},"",-1),y=a(`<p>If you're not familiar with <code>easycom</code>, you can also achieve automatic component import through <a href="https://github.com/uni-helper/vite-plugin-uni-components" target="_blank" rel="noreferrer">@uni-helper/vite-plugin-uni-components</a>.</p><div class="tip custom-block"><p class="custom-block-title">Reminder</p><ul><li>Recommended to use <code>@uni-helper/vite-plugin-uni-components@0.0.9</code> and above, as it includes the built-in <code>resolver</code> for <code>wot-design-uni</code> starting from version 0.0.9.</li><li>If you see many <code>Sourcemap for points to missing source files</code> in the console when using this solution, try upgrading <code>Vite</code> to version 4.5.x or above.</li></ul></div><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-c7kss" id="tab-lIC_RGk" checked><label data-title="npm" for="tab-lIC_RGk">npm</label><input type="radio" name="group-c7kss" id="tab-OAgdg1v"><label data-title="yarn" for="tab-OAgdg1v">yarn</label><input type="radio" name="group-c7kss" id="tab-OHCPzau"><label data-title="pnpm" for="tab-OHCPzau">pnpm</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active"><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;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> i</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @uni-helper/vite-plugin-uni-components</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -D</span></span></code></pre></div><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;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @uni-helper/vite-plugin-uni-components</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -D</span></span></code></pre></div><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;"> @uni-helper/vite-plugin-uni-components</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -D</span></span></code></pre></div></div></div><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// vite.config.ts</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { defineConfig } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "vite"</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;"> uni </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "@dcloudio/vite-plugin-uni"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Components </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '@uni-helper/vite-plugin-uni-components'</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { WotResolver } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '@uni-helper/vite-plugin-uni-components/resolvers'</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> defineConfig</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> plugins: [</span></span>
|
||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // make sure put it before \`Uni()\`</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Components</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> resolvers: [</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">WotResolver</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()]</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }), </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">uni</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()],</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><p>If you use <code>pnpm</code>, please create a <code>.npmrc</code> file in the root directory, see <a href="https://github.com/antfu/unplugin-vue-components/issues/389" target="_blank" rel="noreferrer">Issue</a>.</p><div class="language-text vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>// .npmrc</span></span>
|
||
<span class="line"><span>public-hoist-pattern[]=@vue*</span></span>
|
||
<span class="line"><span>// or</span></span>
|
||
<span class="line"><span>// shamefully-hoist = true</span></span></code></pre></div><h2 id="volar-support" tabindex="-1">Volar Support <a class="header-anchor" href="#volar-support" aria-label="Permalink to "Volar Support""></a></h2><p>If you use <code>Volar</code>, please specify global component types through <code>compilerOptions.type</code> in <code>tsconfig.json</code>.</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>For cli projects using <code>uni_modules</code> installation, no configuration is needed as Volar support is automatically enabled. <code>HbuildX</code> projects don't support this configuration, so this step is only needed when using <code>npm</code> installation in <code>cli</code> projects.</p></div><div class="language-json vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// tsconfig.json</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> "compilerOptions"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
|
||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> "types"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"wot-design-uni/global"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="usage" tabindex="-1">Usage <a class="header-anchor" href="#usage" aria-label="Permalink to "Usage""></a></h2><p>After installing and configuring <code>Wot UI</code>, it supports automatic component import, so you can use it directly in SFC without importing in the page or declaring in components. It's worth noting that the <code>uni-app</code> platform doesn't support global component mounting, so components like <code>Message</code>, <code>Toast</code>, etc., still need to be explicitly used in SFC, for example:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-toast</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-toast</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="scaffolding" tabindex="-1">Scaffolding <a class="header-anchor" href="#scaffolding" aria-label="Permalink to "Scaffolding""></a></h2><p>We provide a quick start project <a href="https://github.com/wot-ui/wot-starter" target="_blank" rel="noreferrer">wot-starter</a>, which integrates <code>Wot UI</code> and many excellent plugins, you can clone this project directly.</p><p>You can also use <a href="https://github.com/uni-helper/create-uni" target="_blank" rel="noreferrer">create-uni</a> to quickly create a starter project through the following command:</p><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;"> create</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> uni@latest</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -t</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> wot-starter</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> <</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">your</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> project</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> nam</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">e</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">></span></span></code></pre></div><p>For more scaffolding and templates, see <a href="./cli-templates.html">CLI & Templates</a>.</p>`,18);function b(E,F,v,f,C,_){const e=o("el-tag");return h(),p("div",null,[r,i("h4",c,[s("Configure easycom for Automatic Component Import"),t(e,{type:"primary",style:{"vertical-align":"middle","margin-left":"8px"},effect:"dark"},{default:n(()=>[s("Solution 1")]),_:1}),s(),k]),u,i("h4",g,[s("Configure Automatic Component Import Based on vite"),t(e,{type:"primary",style:{"vertical-align":"middle","margin-left":"8px"},effect:"dark"},{default:n(()=>[s("Solution 2")]),_:1}),s(),m]),y])}const x=l(d,[["render",b]]);export{q as __pageData,x as default};
|