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

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

相关推荐
Larry_Yanan20 小时前
QML学习笔记(三十四)QML的GroupBox、RadioButton
c++·笔记·qt·学习·ui
打码的猿1 天前
在Qt中实现SwitchButton(开关按钮)
开发语言·qt·ui
未来之窗软件服务2 天前
UI设计(三)按实际输出内容递增的序号效果——东方仙盟筑基期
ui·thinkphp·仙盟创梦ide·东方仙盟sdk
知识分享小能手2 天前
微信小程序入门学习教程,从入门到精通,自定义组件与第三方 UI 组件库(以 Vant Weapp 为例) (16)
前端·学习·ui·微信小程序·小程序·vue·编程
記億揺晃着的那天4 天前
Vue + Element UI 表格自适应高度如何做?
javascript·vue.js·ui
千码君20164 天前
React Native:发现默认参数children【特殊的prop】
javascript·react native·ecmascript·react·组件树
Larry_Yanan4 天前
QML学习笔记(三十一)QML的Flow定位器
java·前端·javascript·笔记·qt·学习·ui
Larry_Yanan4 天前
QML学习笔记(三十)QML的布局器(Layouts)
c++·笔记·qt·学习·ui
KC_614 天前
MySQL索引失效的十大场景与性能优化实战
ui
不伤欣4 天前
Unity Mask镂空效果(常用于新手引导或高亮显示UI元素)
游戏·ui·unity·游戏引擎