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

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

相关推荐
前端开发与ui设计的老司机2 小时前
从数据洞察到设计变革:UI前端如何利用数字孪生重塑用户体验?
ui·ux
前端开发与ui设计的老司机3 小时前
大数据时代UI前端的智能化升级:基于机器学习的用户意图预测
大数据·ui
前端开发与ui设计的老司机12 小时前
从UI设计到数字孪生实战:构建智慧教育的个性化学习平台
学习·ui
前端世界14 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos
共享ui设计和前端开发人才1 天前
数字孪生技术引领UI前端设计新风向:跨领域数据融合的可视化
ui
UI设计和前端开发从业者1 天前
大数据时代UI前端的智能化转型之路:以数据为驱动的产品创新
大数据·前端·ui
desssq2 天前
嘉立创黄山派下载watch ui demo 教程(sf32)
ui·嵌入式·嘉立创·黄山派
写不出来就跑路2 天前
基于 Vue 3 的智能聊天界面实现:从 UI 到流式响应全解析
前端·vue.js·ui
Crazy Struggle2 天前
.NET 9 + React 开发的企业级后台权限管理系统,文档齐全,轻松上手
react·权限管理系统·后台管理系统·.net 9.0
星月前端2 天前
vue3使用inspira-ui教程【附带源码】
ui