import{_ as s,o as n,c as a,d as l}from"./app.b03f2eea.js";const A=JSON.parse('{"title":"\u591A UI \u7EC4\u4EF6\u5E93\u4F9B\u9009\u62E9","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u5B89\u88C5\u63D2\u4EF6","slug":"\u5B89\u88C5\u63D2\u4EF6","link":"#\u5B89\u88C5\u63D2\u4EF6","children":[]},{"level":2,"title":"\u4F7F\u7528\u7EC4\u4EF6\u5E93","slug":"\u4F7F\u7528\u7EC4\u4EF6\u5E93","link":"#\u4F7F\u7528\u7EC4\u4EF6\u5E93","children":[]},{"level":2,"title":"\u4E0D\u9700\u8981\u67D0\u4E2A\u7EC4\u4EF6\u5E93","slug":"\u4E0D\u9700\u8981\u67D0\u4E2A\u7EC4\u4EF6\u5E93","link":"#\u4E0D\u9700\u8981\u67D0\u4E2A\u7EC4\u4EF6\u5E93","children":[]},{"level":2,"title":"\u53C2\u8003\u6587\u6863","slug":"\u53C2\u8003\u6587\u6863","link":"#\u53C2\u8003\u6587\u6863","children":[]}],"relativePath":"guide/vue3/ui.md","lastUpdated":1661959619000}'),p={name:"guide/vue3/ui.md"},o=l(`

\u591A UI \u7EC4\u4EF6\u5E93\u4F9B\u9009\u62E9

Vite \u6784\u5EFA\u5DE5\u5177\uFF0C\u4F7F\u7528 vite-plugin-style-import \u548C unplugin-vue-components/vite \u5B9E\u73B0\u6309\u9700\u5F15\u5165\u3002

\u5B89\u88C5\u63D2\u4EF6

bash
yarn add vite-plugin-style-import -D
yarn add unplugin-vue-components/vite -D

\u4F7F\u7528\u7EC4\u4EF6\u5E93

nutUI \u6CA1\u6709\u6309\u9700\u52A0\u8F7D\u7684 resolvers\uFF0Cstyle \u9700\u8981\u81EA\u5DF1\u914D\u7F6E\u6309\u9700\u52A0\u8F7D

\u5728 config/vite/plugins/styleImport.ts \u8BBE\u7F6E

javascript
  // \u6309\u9700\u52A0\u8F7D\u6837\u5F0F\u6587\u4EF6
  ...
    createStyleImportPlugin({
      resolves: [NutuiResolve()],
    }),
  ...

\u9879\u76EE\u5728 src/plugins/nutUI.ts \u4E0B\u7EDF\u4E00\u7BA1\u7406\u7EC4\u4EF6\uFF0C\u7528\u54EA\u4E2A\u5F15\u5165\u54EA\u4E2A\uFF0C\u65E0\u9700\u5728\u9875\u9762\u91CC\u91CD\u590D\u5F15\u7528

javascript
// \u6309\u9700\u5168\u5C40\u5F15\u5165nutUI\u7EC4\u4EF6
import Vue from "vue";
import { Button, Cell, CellGroup } from "@nutui/nutui";
export const nutUiComponents = [Button, Cell, CellGroup];

// \u5728main.ts\u6587\u4EF6\u4E2D\u5F15\u5165
nutUiComponents.forEach((item) => {
  app.use(item);
});

vant \u548C varlet \u53EF\u4EE5\u4F7F\u7528\u7EC4\u4EF6\u6309\u9700\u52A0\u8F7D

\u5728config/vite/plugins/component.ts\u4E0B

javascript
import { VueUseComponentsResolver, VantResolver, VarletUIResolver } from 'unplugin-vue-components/resolvers';
...
resolvers: [VantResolver(), VarletUIResolver()],
...

\u4E0D\u9700\u8981\u67D0\u4E2A\u7EC4\u4EF6\u5E93

nutUI \u9700\u5220\u9664src/plugins/nutUI.ts\u548Cmain.ts\u6587\u4EF6\u4E0B\u7684\u5F15\u5165

vant \u548C varlet \u53EA\u9700\u5220\u9664\u5BF9\u5E94\u7684 resolvers \u5373\u53EF

\u5220\u9664\u540E\u9700\u5168\u5C40\u641C\u7D22\u5220\u9664\u4E0D\u9700\u8981\u7684\u7EC4\u4EF6\uFF0C\u907F\u514D\u62A5\u9519

\u53C2\u8003\u6587\u6863

`,19),e=[o];function t(r,c,D,i,y,F){return n(),a("div",null,e)}const u=s(p,[["render",t]]);export{A as __pageData,u as default};