import{e as a,o as n,G as t}from"./vendor.js";const p={class:"markdown-body"},l=t(`

\u5FEB\u901F\u4E0A\u624B

\u9884\u89C8

\u626B\u63CF\u4E0B\u65B9\u4E8C\u7EF4\u7801\u4F53\u9A8C\uFF0C\u4F53\u9A8C Vue3 \u7EC4\u4EF6\u5E93\u793A\u4F8B

NutUI

NPM \u5B89\u88C5

# Vue2 \u9879\u76EE \u9700\u8981\u53C2\u8003 2.x \u6587\u6863 https://nutui.jd.com/2x
npm i @nutui/nutui

# Vue3 \u9879\u76EE
npm i @nutui/nutui@next

# taro \u5C0F\u7A0B\u5E8F\u9879\u76EE
npm i @nutui/nutui-taro

NPM \u4F7F\u7528\u793A\u4F8B

\u5BFC\u5165\u5168\u90E8\u7EC4\u4EF6

\u6CE8\u610F\uFF1A\u8FD9\u79CD\u65B9\u5F0F\u5C06\u4F1A\u5BFC\u5165\u6240\u6709\u7EC4\u4EF6\uFF0C\u6253\u5305\u6587\u4EF6\u5927\u5C0F\u4F1A\u5F88\u5927\uFF0C\u6211\u4EEC\u63A8\u8350\u4F7F\u7528\u6309\u9700\u52A0\u8F7D

import { createApp } from "vue";
import App from "./App.vue";
// \u6CE8\u610F\uFF1A\u8FD9\u79CD\u65B9\u5F0F\u5C06\u4F1A\u5BFC\u5165\u6240\u6709\u7EC4\u4EF6
import NutUI from "@nutui/nutui";
import "@nutui/nutui/dist/style.css";
createApp(App).use(NutUI).mount("#app");

Vite \u6784\u5EFA\u5DE5\u5177 \u901A\u8FC7 vite-plugin \u4F7F\u7528\u6309\u9700\u52A0\u8F7D

\u4E3A\u4EC0\u4E48\u53EA\u6309\u9700\u5F15\u5165\u6837\u5F0F

\u7531\u4E8E vite \u672C\u8EAB\u5DF2\u6309\u9700\u5BFC\u5165\u4E86\u7EC4\u4EF6\u5E93\uFF0C\u56E0\u6B64\u4EC5\u6837\u5F0F\u4E0D\u662F\u6309\u9700\u5BFC\u5165\u7684\uFF0C\u56E0\u6B64\u53EA\u9700\u6309\u9700\u5BFC\u5165\u6837\u5F0F\u5373\u53EF\u3002

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

\u5B89\u88C5\u63D2\u4EF6
npm install vite-plugin-style-import --save-dev

\u5728 vite.config \u4E2D\u6DFB\u52A0\u914D\u7F6E\uFF1A

import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import';
export default {
  plugins: [
    vue(),
    styleImport({
      libs: [
        {
          libraryName: '@nutui/nutui',
          libraryNameChangeCase: 'pascalCase',
          resolveStyle: (name) => {
            return \`@nutui/nutui/dist/packages/\${name}/index.scss\`
          }
        }
      ],
    }),
  ],
  css: {
    preprocessorOptions: {
      scss: {
        // \u914D\u7F6E nutui \u5168\u5C40 scss \u53D8\u91CF
        additionalData: \`@import "@nutui/nutui/dist/styles/variables.scss";\`
      }
    }
  }
};

WebPack \u6784\u5EFA\u5DE5\u5177 \u901A\u8FC7 babel \u4F7F\u7528\u6309\u9700\u52A0\u8F7D

babel-plugin-import \u662F\u4E00\u6B3E babel \u63D2\u4EF6\uFF0C\u5B83\u4F1A\u5728\u7F16\u8BD1\u8FC7\u7A0B\u4E2D\u5C06 import \u8BED\u53E5\u81EA\u52A8\u8F6C\u6362\u4E3A\u6309\u9700\u5F15\u5165\u7684\u65B9\u5F0F\u3002

\u5B89\u88C5\u63D2\u4EF6
npm install babel-plugin-import --save-dev

\u5728 .babelrc \u6216 babel.config.js \u4E2D\u6DFB\u52A0\u914D\u7F6E\uFF1A

{
  // ...
  plugins: [
    [
      "import",
      {
        "libraryName": "@nutui/nutui",
        "libraryDirectory": "dist/packages/_es",
        "camel2DashComponentName": false
      },
      'nutui3-vue'
    ],
    [
      "import",
      {
        "libraryName": "@nutui/nutui-taro",
        "libraryDirectory": "dist/packages/_es",
        "camel2DashComponentName": false
      },
      'nutui3-taro'
    ]
  ]
}

\u63A5\u7740\u50CF\u8FD9\u6837\u5728\u4EE3\u7801\u4E2D\u76F4\u63A5\u5F15\u5165\u7EC4\u4EF6\u3002

import { createApp } from "vue";
import App from "./App.vue";
import { Button, Icon } from "@nutui/nutui";
import "@nutui/nutui/dist/style.css";
createApp(App).use(Button).use(Icon).mount("#app");

CDN \u5B89\u88C5\u4F7F\u7528\u793A\u4F8B

\u53EF\u4EE5\u901A\u8FC7 CDN \u7684\u65B9\u5F0F\u5F15\u5165\uFF0C \u53EF\u4EE5\u5728 jsdelivr \u548C unpkg \u7B49\u516C\u5171 CDN \u4E0A\u83B7\u53D6\u5230 NutUI\u3002

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- \u5F15\u5165\u6837\u5F0F -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui@next/dist/style.css" />
    <!-- \u5F15\u5165Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
    <!-- \u5F15\u5165NutUI\u7EC4\u4EF6\u5E93 -->
    <script src="https://cdn.jsdelivr.net/npm/@nutui/nutui@next/dist/nutui.umd.js"></script>
  </head>
  <body>
    <div id="app">
        
    </div>
    <script>
      // \u5728 #app \u6807\u7B7E\u4E0B\u6E32\u67D3\u4E00\u4E2A\u6309\u94AE\u7EC4\u4EF6
      const app = Vue.createApp({
        template: \`
        <nut-button type="primary">\u4E3B\u8981\u6309\u94AE</nut-button>
        <nut-button type="info">\u4FE1\u606F\u6309\u94AE</nut-button>
        <nut-button type="default">\u9ED8\u8BA4\u6309\u94AE</nut-button>
        <nut-button type="danger">\u5371\u9669\u6309\u94AE</nut-button>
        <nut-button type="warning">\u8B66\u544A\u6309\u94AE</nut-button>
        <nut-button type="success">\u6210\u529F\u6309\u94AE</nut-button>
        \`,
      });
      app.use(nutui);
      app.mount("#app");
    </script>
  </body>
</html>

\u5728\u9875\u9762\u4E2D\u76F4\u63A5\u5F15\u5165\uFF0C\u5C06\u65E0\u6CD5\u4F7F\u7528 \u4E3B\u9898\u5B9A\u5236 \u7B49\u529F\u80FD\u3002\u6211\u4EEC\u63A8\u8350\u4F7F\u7528 NPM \u6216 YARN \u65B9\u5F0F\u5B89\u88C5\uFF0C\u4E0D\u63A8\u8350\u5728\u9875\u9762\u4E2D\u76F4\u63A5\u5F15\u5165\u7684\u7528\u6CD5

\u4F7F\u7528\u6CE8\u610F\u4E8B\u9879

<nut-switch :active="true" size="base"></nut-switch>
`,34),c=[l],i={setup(e,{expose:s}){return s({frontmatter:{}}),(u,r)=>(n(),a("div",p,c))}};export{i as default};