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

\u5C0F\u7A0B\u5E8F\u5F00\u53D1

\u4ECB\u7ECD

\u9884\u89C8

\u5FAE\u4FE1\u626B\u63CF\u4E0B\u65B9\u4E8C\u7EF4\u7801\u4F53\u9A8C\uFF0C\u4F53\u9A8C\u7EC4\u4EF6\u5E93\u793A\u4F8B , Demo \u6E90\u7801 https://github.com/jdf2e/nutui-demo/tree/master/taro

\u5B89\u88C5

\u5B89\u88C5 Taro \u811A\u624B\u67B6

# \u4F7F\u7528 npm \u5B89\u88C5 CLI
npm install -g @tarojs/cli

# OR \u4F7F\u7528 yarn \u5B89\u88C5 CLI
yarn global add @tarojs/cli

# OR \u5B89\u88C5\u4E86 cnpm\uFF0C\u4F7F\u7528 cnpm \u5B89\u88C5 CLI
cnpm install -g @tarojs/cli

\u503C\u5F97\u4E00\u63D0\u7684\u662F\uFF0C\u5982\u679C\u5B89\u88C5\u8FC7\u7A0B\u51FA\u73B0sass\u76F8\u5173\u7684\u5B89\u88C5\u9519\u8BEF\uFF0C\u8BF7\u5728\u5B89\u88C5 mirror-config-china \u540E\u91CD\u8BD5\u3002

npm install -g mirror-config-china

\u68C0\u67E5\u662F\u5426\u5B89\u88C5\u6210\u529F

taro -v

\u9879\u76EE\u521D\u59CB\u5316

\u4F7F\u7528\u547D\u4EE4\u521B\u5EFA\u6A21\u677F\uFF1A

taro init myApp

\u6309\u7167\u4E0B\u65B9\u56FE\u7247\u4F9D\u6B21\u9009\u62E9\uFF0C\u9009\u62E9 Vue3 + NutUI \u6A21\u677F

NPM \u4F7F\u7528\u793A\u4F8B

\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

import { createApp } from "vue";
import App from "./App.vue";
import NutUI from "@nutui/nutui-taro";
import "@nutui/nutui-taro/dist/style.css";
createApp(App).use(NutUI);

\u63A8\u8350\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'
    ]
  ]
}

import { createApp } from "vue";
import App from "./App.vue";
import { Button, Cell, Icon } from "@nutui/nutui-taro";
import "@nutui/nutui-taro/dist/style.css";
createApp(App).use(Button).use(Cell).use(Icon);

\u5B9A\u5236\u5316\u4E3B\u9898\u4F7F\u7528

\u9996\u5148\u9700\u8981\u5728 app.ts \u6587\u4EF6\u4E2D\u914D\u7F6E \u4F7F\u7528 scss \u6837\u5F0F\u6587\u4EF6\u5982\uFF1A

import { createApp } from "vue";
import App from "./App.vue";
import { Button, Cell, Icon } from "@nutui/nutui-taro";
// \u5B9A\u5236\u5316\u4E3B\u9898\u5FC5\u987B\u4F7F\u7528 scss 
import '@nutui/nutui-taro/dist/styles/themes/default.scss';
createApp(App).use(Button).use(Cell).use(Icon);

\u521B\u5EFA\u5B9A\u5236\u5316\u4E3B\u9898\u6837\u5F0F\u6587\u4EF6 assets/styles/custom_theme.scss \uFF0C\u6837\u5F0F\u53D8\u91CF\u8986\u76D6\u8868\u53C2\u8003 nutui variables

$primary-color: #478EF2;
$primary-color-end: #496AF2;

\u7136\u540E\u9700\u8981\u5728 config/index.js \u6587\u4EF6\u4E2D\u914D\u7F6E scss \u6587\u4EF6\u5168\u5C40\u8986\u76D6\u5982\uFF1A

const path = require('path');
const config = {
  deviceRatio: {
    640: 2.34 / 2,
    750: 1,
    828: 1.81 / 2,
    375: 2 / 1
  },
  sass: {
    resource: [
        path.resolve(__dirname, '..', 'src/assets/styles/custom_theme.scss')
    ]
  },
  // ...

vue \u6587\u4EF6\u4E2D\u4F7F\u7528\u67E5\u770B\u6548\u679C

<template>
  <view>
      <nut-button type="primary" >nutui</nut-button>
  </view>
</template>
`,38),e=[l],h={setup(o,{expose:s}){return s({frontmatter:{}}),(r,u)=>(n(),a("div",t,e))}};export{h as default};