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

快速上手

预览

扫描下方二维码体验，体验 Vue3 组件库示例

NPM 安装

# Vue2 项目\nnpm i @nutui/nutui\n\n# Vue3 项目\nnpm i @nutui/nutui@next\n\n# taro 小程序项目\nnpm i @nutui/nutui-taro\n

CDN 安装使用示例

可以通过 CDN 的方式引入，可以在 jsdelivr 和 unpkg 等公共 CDN 上获取到 NutUI。

<!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@next/dist/style.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@next/dist/nutui.umd.js"></script>\n  </head>\n  <body>\n    <div id="app">\n        \n    </div>\n    <script>\n      // 在 #app 标签下渲染一个按钮组件\n      const app = Vue.createApp({\n        template: `\n        <nut-button type="primary">主要按钮</nut-button>\n        <nut-button type="info">信息按钮</nut-button>\n        <nut-button type="default">默认按钮</nut-button>\n        <nut-button type="danger">危险按钮</nut-button>\n        <nut-button type="warning">警告按钮</nut-button>\n        <nut-button type="success">成功按钮</nut-button>\n        `,\n      });\n      app.use(nutui);\n      app.mount("#app");\n    </script>\n  </body>\n</html>\n

在页面中直接引入，将无法使用 主题定制 等功能。我们推荐使用 NPM 或 YARN 方式安装，不推荐在页面中直接引入的用法

NPM 使用示例

import { createApp } from "vue";\nimport App from "./App.vue";\nimport NutUI from "@nutui/nutui";\nimport "@nutui/nutui/dist/style.css";\ncreateApp(App).use(NutUI).mount("#app");\n

注意：这种方式将会导入所有组件

注意事项

使用:prop传递数据格式为数字、布尔值或函数时，必须带:(兼容字符串类型除外)，比如：

<nut-switch :active="true" size="base"></nut-switch>\n

组件 css 单位使用的是 px，如果你的项目中需要 rem 单位，可借助一些工具进行转换，比如 webpack 的 px2rem-loader、postcss 的 postcss-plugin-px2rem 插件等

',19)],l={setup:(n,{expose:l})=>(l({frontmatter:{}}),(n,l)=>(a(),s("div",t,p)))};export{l as default};

快速上手

预览

NPM 安装

CDN 安装使用示例

NPM 使用示例

推荐使用按需加载

注意事项