【操作类-React】React NutUI项目按需加载样式

最新推荐文章于 2024-05-21 19:50:21 发布
最新推荐文章于 2024-05-21 19:50:21 发布
阅读量381 收藏
点赞数
分类专栏： 操作类 React 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Weiqian_/article/details/131042258
版权

1.初始化一个react项目

2.NutUI安装指南 NutUI - 移动端 React 组件库

npm i @nutui/nutui-react

 安装craco

npm i --save-dev @craco/craco
npm i --save-dev sass
npm i --save-dev babel-plugin-import

在根目录新建craco.config.js，详细代码见 指南 中的 添加 craco 配置

在App.js引入一个button测试，发现报错 

将package.json里面的scripts配置项改为

 成功运行

 

Weiqian_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
nuts:nodejs、react 和 webpack 的入门套件
07-03
坚果 这是一个用于 nodejs 应用程序的自以为是的模板。 主要的配置方式是： require ( 'lib/nuts' ) . deez ( ) 堆 - 网络服务器 - 资产管理 - JavaScript UI 框架 - 前端应用架构 - 用于MVC的M - CSS/HTML 框架 - Mongo ORM - 作业队列 目标 该项目的主要目标是提供尽可能多的开箱即用功能，使项目得以启动。 许多繁重的样板代码已经完成，因此您可以专注于使您的应用程序与众不同的地方。 一些主要功能是： 用于服务器端和客户端渲染的共享模板 基本交易电子邮件和模板 登录、忘记密码、注册流程 延迟处理作业 良好的架构模式和实践 还有很多东西要添加，所以欢迎提出建议和 PR。 外部依赖 Redis MongoDB 跑步 要启动服务器，只需运行npm start 。 这将编译所有资产并在端
antd在React项目中按需加载
weixin_33885676的博客
05-13 1029
在antd官网中只介绍了使用react-app-rewired来配置antd的按需加载，但我们日常开发通常会使用eject命令暴露所有配置，所以官网提供的配置方法已不再适用，本文将会介绍在eject项目之后配置antd按需加载的方法 引入 antd 适用yarn或npm安装并引入antd $ yarn add antd 复制代码引入babel-plugin-import 使用babel-plugi...
react项目中使用ui组件的按需加载
v_vszhao的博客
07-01 233
//安装ui组件 npm install antd --save //安装按需加载插件 npm install babel-plugin-import --save //配置config-overrides.js文件 const { override, fixBabelImports } = require('customize-cra') modeule.exports = override( fixBabelImports('import',{ libraryName: 'antd', lib
React项目搭建
m0_60698858的博客
09-18 238
一、创建项目 1、cmd切换到目标文件夹 2、初始化项目 npx create-react-app init-mobile 3、切换到对应目录根据提示启动项目 二、配置项目文件目录 调整项目中src目录结构如下： 三、引入组件库antd-mobile 1、安装 npm install antd-mobile --save 2、在App.js根组件中导入要使用的组件 App.js中直接引用即可，无需加载 import { Button } from 'antd-...
react项目启动加载过程个人笔记(Ant Design Pro)
BHSZZY的博客
01-04 3363
1.项目启动后，会先加载。（PS：菜鸟教程说，manifest.json 指定了开始页面 index.html，一切的开始都从这里开始，所以这个是代码执行的源头；但是Ant Design Pro项目里开始页面并没有在这里指定…）2.项目启动后，会打开。（可以修改默认启动端口，例如修改的启动命令为）3.项目会加载config.js，其中引入了；因为在里配置了，因此父页面就是4.在里配置了，以及，因此会重定向到，此时父页面是，子页面是5.父页面里有{children}，这个就可以让子页面显示出来。6.
scaffold-react-component：搭建带有样式，测试和故事的React组件
02-04
支架React成分 用样式，测试和故事来搭建一个React组件。 该工具是合理的选择，并假设您正在使用： React SCSS模块 开玩笑（单元测试） ... 要--type ES6类React组件，请使用第二个参数或--type / -t
react-native-spinkit：React Native的动画加载指示器集合
02-28
0.29的RN项目，使用自动链接库rnpm link react-native-spinkit 手动链接-iOS 按照提供的Wiki进行操作 手动链接-Android 按照提供的Wiki进行操作 例子 检查Example文件夹中的 。 特性 Struts 默认 类型 描述 是可见...
bem-react:风味良好的React
05-01
其主要目标： 提供在模板中和使用过程中使用某种bemjson的能力（而不是丑陋的jsx或纯js） 接管基于BEM的css类的操作（而不是烦人的字符串连接或React.addons.classSet ，对于类似BEM的css类也很笨拙）入门安装通过...
react-calculator：用create-react-app引导的React计算器
01-31
练习React Component类，状态，道具和AWS Polly。 这个项目远非完美。 我决定通过键盘/鼠标实现完全控制来实践一些有关可访问性的基本思想。 该项目还是AWS服务的实践实施如何使用它。普通手术您可以通过单击按钮或...
react-vuex:Vuex的React绑定，react-redux样式
04-28
安装react-vuex需要React 16.0 + ， Vue 2.0+和Vuex 3.0+ npm install --save react-vuex假设您正在将软件包管理器与或类的模块捆绑器一起使用，以使用。文献资料要查看一些示例项目，请查看此存储库的“部分。...
移动端轻量级 Vue 组件库 NutUI
04-22
特性 跨平台，自动转微信小程序组件（稍后上线，敬请期待） 全新的架构 30+ 京东移动端项目正在使用 参照京东APP 7.0 视觉规范 支持按需加载 详尽的文档和示例 支持定制主题 支持多语言（国际化） 支持 TypeScript 支持服务端渲染（Vue SSR） 单元测试加持 配套有基于Webpack的构建工具，可快速创建已内置本组件库的Vue工程
react 项目完整搭建
娃哈哈_的博客
11-08 258
一. create-react-app npx create-react-app react-demo —typescript 默认情况下，生成的项目支持所有现代浏览器。对Internet Explorer 9、10和11的支持需要polyfill。 通过npm run eject ， 暴露webpack配置 学习网站：https://create-react-app.dev/docs/g...
react项目框架的简单搭建（实现数据增删功能）
apjcui的博客
12-16 344
react项目框架的简单搭建 1.首先安装一个搭建脚手架的工具：npm i create-react-app -g（电脑全局安装一次就可以了） 2.官方提供搭建脚手架工具：create-react-app projectName 3.安装依赖：npm i react-router react-router-dom --save-dev 4.导航标签：import { Link } from “re...
微信小程序使用NutUI-React组件
weixin_51798265的博客
10-20 1165
在搭建微信小程序项目过程中，使用NutUI组件库时，如果使用其TabBar组件作为自定义的TabBar会有一些小问题，感觉其框架还没有很成熟，所以没有使用，直接使用的微信小程序的默认TabBar。除此之外，在搭建过程中遇到的样式引入等问题，也花费了蛮久的时间，官方文档有些出入，以此来记录一下吧，
React Native系列之Native Modules
大灰狼的小绵羊哥哥的博客
04-16 4554
版权声明：个人博客地址 http://blog.csdn.net/qq_21430549/article/category/5857243 先来看下官网对于Native Modules的描述： Sometimes an app needs access to a platform API that React Native doesn’t have a corres
1.uniapp列表数据加载；2.详情页（子页）返回列表页（父页）父页自动刷新
weixin_44243068的博客
04-28 662
禁止转载
Function Call & ReACT，Agent应用落地的加速器
2401_82452722的博客
05-21 571
相比之下，ReACT方式需要对模型进行更加细致的指导，让通用模型拥有输出规划、函数所需参数的能力，虽然这缓解了对模型本身输出能力的依赖，却增加了对提示工程的依赖，需要针对模型的特性来设计对应的提示模板，生成规划（函数的选择）和函数所需的API，并可能需要提供样例，消耗的上下文Token也相对更多一些。智能体应用的开发逐渐成为了各个大模型应用开发平台所关注的重点，无论是ReACt类型的框架，还是Function Calling类型的模型，都在以难以想象的速度不断迭代。
react组件传参 父传子可以传字符串，布尔值，数组，对象，jsx，
最新发布
qq_65537235的博客
05-21 25
在react中，父传子组件 props的灵活性是很强大的，可以传字符串，布尔值，数组，对象，jsx，
react 保持组件纯粹
阿乐的博客
05-21 197
部分 JavaScript 函数是的，这类函数通常被称为纯函数。纯函数仅执行计算操作，不做其他操作。你可以通过将组件按纯函数严格编写，以避免一些随着代码库的增长而出现的、令人困扰的 bug 以及不可预测的行为。但为了获得这些好处，你需要遵循一些规则。
nutui react
08-30
NutUI React是一个移动端的React组件库。要安装NutUI React，你可以使用npm命令安装@nutui/nutui-react包。具体命令为：npm i @nutui/nutui-react。 另外，在安装NutUI React之前，你可能还需要安装一些其他的依赖包。比如，你可能需要安装@craco/craco、sass和babel-plugin-import这几个包。具体的安装命令为：npm i --save-dev @craco/craco、npm i --save-dev sass和npm i --save-dev babel-plugin-import。 在安装完成后，你可以根据需要去使用NutUI React提供的组件来开发移动端的应用程序。希望这些信息对你有帮助！<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [【操作类-React】React NutUI项目按需加载样式](https://blog.csdn.net/Weiqian_/article/details/131042258)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [react-nested-table](https://download.csdn.net/download/weixin_42122306/18674553)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值