ONES Design UI 组件库环境搭建

这个 ONES Design UI 组件库 是基于 Ant DesignReact UI 组件库,主要用于企业级研发管理工具的研发。

首先用 React 的脚手架搭建一个项目:

shell 复制代码
npx create-react-app my-app
cd my-app

目前 ONES Design UI 组件库 托管在 ONES 私有的 npm 仓库上, 因此需要配置代理才能顺利访问并获取内容:

shell 复制代码
npm config set @ones-design:registry=https://npm.partner.ones.cn/registry/

放心, 这里只是配置 @ones-design 代理, 不会影响你本地的其他 npm 代理。

目前使用脚手架默认会创建 react@"^18.2.0 的项目, 所以需要开始降级:

shell 复制代码
npm install react@16.14.0 react-dom@16.14.0 --save
npm install --save-dev @testing-library/react@12
npm install react@16.14.0 react-dom@16.14.0 --save

还要修改 src/index.js 文件的内容, 因为 react@"^18.2.0 语法是新语法, 旧版本是不支持的, 所以要改成旧版本的方法:

javascript 复制代码
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App ></App>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

完成代理的配置后就可以安装 @ones-design/core 核心组件库:

shell 复制代码
npm install @ones-design/icons @ones-design/core

最后再运行项目, 确认我们的 ONES Design UI 组件库 开发环境搭建成功:

shell 复制代码
npm start

这样就完成环境的搭建了。

相关推荐
★YUI★10 小时前
学习制作记录(选项UI以及存档系统)8.24
学习·游戏·ui·unity·c#
枯萎穿心攻击17 小时前
从 Unity UGUI 到 Unreal UMG 的交互与高效实践:UI 事件、坐标系适配与性能优化
开发语言·ui·unity·性能优化·ue5·游戏引擎·虚幻引擎
xiaopengbc20 小时前
Photoshop CS6精简版轻量级,Photoshop CS6绿色免安装,Photoshop CS6安装教程
ui·photoshop
界面开发小八哥1 天前
界面控件DevExpress WPF中文教程:Data Grid - 绑定数据
ui·.net·wpf·界面控件·devexpress·ui开发
pythonqiang92 天前
Axure下载安装教程(附安装包)Axure RP 11 超详细下载安装教程
其他·ui·axure·photoshop
我不是程序猿儿2 天前
【C#】观察者模式 + UI 线程调度、委托讲解
观察者模式·ui·c#
Kingsdesigner2 天前
我用Photoshop Firefly+Blender,拯救被环境毁掉的人像大片
图像处理·ui·adobe·社交电子·blender·传媒·photoshop
创可贴治愈心灵3 天前
WPF中UI线程频繁操作造成卡顿的处理
ui·c#·wpf
我希望的一路生花3 天前
Adobe Photoshop 2025 版本介绍与使用指南
ui·adobe·photoshop
Zafir20243 天前
Qt实现TabWidget通过addTab函数添加的页,页内控件自适应窗口大小
开发语言·c++·qt·ui