文档章节

react antd SPA 管理后台搭建

janlle
 janlle
发布于 2019/08/29 13:56
字数 388
阅读 241
收藏 0

react antd SPA 管理后台搭建

简介

学习了前端主流的框架react基于 react antd 等搭建了一套后台项目的模板Github

环境

  • OS: Windows10
  • IDE: WebStorm 2019.1.3
  • node: v10.15.0
  • npm: 6.4.1
  • yarn: 1.17.3
  • browser: Chrome76.0.3809.100

依赖

创建项目

# 安装 create-react-app
$ npm install -g create-react-app

# 安装 yarn
$ npm install -g yarn

# 使用 create-react-app 创建脚手架工程
$ create-react-app my-app

# 进入项目目录启动项目访问本地localhost:3000端口
$ yarn start

# 安装依赖
$ yarn add antd react-router-dom less less-loader babel-plugin-import braft-editor

# 暴露项目配置
$ yarn eject

配置项目

Less 解析配置

# 修改 config/webpack.config.js 文件

# 在 45 行添加如下配置
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

# 在 sassRegex 下方大约 457 行添加配置

// Less 解析配置
{
    test: lessRegex,
    exclude: lessModuleRegex,
    use: getStyleLoaders(
        {
            importLoaders: 2,
            sourceMap: isEnvProduction && shouldUseSourceMap,
        },
        'less-loader'
    ),
    sideEffects: true,
},
{
    test: lessModuleRegex,
    use: getStyleLoaders(
        {
            importLoaders: 2,
            sourceMap: isEnvProduction && shouldUseSourceMap,
            modules: true,
            getLocalIdent: getCSSModuleLocalIdent,
        },
        'less-loader'
    )
},

# 修改 package.json 找到babel 配置项处添加如下配置注意前面的逗号

,
"plugins": [
  [
    "import",
    {
      "libraryName": "antd",
      "style": "css"
    }
  ]
]

项目大致搭建完成后续的一些功能待完善

© 著作权归作者所有

janlle
粉丝 0
博文 24
码字总数 45495
作品 0
广州
程序员
私信 提问
加载中

评论(0)

16、React系列之 React 路由

版权声明:本文为博主原创文章,未经博主允许不得转载。 PS:转载请注明出处 作者:TigerChain 地址:http://www.jianshu.com/p/b55cf53e633a 本文出自 TigerChain简书 React 教程系列 教程简介...

TigerChain
2017/12/15
0
0
【react自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目

前言 一、React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源。出身名门的React也不负众望,成功成为当前最火热...

漂泊的雾
2018/07/28
0
0
记一次 React + Koa + Mysql 构建个人博客

前言 由于一直在用 vue 写业务,为了熟悉下 react 开发模式,所以选择了 react。数据库一开始用的是 mongodb,后来换成 mysql 了,一套下来感觉 mysql 也挺好上手的。react-router、koa、mys...

_Gong
2019/04/01
0
0
React全家桶+AntD框架开发共享单车后台管理系统

大家好,我是河畔一角,目前在一家共享单车公司担任前端架构师职位,作为一名前端工程师,我非常渴望能够讲自己多年来汲取的精华知识传授给大家,非常渴望能够去解决大家在开发过程中的痛点。...

河畔一角
2018/06/21
0
0
(开源)基于vue, react, node.js, go开发的微商城(含微信小程序)

微商城 地址: https://github.com/shen100/wemall 求star,求关注 项目截图 微信小程序 项目环境搭建 1 克隆代码 2 配置nginx 将文件拷贝到nginx的虚拟主机目录下 3 配置hosts 127.0.0.1 dev...

liushen829475
2017/06/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Gartner 容器报告:阿里云和 AWS 并列第一 | 云原生生态周报 Vol. 44

作者 | 王思宇、陈洁 业界要闻 Gartner 容器报告:阿里云与 AWS 并列第一,领先微软、谷歌 近日,国际知名调研机构 Gartner 发布 2020 年容器公有云竞争格局报告,阿里云再度成为国内唯一入选...

阿里巴巴云原生
4分钟前
4
0
Zookeeper如何保证数据一致性

ZooKeeper保证数据一致性用的是ZAB协议。通过这个协议来进行ZooKeeper集群间的数据同步,保证数据的一致性。 两阶段提交+过半写机制: ZooKeeper写数据的机制是客户端把写请求发送到leader节...

长臂猿猴
6分钟前
6
0
MacOS上的这些隐藏小技巧,一旦掌握,爱不释手!

你知道吗?macOS上拥有大量隐藏技巧,只要你精心研究就会发现很多却又却鲜为人知的提示和技巧,一旦掌握,爱不释手。今天macdown小编就给大家介绍几个MacOS技巧,比较适合刚拥有Mac或者对Mac...

mac小叮当
8分钟前
11
0
AMQP(Advanced Message Queuing Protocol,高级消息队列协议)

https://blog.csdn.net/weixin_37641832/article/details/83270778

Java搬砖工程师
9分钟前
9
0
如何有效地计算JavaScript中对象的键/属性数量?

问题: What's the fastest way to count the number of keys/properties of an object? 计算对象的键/属性数的最快方法是什么? It it possible to do this without iterating over the obj......

javail
9分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部