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 [email protected] [email protected] --save
npm install --save-dev @testing-library/react@12
npm install [email protected] [email protected] --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

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

相关推荐
冴羽yayujs19 小时前
SvelteKit 最新中文文档教程(17)—— 仅服务端模块和快照
前端·javascript·vue.js·前端框架·react
千鼎数字孪生-可视化1 天前
3D模型给可视化大屏带来了哪些创新,都涉及到哪些技术栈。
ui·3d·信息可视化·数据分析
跟着珅聪学java1 天前
spring boot +Elment UI 上传文件教程
java·spring boot·后端·ui·elementui·vue
Alger_Hamlet2 天前
Photoshop 2025 Mac中文 Ps图像编辑软件
macos·ui·photoshop
余多多_zZ3 天前
鸿蒙学习手册(HarmonyOSNext_API16)_应用开发UI设计:Swiper
学习·ui·华为·harmonyos·鸿蒙系统
长流小哥3 天前
可视化开发:用Qt实现Excel级动态柱状图
开发语言·c++·qt·ui
Invisible_He3 天前
iOS自定义collection view的page size(width/height)分页效果
ui·ios·swift·collection
草巾冒小子4 天前
element-ui图片查看器
前端·vue.js·ui
大树前端老司机4 天前
UI设计中的动画效果:如何让页面更生动?
ui
AI_Auto4 天前
AI Agent系列(八) -基于ReAct架构的前端开发助手(DeepSeek)
人工智能·react·ai agent