| 1 |
- import{c as t,o as n,A as s}from"./vendor.80bf15c7.js";const e={class:"markdown-body"},u=s('<h1>快速上手</h1><h2>安装</h2><ul><li>通过 NPM 或 YARN 安装（推荐）</li></ul><h4>NPM</h4><pre><code class="language-bash">npm i @nutui/nutui@next -S\n</code></pre><h4>YARN</h4><pre><code class="language-bash">yarn add @nutui/nutui@next\n</code></pre><blockquote><p>如果你的网络环境不佳，不妨试试国内的npm镜像</p></blockquote><blockquote><p>默认安装最新版 2.x，如需使用 1.x 版本，请指定版本号，如： <code>npm i @nutui/nutui@1.3.2 -S</code></p></blockquote><ul><li>页面直接引用</li></ul><p>在页面中使用 script 和 link 标签直接引入文件，<strong>NutUI</strong> 将会自动注册。我们在 npm 发布包内的 dist 目录下提供了 <strong>nutui.js</strong> <strong>nutui.css</strong> 以及 <strong>nutui.min.js</strong> <strong>nutui.min.css</strong>。</p><p>当然你也可以通过 CDN 的方式引入， 可以在 <strong>jsdelivr</strong> 和 <strong>unpkg</strong> 等公共 CDN 上获取到 NutUI。我们推荐链接到一个你可以手动更新的指定版本号。</p><pre><code class="language-html"><!-- 开发环境版本，包含了有帮助的命令行警告 -->\n<!-- 引入样式 -->\n<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui@beta/dist/nutui.css">\n<!-- 引入Vue -->\n<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>\n<!-- 引入组件库 -->\n<script src="https://cdn.jsdelivr.net/npm/@nutui/nutui@beta/dist/nutui.js"></script>\n</code></pre><p>或者</p><pre><code class="language-html"><!-- 生产环境版本，优化了尺寸和速度 -->\n<!-- 引入样式 -->\n<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui@beta/dist/nutui.min.css">\n<!-- 引入Vue -->\n<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>\n<!-- 引入组件库 -->\n<script src="https://cdn.jsdelivr.net/npm/@nutui/nutui@beta/dist/nutui.min.js"></script>\n</code></pre><p>CDN 使用示例</p><pre><code class="language-html"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <!-- 引入样式 -->\n <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui@beta/dist/nutui.min.css">\n <!-- 引入Vue -->\n <script src="https://cdn.jsdelivr.net/npm/vue@next"></script>\n <!-- 引入NutUI组件库 -->\n <script src="https://cdn.jsdelivr.net/npm/@nutui/nutui@beta/dist/nutui.min.js"></script>\n</head>\n<body>\n <div id="app">\n <nut-button>Button</nut-button>\n </div>\n <script>\n new Vue({el: '#app'});\n </script>\n</body>\n</html>\n</code></pre><p>CDN 按需加载引入示例</p><pre><code class="language-html"><!DOCTYPE html>\n<html>\n <head>\n <meta charset="UTF-8" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n </head>\n\n <body>\n <div id="app">\n <nut-button>cdn按需加载</nut-button>\n </div>\n\n <!-- 开发环境版本，包含了有帮助的命令行警告 -->\n <!-- 引入样式 -->\n <link\n rel="stylesheet"\n href="https://cdn.jsdelivr.net/npm/@nutui/nutui@latest/dist/packages/button/button.css"\n />\n <!-- 引入Vue -->\n <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>\n <!-- 引入组件库 -->\n <script src="https://cdn.jsdelivr.net/npm/@nutui/nutui@latest/dist/packages/button/button.js"></script>\n <script>\n Vue.component(button.default.name, button.default);\n new Vue({\n el: "#app"\n });\n </script>\n </body>\n</html>\n</code></pre><blockquote><p>在页面中直接引入，将无法使用 <strong>主题定制</strong> 等功能。我们推荐使用 <em>NPM</em> 或 <em>YARN</em> 方式安装，不推荐在页面中直接引入的用法</p></blockquote><ul><li>通过 <strong>Vue CLI</strong> 图形化界面安装</li></ul><p>如果你的项目是使用 <a href="https://cli.vuejs.org/zh/">Vue CLI</a> 脚手架搭建，那么你还可以通过 <strong>Vue CLI</strong> 提供的图形化界面安装 <strong>NutUI</strong> ：在图形化界面的 <strong>依赖</strong> 界面，点击右上角 <strong>安装依赖</strong> 按钮，搜索 <strong>@nutui/nutui</strong> 安装即可。</p><h2>加载示例</h2><pre><code class="language-javascript">import Vue from 'vue';\nimport NutUI from '@nutui/nutui';\nimport '@nutui/nutui/dist/nutui.css';\n\nNutUI.install(Vue);\n</code></pre><blockquote><p>注意：这种方式将会导入所有组件</p></blockquote><h2>按需加载</h2><p>以下两种方式都可以实现只加载用到的组件，从而减少加载的文件体积。</p><h3>1. 使用 webpack 插件 <strong><a href="https://www.npmjs.com/package/@nutui/babel-plugin-separate-import">@nutui/babel-plugin-separate-import</a></strong> (推荐)</h3><p>首先安装 <strong>@nutui/babel-plugin-separate-import</strong> 插件</p><pre><code class="language-bash">npm i @nutui/babel-plugin-separate-import -D\n</code></pre><p>然后配置一下babel的配置文件</p><pre><code class="language-bash">{\n "plugins": [\n ["@nutui/babel-plugin-separate-import", {\n "style": "scss"\n }]\n ]\n}\n</code></pre><blockquote><p>style 选项值为 “css” 时加载组件对应的css文件，为 “scss” 时加载对应的scss文件。无style选项时，不自动加载样式文件。</p></blockquote><p>接下来，我们就可以在项目里只引入用到的组件了。默认情况下，样式也无需单独引入。插件会自动将代码转换为方式二的手动引入方式。</p><pre><code class="language-javascript">import Vue from 'vue';\nimport { Dialog,Picker } from '@nutui/nutui';\n\nDialog.install(Vue);\nPicker.install(Vue);\n</code></pre><p>如果需要按需加载 scss 文件（如需要自定义主题）时，除了需要把 style 选项值设为 <strong>scss</strong> 外，还需要修改 webpack 配置文件的 sass-loader 配置，如下所示：</p><pre><code class="language-bash">{\n loader: 'sass-loader',\n options: {\n data: `@import "@nutui/nutui/dist/styles/index.scss"; `\n }\n}\n</code></pre><p><code>vue.config.js</code> VueCLI3 配置方式</p><pre><code class="language-bash">module.exports = {\n css: {\n loaderOptions: {\n // 给 sass-loader 传递选项\n scss: {\n // @/ 是 src/ 的别名\n // 注意：在 sass-loader v7 中，这个选项名是 "data"\n prependData: ` \n @import "@/assets/custom_theme.scss";\n @import "@nutui/nutui/dist/styles/index.scss";\n `,\n }\n },\n }\n}\n</code></pre><blockquote><p>VueCLI 3 相关Demo 请查看 <a href="https://github.com/jdf2e/nutui-demo">NutUI Demo</a></p></blockquote><h3>2. 手动引入</h3><pre><code class="language-javascript">import Vue from 'vue';\nimport Button from '@nutui/nutui/dist/packages/button/button.js'; // 加载构建后的JS\nimport '@nutui/nutui/dist/packages/button/button.css'; //加载构建后的CSS\n//主题定制等场景需要加载SCSS,而不是构建后的CSS\n//import '@nutui/nutui/dist/packages/button/button.scss'; \n\nButton.install(Vue);\n</code></pre><h2>组件使用</h2><p>1.使用:prop传递数据格式为 数字、布尔值或函数时，必须带:(兼容字符串类型除外)，比如：</p><pre><code class="language-html"><nut-switch :active="true" size="base"></nut-switch>\n</code></pre><p>2.组件 css 单位使用的是 <strong>px</strong>，如果你的项目中需要 <strong>rem</strong> 单位，可借助一些工具进行转换，比如 <a href="https://www.webpackjs.com/">webpack</a> 的 <a href="https://www.npmjs.com/package/px2rem-loader">px2rem-loader</a>、<a href="https://github.com/postcss/postcss">postcss</a> 的 <a href="https://www.npmjs.com/package/postcss-plugin-px2rem">postcss-plugin-px2rem</a> 插件等</p><p>VueCLI3 配置示例 <code>vue.config.js</code></p><pre><code class="language-javascript">const pxtorem = require('postcss-pxtorem');\nmodule.exports = {\n css: {\n loaderOptions: {\n postcss: {\n plugins: [\n pxtorem({\n rootValue: 37.5,\n propList: ['*']\n })\n ]\n }\n }\n }\n}\n</code></pre><p>3.组件具体用法以文档为准</p><p>4.组件使用过程中如有问题或建议，欢迎<a href="https://github.com/jdf2e/nutui/issues">反馈</a></p>',50),o={expose:[],setup:s=>(s,o)=>(n(),t("div",e,[u]))};export default o;
|
