当前位置: 开发笔记 > 编程语言 > 正文

项目主页工程搭建

作者：lixinglon257 | 来源：互联网 | 2023-10-10 17:28

恢复内容开始1.基础插件安装，less文件加载配置安装基础插件安装React-Router、Axiosyarnaddreact-router-domaxiosless-loader

---恢复内容开始---

1.基础插件安装，less文件加载配置

安装基础插件
- 安装React-Router 、Axios
  - yarn add react-router-dom axios less-loader（router是4.0版本）
- 安装antd
  - yarn add antd
- 暴露webpack配置文件
  - yarn eject
- 安装less-loader
- 修改less-loader

- - 2.x 中将webpack.config.dev.js 与 webpack.config.prod.js进行了合并，只有一个webpack.config.js

- - yarn eject 只能用一次，用完即止，多出一些文件在目录里，我们要在config文件夹下的webapck.config.js里配置

- - 新加less匹配项 copy 一份跟 sassRegex,sassModuleRegex 一样的声明即可： const lessRegex = /.less/ const lessModuleRegex = /.module.less$/

- - 在sass的配置下新增less配置

- - - { test: lessRegex, exclude: lessModuleRegex, use: getStyleLoaders({ importLoaders: 2 }, ‘less-loader‘), }, { test: lessModuleRegex, use: getStyleLoaders( { importLoaders: 2, modules: true, getLocalIdent: getCSSModuleLocalIdent, }, ‘less-loader‘ ), },
  - 关掉服务，重新yarn start 在 App.js中导入less文件一切正常

2.项目主页结构开发

3.菜单组件的开发

4.头部组件的开发

5.底部组件的开发

---恢复内容结束---

推荐阅读

router
Framework7：构建跨平台移动应用的高效框架

Framework7 是一个开源免费的框架，适用于开发混合移动应用（原生与HTML混合）或iOS&Android风格的Web应用。此外，它还可以作为原型开发工具，帮助开发者快速创建应用原型。 ... [详细]

蜡笔小新 2024-11-12 14:47:56
copy
CMD 批处理脚本示例

本文介绍了如何使用 CMD 批处理脚本进行文件操作，包括将指定目录下的 PHP 文件重命名为 HTML 文件，并将这些文件复制到另一个目录。 ... [详细]

蜡笔小新 2024-11-12 14:26:04
ip
POJ 2482 星空中的星星：利用线段树与扫描线算法解决

在《POJ 2482 星空中的星星》问题中，通过运用线段树和扫描线算法，可以高效地解决星星在窗口内的计数问题。该方法不仅能够快速处理大规模数据，还能确保时间复杂度的最优性，适用于各种复杂的星空模拟场景。 ... [详细]

蜡笔小新 2024-11-09 12:09:08
ip
七款高效编辑器与笔记工具推荐：KindEditor自动换行功能解析

本文推荐了七款高效的编辑器与笔记工具，并详细解析了KindEditor的自动换行功能。其中，轻笔记QingBiJi是一款完全免费的记事本软件，用户可以通过其简洁的界面和强大的功能轻松记录和管理日常事务。此外，该软件还支持多平台同步，确保用户在不同设备间无缝切换。 ... [详细]

蜡笔小新 2024-11-06 11:14:53
copy
解决Bootstrap DataTable Ajax请求重复问题

在最近的一个项目中，我们使用了JQuery DataTable进行数据展示，虽然使用起来非常方便，但在测试过程中发现了一个问题：当查询条件改变时，有时查询结果的数据不正确。通过FireBug调试发现，点击搜索按钮时，会发送两次Ajax请求，一次是原条件的请求，一次是新条件的请求。 ... [详细]

蜡笔小新 2024-11-12 13:59:27
copy
深入解析Java多线程同步机制与应用

本文深入探讨了Java多线程环境下的同步机制及其应用，重点介绍了`synchronized`关键字的使用方法和原理。`synchronized`关键字主要用于确保多个线程在访问共享资源时的互斥性和原子性。通过具体示例，如在一个类中使用`synchronized`修饰方法，展示了如何实现线程安全的代码块。此外，文章还讨论了`ReentrantLock`等其他同步工具的优缺点，并提供了实际应用场景中的最佳实践。 ... [详细]

蜡笔小新 2024-11-08 16:11:26
require
Java环境中Selenium Chrome驱动在大规模Web应用扩展时的性能限制分析

Java环境中Selenium Chrome驱动在大规模Web应用扩展时的性能限制分析 ... [详细]

蜡笔小新 2024-11-07 10:10:30
ip
网站访问全流程解析

本文详细介绍了从用户在浏览器中输入一个域名（如www.yy.com）到页面完全展示的整个过程，包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]

蜡笔小新 2024-11-12 18:13:16
ip
rewrite nginx

两个条件，组合控制#if($query_string~*modviewthread&t(&extra(.*)))?$)#{#set$itid$1;#rewrite^ ... [详细]

蜡笔小新 2024-11-12 13:55:01
ip
DMA控制器与外设请求映射表详解

本文详细介绍了DMA控制器如何通过映射表处理来自外设的请求，包括映射表的设计和实现方法。 ... [详细]

蜡笔小新 2024-11-12 13:51:55
ip
解决Win10下MySQL连接问题：Navicat 2003无法连接到本地MySQL服务器（10061）

本文介绍如何在Windows 10环境下解决Navicat 2003无法连接到本地MySQL服务器的问题，包括启动MySQL服务和检查配置文件的方法。 ... [详细]

蜡笔小新 2024-11-12 13:10:39
copy
JavaScript XML操作实用工具类：XmlUtilsJS技巧与应用

JavaScript XML操作实用工具类：XmlUtilsJS技巧与应用 ... [详细]

蜡笔小新 2024-11-06 15:15:26
usb
汽车电子架构与CAN网络基础解析——鉴源实验室专业解读

汽车电子架构与CAN网络基础解析——鉴源实验室专业解读 ... [详细]

蜡笔小新 2024-11-06 14:10:48
usb
优化后的标题：利用 jQuery 实现高效树形结构元素选择与操作

在Web前端开发中，DOM结构本质上是一种树形结构。通过优化后的jQuery选择器，可以高效地选择和操作DOM树中的节点。这些选择器不仅简化了代码编写，还提高了性能和可维护性。本文将详细介绍如何利用jQuery的树形选择器实现高效的元素选择与操作。 ... [详细]

蜡笔小新 2024-11-06 10:56:26
default
深入解析：React与Webpack配置进阶指南（第二部分）

在本篇进阶指南的第二部分中，我们将继续探讨 React 与 Webpack 的高级配置技巧。通过实际案例，我们将展示如何使用 React 和 Webpack 构建一个简单的 Todo 应用程序，具体包括 `TodoApp.js` 文件中的代码实现，如导入 React 和自定义组件 `TodoList`。此外，我们还将深入讲解 Webpack 配置文件的优化方法，以提升开发效率和应用性能。 ... [详细]

蜡笔小新 2024-11-06 10:03:07

lixinglon257

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章