ONES Design UI 组件库环境搭建

这篇具有很好参考价值的文章主要介绍了ONES Design UI 组件库环境搭建。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

这个 ONES Design UI 组件库 是基于 Ant Design 的 React UI 组件库,主要用于企业级研发管理工具的研发。

首先用 React 的脚手架搭建一个项目:

npx create-react-app my-app
cd my-app

目前 ONES Design UI 组件库 托管在 ONES 私有的 npm 仓库上, 因此需要配置代理才能顺利访问并获取内容:

npm config set @ones-design:registry=https://npm.partner.ones.cn/registry/

放心, 这里只是配置 @ones-design 代理, 不会影响你本地的其他 npm 代理。

目前使用脚手架默认会创建 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 文件的内容, 因为 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 组件库 开发环境搭建成功:

npm start

这样就完成环境的搭建了。文章来源地址https://www.toymoban.com/news/detail-744106.html

到了这里,关于ONES Design UI 组件库环境搭建的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Kendo UI,一个加速Web应用界面开发的JavaScript组件库!

    Kendo UI是什么? 首先,Kendo UI是一个由四个JavaScript UI库组成的包,这些库是专为jQuery、Angular、React和Vue原生构建的,每一个都是用一致的API和主题构建的。所以无论开发者怎么选择,所开发的Web应用始终保持了现代的应用界面,响应迅速、可访问且速度快! 为什么要选择Ke

    2024年02月15日
    浏览(51)
  • Vue3 UI组件库对比,Naive UI、Element Plus、 Ant Design Vue

    Element Plus Naive ui Ant Design Vue 简介 element-ui Vue3版本,国内使用广泛 Vue作者推荐的Vue3ui 组件库 阿里Ant Design设计规范的Vue实现版 地址 https://github.com/element-plus/element-plus https://github.com/tusen-ai/naive-ui https://github.com/vueComponent/ant-design-vue 社区活跃度 高 中 高 ui库组件主要实现方式

    2024年01月25日
    浏览(44)
  • python ui开发 可视化环境搭建步骤:

    看这两篇就能入门了: 【PyQt5桌面应用开发】1.可视化环境搭建步骤(超级详细)_pyqt5开发_安歌er的博客-CSDN博客 【PyQt5桌面应用开发】2.可视化界面编程步骤(超级详细)_pyqt界面_安歌er的博客-CSDN博客 这篇可以了解一些基本代码含义: 一、PyQt5实现Python界面设计_QtWidgets (第

    2024年02月11日
    浏览(50)
  • 搭建禅道环境作为练习UI和接口自动化测试对象

    做 UI 和接口自动化练习时,有时候找不到合适的对象,我们可使用禅道来联系; 因为禅道有开源版,可以二次开发,并有详细的 API 手册; 本文的目的是整理并分享,使用禅道来作为测试对象的过程,便于学习自动化测试使用。 直接进入官网,选择开源版进行下载: https

    2024年02月15日
    浏览(44)
  • Python - PyQT5开发UI界面 - 环境搭建

    没有做过UI界面的都会把UI的制作想象的很神秘,我在刚开始的时候也是感觉异常神秘、很复杂、并且无从下手,不过在真正的做出来一个界面后,发现也并没有想象中的那么难,而且做出来可视化的东西所带来的成就感是超越代码本身的;不过整个过程也并不顺利,网上都是

    2023年04月23日
    浏览(47)
  • Vue + Element UI 前端篇(一):搭建开发环境

    开发之前,请先熟悉下面的4个文档 vue.js2.0中文, 优秀的JS框架 vue-router, vue.js 配套路由 vuex,vue.js 应用状态管理库 Element,饿了么提供的UI框架 Node JS(npm) Visual Studio Code(前端IDE) 下载地址: 官网下载地址 Visual Studio Code 是一款非常优秀的开源编辑器,非常适合作为前端I

    2024年02月09日
    浏览(57)
  • 告别原始 UI 样式,拥抱 Fluent Design 风格 PyQt/PySide 组件库

    这是一个使用 PyQt/PySide 编写的 Fluent Design 风格的组件库,支持亮暗主题无缝切换和自定义主题色,搭配 QtDesigner 可以快速开发美观的界面。github 仓库地址为 https://github.com/zhiyiYo/PyQt-Fluent-Widgets ,演示视频可以在哔哩哔哩上观看。 轻量版 ( AcrylicLabel 不可用): 完整版: 如果项

    2024年02月10日
    浏览(28)
  • 基于Selenium的Web UI自动化测试框架开发实战

    1、自研自动化测试框架 首先进行需求分析。概要设计包括以下三大模块: 公共函数库模块(包括可复用函数库、日志管理、报表管理及发送邮件管理); 测试用例仓库模块(具体用例的相关管理); 可视化页面管理模块(单独针对Web页面进行抽象,封装页面元素和操作方

    2024年01月20日
    浏览(62)
  • UI自动化测试篇 :Selenium2(Webdriver)&TestNG自动化测试环境搭建

     🔥 交流讨论: 欢迎加入我们一起学习! 🔥 资源分享 : 耗时200+小时精选的「软件测试」资料包 🔥  教程推荐: 火遍全网的《软件测试》教程   📢 欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正!    最开始学习UI自动化,用的工具是QTP10,用起来确实比较容易上手

    2024年03月10日
    浏览(63)
  • MAC M1 Pro搭建移动端UI自动化测试环境--Android篇

    目前大家熟知的测试主要分为功能测试、接口测试、UI测试,本文重点介绍的则是UI测试 UI 测试 通常分为WEB 端和 移动端,前者主要是针对PC端的网站进行测试,主要是模拟各个浏览器的内核的兼容性,后者则是针对App Native、H5、Hybrid进行模拟测试,发现多机型的兼容性问题

    2023年04月22日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包