這個 ONES Design UI 組件庫 是基于 Ant Design 的 React UI 組件庫卑硫,主要用于企業(yè)級研發(fā)管理工具的研發(fā)宰睡。
首先用 React 的腳手架搭建一個項目:
npx create-react-app my-app
cd my-app
目前 ONES Design UI 組件庫 托管在 ONES 私有的 npm 倉庫上, 因此需要配置代理才能順利訪問并獲取內(nèi)容:
npm config set @ones-design:registry=https://npm.partner.ones.cn/registry/
放心, 這里只是配置 @ones-design
代理, 不會影響你本地的其他 npm 代理鸵熟。
目前使用腳手架默認會創(chuàng)建 react@"^18.2.0
的項目, 所以需要開始降級:
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
文件的內(nèi)容, 因為 react@"^18.2.0
語法是新語法, 舊版本是不支持的, 所以要改成舊版本的方法:
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
核心組件庫:
npm install @ones-design/icons @ones-design/core
最后再運行項目, 確認我們的 ONES Design UI 組件庫 開發(fā)環(huán)境搭建成功:
npm start
這樣就完成環(huán)境的搭建了向臀。