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

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

相关推荐
慧都小项1 小时前
UI测试平台TestComplete如何实现从Git到Jenkins的持续测试
git·ui·jenkins·代码质量·testcomplete·zephyr for jira
技术路上的探险家21 小时前
Web3:在 VSCode 中使用 Vue 前端与已部署的 Solidity 智能合约进行交互
vscode·web3·区块链·交互·react·solidity·ethers.js
脑袋大大的2 天前
uni-app x开发避坑指南:拯救被卡顿的UI线程!
开发语言·前端·javascript·vue.js·ui·uni-app·uts
zh_xuan2 天前
duiLib 自定义资源目录
c++·ui
栗子味清清2 天前
Axure入门指南:功能讲解、快捷键整理与操作思维全拆解
ui·axure·photoshop
吴梓穆3 天前
UE5 UI自适应 DPI缩放
ui·ue5
BuHuaX3 天前
Unity_UI_NGUI_缓动
ui·unity·c#·游戏引擎·游戏策划
OEC小胖胖3 天前
渲染篇(二):解密Diff算法:如何用“最少的操作”更新UI
前端·算法·ui·状态模式·web
OpenTiny社区4 天前
前端可智能识别的搜索组件 SearchBox 使用详解!
前端·vue.js·ui·开源·opentiny
白玉cfc6 天前
【iOS】网易云仿写
ui·ios·objective-c