react antd SPA 管理後臺搭建

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

依賴

• react@16.8.6
• react-router@5.0.1(路由)
• react-redux@4.0.4(狀態容器)
• antd@3.21.1(UI框架)
• axios@0.19.0(基於 promise 的 HTTP 庫)
• BizCharts@3.5.5(可視化圖表)
• moment@2.24.0(處理時間工具)
• echarts@4.1.0(可視化圖表)
• braft-editor@2.3.7(富文本編輯器)
• react-draft-wysiwyg@1.12.13(基於react的富文本封裝)
• react-sortable-hoc@0.7.2(簡單的拖拽模塊)

建立項目

# 安裝 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"
    }
  ]
]

複製代碼

項目大體搭建完成後續的一些功能待完善