SnowDesign
开始
组件
开始

快速开始

更多组件火速更新中... 💪

安装 SnowDesign

# 安装 react 版
npm install @semi-design/components

# 安装 vue3 版
npm install @semi-design/vue3

使用组件

🚀 React 版

ES6 模块引入

  • 组件分包构建，支持按需导入，自动 TreeShaking。
Button

UMD 引入

  • 可以通过 script 标签直接引入文件，并使用全局变量 SnowUI。
  • @x.x.x/@latest，为版本号，可根据需要进行调整。
资源名称资源路径
@snow-design/components (min)https://unpkg.com/@snow-design/components@latest/dist/umd/components.js
@snow-design/components (normal)https://unpkg.com/@snow-design/components@latest/dist/umd/components.min.js
snow.csshttps://unpkg.com/@snow-design/components@latest/dist/css/snow.css
<html>
    <head>
        <!-- 确保引入了 ReactDOM 及需要的依赖 -->
        <!-- 引入全局变量 SnowUI -->
        <script src="https://unpkg.com/@snow-design/components@latest/dist/umd/components.js"></script>
        <!-- 引入全局样式 -->
        <link rel="stylesheet" href="https://unpkg.com/@snow-design/components@latest/dist/css/snow.css" />
    </head>
    <body>
        <div id="root"></div>
    </body>
    <script type="text/babel">
        const { Button } = SnowUI;
        ReactDOM.render(<Button type="warning">你好</Button>, document.getElementById('root'));
    </script>
</html>

🔥 Vue3 版

  • 使用 <s-组件名> 或者 <S组件名> 引用组件。
SButton

全量引入

  • 直接加载 @snow-design/vue3 的默认导出注册所有全局组件。
  • 不建议您这样做，可能会导致打包产物过大。
import { createApp } from 'vue';
import './style.css';
import App from './App.vue';
import SnowDesign from '@snow-design/vue3';

createApp(App).use(SnowDesign).mount('#app');

按需引入

  • 注册您需要使用的全局组件。
import { createApp } from 'vue';
import './style.css';
import App from './App.vue';
import { Button, Pagination } from '@snow-design/vue3';

createApp(App).use(Button).use(Pagination).mount('#app');

ES6 模块引入

  • 按需引入您所需要的组件，需要在 script 中引用该组件并使用。
ON THIS PAGE