前言

本次基于React使用环境搭建之系列问题

一、准备React

（一）建立react应用

npx create-react-app  dcourse

并对react应用进行整理，整理成如下图所示：

在terminal中输入yarn start，出现以下报错：

解决方案：
1.首先使用命令

npm install -g yarn

2.在环境变量里面path添加 yarn路径

接下来在terminal中输入yarn start

自动使用系统默认的谷歌浏览器打开第一个网址，也可以Ctrl+Click这两个网址中的一个打开并预览。

（二）安装基础插件

本次所需的插件

react-router-dom
less less-loader
axios
jsonp
antd

yarn add react-router-dom axios less less-loader@4.0.1 antd

（三）暴露webpack

yarn eject

当使用以上命令解开项目结构时，报错This git repository has untracked files or uncommitted changes，如下图：

这说明这个git存储库有未跟踪的文件或未提交的更改在git上还有自己没有提交的项目，使用以下命令初始化git就好了：

git add .
git commit -am “Save before ejecting”

yarn eject

……

（四）使用Less

在上述暴露出webpack的基础上，找到config/webpack.config.js文件。

加上这两句：

之后找到getStyleLoaders方法，添加下图所示代码：

最后添加less支持：

// 添加less{test: lessRegex,exclude: lessModuleRegex,use: getStyleLoaders({importLoaders: 3,sourceMap: isEnvProduction && shouldUseSourceMap,},'less-loader'),sideEffects: true,},{test: lessModuleRegex,use: getStyleLoaders({importLoaders: 3,sourceMap: isEnvProduction && shouldUseSourceMap,modules: {getLocalIdent: getCSSModuleLocalIdent,},},'less-loader'),},

之后在项目中新建App.less文件测试less文件是否可用正常使用。

并在App.js中引入App.less之后yarn start启动项目，可用看到背景正常设置为天蓝色，设置成功！

React后台管理系统模板搭建相关推荐

【开发篇】10分钟快速搭建React后台管理系统模板
React后台管理系统模板 github 我又回来了!!!学完前端react,再学spring,这周或者下周写spring有关的!!! 一.准备React 1.建立react应用 npx create ...
php快速搭建后台,基于thinkphp的后台管理系统模板快速搭建，thinkphp后台模板_PHP教程...
基于thinkphp的后台管理系统模板快速搭建,thinkphp后台模板当我们在搭建网站的时候,后端开发人员在编写后台的管理系统的时候,往往会因为缺少一个合适的后台管理系统的模板,而必须去重新编写一 ...
vue+element-ui JYAdmin后台管理系统模板-集成方案【项目搭建篇1】
项目搭建时间:2020-06-29 本章节:讲述基于vue/cli, 项目的基础搭建. 本主题讲述了vue+element-ui JYAdmin 后台管理系统模板-集成方案,从零到一的手写搭建全过程. ...
Vue学习笔记: Vue + Element-ui搭建后台管理系统模板
Vue学习笔记: Vue + Element-ui搭建后台管理系统模板技术:Vue + Element-ui 功能:后台管理系统基础模板,路由配置,加载页面进度条,请求响应拦截器的封装等页面预览: ...
12个免费开源后台管理系统模板
当你写项目的时候,如何快速的完成一个项目的搭建,这个时候就需要借助到一些模板了,前端开发的一个好处就是,各类UI模板都是相当的齐全的,直接拿来用就可以了,脱离了一行又一行垒代码的繁琐的工作,以下的开源 ...
3YAdmin-专注通用权限控制与表单的后台管理系统模板
3YAdmin基于React+Antd构建.GitHub搜索React+Antd+Admin出来的结果没有上百也有几十个,为什么还要写这个东西呢? 一个后台管理系统的核心我认为应该是权限控制,表单以及 ...
element ui 前台模板_SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇（二）：引入 element-ui 定义基本页面显示...
前提: (1) 相关博文地址: SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y ...
50套高大上的后台管理系统模板，总有一套适合你
50套高大上的后台管理系统模板,总有一套适合你码个蛋 2018-12-20 21:23:29 作者 | web小二来源 | web前端开发(web_qdkf) 从13年开始,我由开发慢慢走向设计, ...
多款非常优秀的基于 vue3.x 、Native UI、TypeScript 的中后台管理系统模板
前言今天给大家分享5款开源且非常优秀的基于 vue3.x . Native UI 的中后台管理系统模板,助力大家快速开发一个中后台管理系统 Soybean Admin 简介 Soybean Admi ...

React后台管理系统模板搭建

文章目录

前言