Home Explore Help
Sign In
githab
/
nutui
3
0
Fork 0
Files
Tree: c07d6c4e18
Branches Tags
nutui
/
3.1.10
/
start.js

start.js 13 KB
History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105 
  1. import{e as a,o as n,G as t}from"./vendor.js";const p={class:"markdown-body"},l=t(`<h1>\u5FEB\u901F\u4E0A\u624B</h1><h2>\u9884\u89C8</h2><blockquote><p>\u626B\u63CF\u4E0B\u65B9\u4E8C\u7EF4\u7801\u4F53\u9A8C\uFF0C\u4F53\u9A8C Vue3 \u7EC4\u4EF6\u5E93\u793A\u4F8B</p></blockquote><img src="https://img12.360buyimg.com/imagetools/jfs/t1/162421/39/13392/9425/6052ea60E592310a9/264bdff23ef5fe95.png" width="200" alt="NutUI"><h2>NPM \u5B89\u88C5</h2><pre><code class="language-bash"><span class="hljs-comment"># Vue2 \u9879\u76EE \u9700\u8981\u53C2\u8003 2.x \u6587\u6863 https://nutui.jd.com/2x</span>
    2. 

  2. npm i @nutui/nutui
    3. 

  3. 

  4. <span class="hljs-comment"># Vue3 \u9879\u76EE</span>
    5. 

  5. npm i @nutui/nutui@next
    6. 

  6. 

  7. <span class="hljs-comment"># taro \u5C0F\u7A0B\u5E8F\u9879\u76EE</span>
    8. 

  8. npm i @nutui/nutui-taro
    9. 

  9. </code></pre><h3>NPM \u4F7F\u7528\u793A\u4F8B</h3><h4>\u5BFC\u5165\u5168\u90E8\u7EC4\u4EF6</h4><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\uFF0C\u6211\u4EEC\u63A8\u8350\u4F7F\u7528\u6309\u9700\u52A0\u8F7D</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>;
    10. 

  10. <span class="hljs-keyword">import</span> App <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;./App.vue&quot;</span>;
    11. 

  11. <span class="hljs-comment">// \u6CE8\u610F\uFF1A\u8FD9\u79CD\u65B9\u5F0F\u5C06\u4F1A\u5BFC\u5165\u6240\u6709\u7EC4\u4EF6</span>
    12. 

  12. <span class="hljs-keyword">import</span> NutUI <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@nutui/nutui&quot;</span>;
    13. 

  13. <span class="hljs-keyword">import</span> <span class="hljs-string">&quot;@nutui/nutui/dist/style.css&quot;</span>;
    14. 

  14. createApp(App).use(NutUI).mount(<span class="hljs-string">&quot;#app&quot;</span>);
    15. 

  15. </code></pre><h4>Vite \u6784\u5EFA\u5DE5\u5177 \u901A\u8FC7 vite-plugin \u4F7F\u7528\u6309\u9700\u52A0\u8F7D</h4><h4>\u4E3A\u4EC0\u4E48\u53EA\u6309\u9700\u5F15\u5165\u6837\u5F0F</h4><p>\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</p><p><a href="https://vitejs.dev/">Vite</a> \u6784\u5EFA\u5DE5\u5177\uFF0C\u4F7F\u7528 <a href="https://github.com/anncwb/vite-plugin-style-import">vite-plugin-style-import</a> \u5B9E\u73B0\u6309\u9700\u5F15\u5165\u3002</p><h5>\u5B89\u88C5\u63D2\u4EF6</h5><pre><code class="language-bash">npm install vite-plugin-style-import --save-dev
    16. 

  16. </code></pre><p>\u5728 <code>vite.config</code> \u4E2D\u6DFB\u52A0\u914D\u7F6E\uFF1A</p><pre><code class="language-javascript"><span class="hljs-keyword">import</span> vue <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@vitejs/plugin-vue&#39;</span>
    17. 

  17. <span class="hljs-keyword">import</span> styleImport <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;vite-plugin-style-import&#39;</span>;
    18. 

  18. <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    19. 

  19.   <span class="hljs-attr">plugins</span>: [
    20. 

  20.     vue(),
    21. 

  21.     styleImport({
    22. 

  22.       <span class="hljs-attr">libs</span>: [
    23. 

  23.         {
    24. 

  24.           <span class="hljs-attr">libraryName</span>: <span class="hljs-string">&#39;@nutui/nutui&#39;</span>,
    25. 

  25.           <span class="hljs-attr">libraryNameChangeCase</span>: <span class="hljs-string">&#39;pascalCase&#39;</span>,
    26. 

  26.           <span class="hljs-attr">resolveStyle</span>: <span class="hljs-function">(<span class="hljs-params">name</span>) =&gt;</span> {
    27. 

  27.             <span class="hljs-keyword">return</span> <span class="hljs-string">\`@nutui/nutui/dist/packages/<span class="hljs-subst">\${name}</span>/index.scss\`</span>
    28. 

  28.           }
    29. 

  29.         }
    30. 

  30.       ],
    31. 

  31.     }),
    32. 

  32.   ],
    33. 

  33.   <span class="hljs-attr">css</span>: {
    34. 

  34.     <span class="hljs-attr">preprocessorOptions</span>: {
    35. 

  35.       <span class="hljs-attr">scss</span>: {
    36. 

  36.         <span class="hljs-comment">// \u914D\u7F6E nutui \u5168\u5C40 scss \u53D8\u91CF</span>
    37. 

  37.         <span class="hljs-attr">additionalData</span>: <span class="hljs-string">\`@import &quot;@nutui/nutui/dist/styles/variables.scss&quot;;\`</span>
    38. 

  38.       }
    39. 

  39.     }
    40. 

  40.   }
    41. 

  41. };
    42. 

  42. </code></pre><h4>WebPack \u6784\u5EFA\u5DE5\u5177 \u901A\u8FC7 babel \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
    43. 

  43. </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">{
    44. 

  44.   <span class="hljs-comment">// ...</span>
    45. 

  45.   <span class="hljs-attr">plugins</span>: [
    46. 

  46.     [
    47. 

  47.       <span class="hljs-string">&quot;import&quot;</span>,
    48. 

  48.       {
    49. 

  49.         <span class="hljs-string">&quot;libraryName&quot;</span>: <span class="hljs-string">&quot;@nutui/nutui&quot;</span>,
    50. 

  50.         <span class="hljs-string">&quot;libraryDirectory&quot;</span>: <span class="hljs-string">&quot;dist/packages/_es&quot;</span>,
    51. 

  51.         <span class="hljs-string">&quot;camel2DashComponentName&quot;</span>: <span class="hljs-literal">false</span>
    52. 

  52.       },
    53. 

  53.       <span class="hljs-string">&#39;nutui3-vue&#39;</span>
    54. 

  54.     ],
    55. 

  55.     [
    56. 

  56.       <span class="hljs-string">&quot;import&quot;</span>,
    57. 

  57.       {
    58. 

  58.         <span class="hljs-string">&quot;libraryName&quot;</span>: <span class="hljs-string">&quot;@nutui/nutui-taro&quot;</span>,
    59. 

  59.         <span class="hljs-string">&quot;libraryDirectory&quot;</span>: <span class="hljs-string">&quot;dist/packages/_es&quot;</span>,
    60. 

  60.         <span class="hljs-string">&quot;camel2DashComponentName&quot;</span>: <span class="hljs-literal">false</span>
    61. 

  61.       },
    62. 

  62.       <span class="hljs-string">&#39;nutui3-taro&#39;</span>
    63. 

  63.     ]
    64. 

  64.   ]
    65. 

  65. }
    66. 

  66. </code></pre><p>\u63A5\u7740\u50CF\u8FD9\u6837\u5728\u4EE3\u7801\u4E2D\u76F4\u63A5\u5F15\u5165\u7EC4\u4EF6\u3002</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>;
    67. 

  67. <span class="hljs-keyword">import</span> App <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;./App.vue&quot;</span>;
    68. 

  68. <span class="hljs-keyword">import</span> { Button, Icon } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@nutui/nutui&quot;</span>;
    69. 

  69. <span class="hljs-keyword">import</span> <span class="hljs-string">&quot;@nutui/nutui/dist/style.css&quot;</span>;
    70. 

  70. createApp(App).use(Button).use(Icon).mount(<span class="hljs-string">&quot;#app&quot;</span>);
    71. 

  71. </code></pre><h4>CDN \u5B89\u88C5\u4F7F\u7528\u793A\u4F8B</h4><blockquote><p>\u53EF\u4EE5\u901A\u8FC7 CDN \u7684\u65B9\u5F0F\u5F15\u5165\uFF0C \u53EF\u4EE5\u5728 <strong>jsdelivr</strong> \u548C <strong>unpkg</strong> \u7B49\u516C\u5171 CDN \u4E0A\u83B7\u53D6\u5230 NutUI\u3002</p></blockquote><pre><code class="language-html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span>
    72. 

  72. <span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span>
    73. 

  73.   <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
    74. 

  74.     <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span> /&gt;</span>
    75. 

  75.     <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span> /&gt;</span>
    76. 

  76.     <span class="hljs-comment">&lt;!-- \u5F15\u5165\u6837\u5F0F --&gt;</span>
    77. 

  77.     <span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;stylesheet&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;https://cdn.jsdelivr.net/npm/@nutui/nutui@next/dist/style.css&quot;</span> /&gt;</span>
    78. 

  78.     <span class="hljs-comment">&lt;!-- \u5F15\u5165Vue --&gt;</span>
    79. 

  79.     <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://cdn.jsdelivr.net/npm/vue@next&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
    80. 

  80.     <span class="hljs-comment">&lt;!-- \u5F15\u5165NutUI\u7EC4\u4EF6\u5E93 --&gt;</span>
    81. 

  81.     <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://cdn.jsdelivr.net/npm/@nutui/nutui@next/dist/nutui.umd.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
    82. 

  82.   <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
    83. 

  83.   <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
    84. 

  84.     <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span>
    85. 

  85.         
    86. 

  86.     <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    87. 

  87.     <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="handlebars"><span class="xml">
    88. 

  88.       // \u5728 #app \u6807\u7B7E\u4E0B\u6E32\u67D3\u4E00\u4E2A\u6309\u94AE\u7EC4\u4EF6
    89. 

  89.       const app = Vue.createApp({
    90. 

  90.         template: \`
    91. 

  91.         <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>\u4E3B\u8981\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">nut-button</span>&gt;</span>
    92. 

  92.         <span class="hljs-tag">&lt;<span class="hljs-name">nut-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;info&quot;</span>&gt;</span>\u4FE1\u606F\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">nut-button</span>&gt;</span>
    93. 

  93.         <span class="hljs-tag">&lt;<span class="hljs-name">nut-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;default&quot;</span>&gt;</span>\u9ED8\u8BA4\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">nut-button</span>&gt;</span>
    94. 

  94.         <span class="hljs-tag">&lt;<span class="hljs-name">nut-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;danger&quot;</span>&gt;</span>\u5371\u9669\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">nut-button</span>&gt;</span>
    95. 

  95.         <span class="hljs-tag">&lt;<span class="hljs-name">nut-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;warning&quot;</span>&gt;</span>\u8B66\u544A\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">nut-button</span>&gt;</span>
    96. 

  96.         <span class="hljs-tag">&lt;<span class="hljs-name">nut-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;success&quot;</span>&gt;</span>\u6210\u529F\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">nut-button</span>&gt;</span>
    97. 

  97.         \`,
    98. 

  98.       });
    99. 

  99.       app.use(nutui);
    100. 

  100.       app.mount(&quot;#app&quot;);
    101. 

  101.     </span></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
    102. 

  102.   <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
    103. 

  103. <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span>
    104. 

  104. </code></pre><blockquote><p>\u5728\u9875\u9762\u4E2D\u76F4\u63A5\u5F15\u5165\uFF0C\u5C06\u65E0\u6CD5\u4F7F\u7528 <strong>\u4E3B\u9898\u5B9A\u5236</strong> \u7B49\u529F\u80FD\u3002\u6211\u4EEC\u63A8\u8350\u4F7F\u7528 <em>NPM</em> \u6216 <em>YARN</em> \u65B9\u5F0F\u5B89\u88C5\uFF0C\u4E0D\u63A8\u8350\u5728\u9875\u9762\u4E2D\u76F4\u63A5\u5F15\u5165\u7684\u7528\u6CD5</p></blockquote><h2>\u4F7F\u7528\u6CE8\u610F\u4E8B\u9879</h2><ul><li>\u4F7F\u7528:prop\u4F20\u9012\u6570\u636E\u683C\u5F0F\u4E3A \u6570\u5B57\u3001\u5E03\u5C14\u503C\u6216\u51FD\u6570\u65F6\uFF0C\u5FC5\u987B\u5E26:(\u517C\u5BB9\u5B57\u7B26\u4E32\u7C7B\u578B\u9664\u5916)\uFF0C\u6BD4\u5982\uFF1A</li></ul><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-switch</span> <span class="hljs-attr">:active</span>=<span class="hljs-string">&quot;true&quot;</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;base&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-switch</span>&gt;</span>
    105. 

  105. </code></pre><ul><li>\u7EC4\u4EF6 css \u5355\u4F4D\u4F7F\u7528\u7684\u662F <strong>px</strong>\uFF0C\u5982\u679C\u4F60\u7684\u9879\u76EE\u4E2D\u9700\u8981 <strong>rem</strong> \u5355\u4F4D\uFF0C\u53EF\u501F\u52A9\u4E00\u4E9B\u5DE5\u5177\u8FDB\u884C\u8F6C\u6362\uFF0C\u6BD4\u5982 <a href="https://www.webpackjs.com/">webpack</a> \u7684 <a href="https://www.npmjs.com/package/px2rem-loader">px2rem-loader</a>\u3001<a href="https://github.com/postcss/postcss">postcss</a> \u7684 <a href="https://www.npmjs.com/package/postcss-plugin-px2rem">postcss-plugin-px2rem</a> \u63D2\u4EF6\u7B49</li></ul>`,34),c=[l],i={setup(e,{expose:s}){return s({frontmatter:{}}),(u,r)=>(n(),a("div",p,c))}};export{i as default};
    106.