nutui/3.1.9/starttaro.js

import{e as a,o as n,G as p}from"./vendor.js";const t={class:"markdown-body"},l=p(`<h1>\u5C0F\u7A0B\u5E8F\u5F00\u53D1</h1><h2>\u4ECB\u7ECD</h2><ul><li><p>\u4F5C\u4E3A\u4E00\u6B3E\u5177\u6709\u4EAC\u4E1C\u98CE\u683C\u7684\u7EC4\u4EF6\u5E93\uFF0C\u6211\u4EEC\u4E00\u76F4\u81F4\u529B\u4E8E\u7528\u5FC3\u6253\u9020\u66F4\u7B26\u5408\u5F00\u53D1\u8005\u4F53\u9A8C\u7684\u7EC4\u4EF6\u5E93\u3002NutUI 3.0 \u4E0A\u7EBF\u540E\u6211\u4EEC\u7814\u53D1\u56E2\u961F\u4E5F\u5728\u4E0D\u65AD\u7684\u4F18\u5316\u3001\u6D4B\u8BD5\u3001\u4F7F\u7528\u3001\u8FED\u4EE3 Vue3 \u7684\u76F8\u5173\u7EC4\u4EF6\uFF0C\u4F46\u662F\u5728\u8DE8\u7AEF\u5C0F\u7A0B\u5E8F\u7684\u5F00\u53D1\u8FC7\u7A0B\u4E2D\uFF0C\u53D1\u73B0\u6CA1\u6709\u5408\u9002\u7684\u7EC4\u4EF6\u5E93\u53EF\u4EE5\u652F\u6301\u591A\u7AEF\u5F00\u53D1\u3002\u4E3A\u4E86\u586B\u8865\u8FD9\u4E00\u7A7A\u767D\uFF0C\u540C\u65F6\u4E3A\u4E86\u4F18\u5316\u5F00\u53D1\u8005\u4F53\u9A8C\uFF0C\u8BA9 NutUI \u80FD\u591F\u4E3A\u66F4\u591A\u7684\u5F00\u53D1\u8005\u5E26\u6765\u4FBF\u5229\uFF0C\u6211\u4EEC\u51B3\u5B9A\u5728 NutUI \u4E2D\u589E\u52A0\u5C0F\u7A0B\u5E8F\u591A\u7AEF\u9002\u914D\u7684\u80FD\u529B\u3002</p></li><li><p>\u4E3A\u4E86\u7ED9\u5F00\u53D1\u8005\u63D0\u4F9B\u66F4\u9AD8\u6548\u4FBF\u6377\u7684\u5F00\u53D1\u65B9\u5F0F\uFF0CNutUI \u548C Taro \u5408\u529B\uFF0C\u73B0\u5DF2\u53EF\u4EE5\u7528 NutUI \u5F00\u53D1\u5C0F\u7A0B\u5E8F\u4E86\uFF0CNutUI \u63D0\u4F9B\u4E86 50+ \u7EC4\u4EF6\u6DB5\u76D6\u4E86\u65E5\u5E38\u4E1A\u52A1\u5F00\u53D1\u4F7F\u7528\u7684\u5927\u90E8\u5206\u7EC4\u4EF6\u3002</p></li><li><p>\u4E8C\u8005\u7684\u7ED3\u5408\uFF0C\u4E0D\u4EC5\u53EF\u4EE5\u8BA9\u5F00\u53D1\u8005\u4E00\u5904\u4EE3\u7801\uFF0C\u591A\u7AEF\u8FD0\u884C\uFF0C\u7545\u5FEB\u81EA\u5982\u5730\u5F00\u53D1\u5C0F\u7A0B\u5E8F\u3002\u66F4\u53EF\u4EE5\u5728\u5F00\u53D1\u8FC7\u7A0B\u4E2D\uFF0C\u4F7F\u7528\u5230\u66F4\u7F8E\u89C2\u3001\u66F4\u4FBF\u6377\u3001\u7EC4\u4EF6\u66F4\u4E30\u5BCC\u7684\u7EC4\u4EF6\u5E93\u3002\u6211\u4EEC\u5C06 NutUI \u548C Taro \u66F4\u5B8C\u7F8E\u5730\u63A5\u5408\u5230\u4E00\u8D77\uFF0CTaro \u5B98\u65B9\u5C06 NutUI \u4F5C\u4E3A Vue\u6280\u672F\u6808\u7684\u63A8\u8350\u7EC4\u4EF6\u5E93\u3002\u73B0\u5728\u5F00\u53D1\u8005\u5C06\u53EF\u4EE5\u4F7F\u7528 NutUI \u65E0\u7F1D\u5F00\u53D1 H5 \u548C\u591A\u7AEF\u5C0F\u7A0B\u5E8F\u3002</p></li></ul><h2>\u9884\u89C8</h2><blockquote><p>\u5FAE\u4FE1\u626B\u63CF\u4E0B\u65B9\u4E8C\u7EF4\u7801\u4F53\u9A8C\uFF0C\u4F53\u9A8C\u7EC4\u4EF6\u5E93\u793A\u4F8B , Demo \u6E90\u7801 <a href="https://github.com/jdf2e/nutui-demo/tree/master/taro">https://github.com/jdf2e/nutui-demo/tree/master/taro</a></p></blockquote><img width="200" src="https://storage.360buyimg.com/jdc-article/gh_f2231eb941be_258.jpg"><h2>\u5B89\u88C5</h2><ul><li>\u901A\u8FC7 Npm \u6216 Yarn \u5B89\u88C5</li></ul><h3>\u5B89\u88C5 Taro \u811A\u624B\u67B6</h3><pre><code class="language-bash"><span class="hljs-comment"># \u4F7F\u7528 npm \u5B89\u88C5 CLI</span>
npm install -g @tarojs/cli

<span class="hljs-comment"># OR \u4F7F\u7528 yarn \u5B89\u88C5 CLI</span>
yarn global add @tarojs/cli

<span class="hljs-comment"># OR \u5B89\u88C5\u4E86 cnpm\uFF0C\u4F7F\u7528 cnpm \u5B89\u88C5 CLI</span>
cnpm install -g @tarojs/cli
</code></pre><blockquote><p>\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</p></blockquote><pre><code class="language-bash">npm install -g mirror-config-china
</code></pre><h3>\u68C0\u67E5\u662F\u5426\u5B89\u88C5\u6210\u529F</h3><pre><code class="language-bash">taro -v
</code></pre><h3>\u9879\u76EE\u521D\u59CB\u5316</h3><p>\u4F7F\u7528\u547D\u4EE4\u521B\u5EFA\u6A21\u677F\uFF1A</p><pre><code class="language-bash">taro init myApp
</code></pre><h3>\u6309\u7167\u4E0B\u65B9\u56FE\u7247\u4F9D\u6B21\u9009\u62E9\uFF0C\u9009\u62E9 Vue3 + NutUI \u6A21\u677F</h3><img src="https://storage.360buyimg.com/jdc-article/taro.jpg"><h3>NPM \u4F7F\u7528\u793A\u4F8B</h3><blockquote><p>\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</p></blockquote><pre><code class="language-javascript"><span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue&quot;</span>;
<span class="hljs-keyword">import</span> App <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;./App.vue&quot;</span>;
<span class="hljs-keyword">import</span> NutUI <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@nutui/nutui-taro&quot;</span>;
<span class="hljs-keyword">import</span> <span class="hljs-string">&quot;@nutui/nutui-taro/dist/style.css&quot;</span>;
createApp(App).use(NutUI);
</code></pre><h4>\u63A8\u8350\u4F7F\u7528\u6309\u9700\u52A0\u8F7D</h4><p><a href="https://github.com/ant-design/babel-plugin-import">babel-plugin-import</a> \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</p><h5>\u5B89\u88C5\u63D2\u4EF6</h5><pre><code class="language-bash">npm install babel-plugin-import --save-dev
</code></pre><p>\u5728 <code>.babelrc</code> \u6216 <code>babel.config.js</code> \u4E2D\u6DFB\u52A0\u914D\u7F6E\uFF1A</p><pre><code class="language-javascript">{
  <span class="hljs-comment">// ...</span>
  <span class="hljs-attr">plugins</span>: [
    [
      <span class="hljs-string">&quot;import&quot;</span>,
      {
        <span class="hljs-string">&quot;libraryName&quot;</span>: <span class="hljs-string">&quot;@nutui/nutui&quot;</span>,
        <span class="hljs-string">&quot;libraryDirectory&quot;</span>: <span class="hljs-string">&quot;dist/packages/_es&quot;</span>,
        <span class="hljs-string">&quot;camel2DashComponentName&quot;</span>: <span class="hljs-literal">false</span>
      },
      <span class="hljs-string">&#39;nutui3-vue&#39;</span>
    ],
    [
      <span class="hljs-string">&quot;import&quot;</span>,
      {
        <span class="hljs-string">&quot;libraryName&quot;</span>: <span class="hljs-string">&quot;@nutui/nutui-taro&quot;</span>,
        <span class="hljs-string">&quot;libraryDirectory&quot;</span>: <span class="hljs-string">&quot;dist/packages/_es&quot;</span>,
        <span class="hljs-string">&quot;camel2DashComponentName&quot;</span>: <span class="hljs-literal">false</span>
      },
      <span class="hljs-string">&#39;nutui3-taro&#39;</span>
    ]
  ]
}
</code></pre><pre><code class="language-javascript"><span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue&quot;</span>;
<span class="hljs-keyword">import</span> App <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;./App.vue&quot;</span>;
<span class="hljs-keyword">import</span> { Button, Cell, Icon } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@nutui/nutui-taro&quot;</span>;
<span class="hljs-keyword">import</span> <span class="hljs-string">&quot;@nutui/nutui-taro/dist/style.css&quot;</span>;
createApp(App).use(Button).use(Cell).use(Icon);
</code></pre><h4>\u5B9A\u5236\u5316\u4E3B\u9898\u4F7F\u7528</h4><p>\u9996\u5148\u9700\u8981\u5728 <strong>app.ts</strong> \u6587\u4EF6\u4E2D\u914D\u7F6E \u4F7F\u7528 scss \u6837\u5F0F\u6587\u4EF6\u5982\uFF1A</p><pre><code class="language-javascript"><span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue&quot;</span>;
<span class="hljs-keyword">import</span> App <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;./App.vue&quot;</span>;
<span class="hljs-keyword">import</span> { Button, Cell, Icon } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@nutui/nutui-taro&quot;</span>;
<span class="hljs-comment">// \u5B9A\u5236\u5316\u4E3B\u9898\u5FC5\u987B\u4F7F\u7528 scss </span>
<span class="hljs-keyword">import</span> <span class="hljs-string">&#39;@nutui/nutui-taro/dist/styles/themes/default.scss&#39;</span>;
createApp(App).use(Button).use(Cell).use(Icon);
</code></pre><p>\u521B\u5EFA\u5B9A\u5236\u5316\u4E3B\u9898\u6837\u5F0F\u6587\u4EF6 <code>assets/styles/custom_theme.scss</code> \uFF0C\u6837\u5F0F\u53D8\u91CF\u8986\u76D6\u8868\u53C2\u8003 <a href="https://github.com/jdf2e/nutui/blob/next/src/packages/styles/variables.scss">nutui variables</a></p><pre><code class="language-scss"><span class="hljs-variable">$primary-color</span>: <span class="hljs-number">#478EF2</span>;
<span class="hljs-variable">$primary-color-end</span>: <span class="hljs-number">#496AF2</span>;
</code></pre><p>\u7136\u540E\u9700\u8981\u5728 <code>config/index.js</code> \u6587\u4EF6\u4E2D\u914D\u7F6E <code>scss</code> \u6587\u4EF6\u5168\u5C40\u8986\u76D6\u5982\uFF1A</p><pre><code class="language-javascript"><span class="hljs-keyword">const</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">&#39;path&#39;</span>);
<span class="hljs-keyword">const</span> config = {
  <span class="hljs-attr">deviceRatio</span>: {
    <span class="hljs-number">640</span>: <span class="hljs-number">2.34</span> / <span class="hljs-number">2</span>,
    <span class="hljs-number">750</span>: <span class="hljs-number">1</span>,
    <span class="hljs-number">828</span>: <span class="hljs-number">1.81</span> / <span class="hljs-number">2</span>,
    <span class="hljs-number">375</span>: <span class="hljs-number">2</span> / <span class="hljs-number">1</span>
  },
  <span class="hljs-attr">sass</span>: {
    <span class="hljs-attr">resource</span>: [
        path.resolve(__dirname, <span class="hljs-string">&#39;..&#39;</span>, <span class="hljs-string">&#39;src/assets/styles/custom_theme.scss&#39;</span>)
    ]
  },
  <span class="hljs-comment">// ...</span>
</code></pre><p><code>vue</code> \u6587\u4EF6\u4E2D\u4F7F\u7528\u67E5\u770B\u6548\u679C</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">nut-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span> &gt;</span>nutui<span class="hljs-tag">&lt;/<span class="hljs-name">nut-button</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
</code></pre>`,38),e=[l],h={setup(o,{expose:s}){return s({frontmatter:{}}),(r,u)=>(n(),a("div",t,e))}};export{h as default};