React + dva+ antd+ less+ mock 搭建前端项目

1.安装环境

cnpm i create-react-app -g //全局安装
create-react-app project
cd project 
npm start
npm run eject // 打开webpack配置

2.安装dva，并在src下创建目录models、pages、routes、utils、servieces
pages文件夹下分别建a.js,b.js

cnpm i dva --save //安装dva
cnpm i history --save

a.js

import React, { Component } from 'react';
import { Link } from 'dva/router';
import {connect} from 'dva';
class AAA extends Component {
 render() {
   return (
     <div>
       <p className={pagea.p}
       >
         AAA页
       </p>
       <Link to={'/aaa/bbb'}>
           去BBB页面
        </Link>

     </div>
   );
 }
}

export default connect(({ aaa }) => ({
 aaa,
}))(AAA);

model新建a.js、b.js，
a.js

export default {
    namespace: 'aaa',
    state: {
      name:'这是aaa的model'
    },
    subscriptions: {},
    effects: {},
    reducers: {},
  };

3.routes中新建config.js,index.js
config.js录入路由信息

const menuGlobal=[
    {
        id:'aaa',
        pid:'0',
        name:'aaa页',
        icon:'user',
        path: '/aaa',
        models: () => [import('../models/a')], //models可多个
        component: () => import('../pages/a'),
    }, 
    {
        id:'bbb',
        pid:'0',
        name:'bbb页',
        icon:'user',
        path: '/aaa/bbb',
        models: () => [import('../models/b')], //models可多个
        component: () => import('../pages/b'),
    }, 
  ];
export default {
    menuGlobal
}

index.js

import config from './config';
export {
    config
}

4.src目录下创建router.js路由控制文件

import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import dynamic from 'dva/dynamic'
import {config} from './routes'
const { menuGlobal } = config
function RouterConfig({ history, app }) {
  return (
    <Router history={history}>
      <Switch>
        {
          menuGlobal.map(({path,...dynamics},index)=>(
            <Route
              key={index} 
              path={path} 
              exact 
              component={dynamic({
                app,
                ...dynamics
              })} 
            />
          ))
        }
      </Switch>
    </Router>
  );
}
export default RouterConfig;

5.修改src文件下夹下index.js

import dva from 'dva';
import './index.less';
import createHistory from 'history/createBrowserHistory'
//  console.log('history', history);
// 1. Initialize
const app = dva({
    history:createHistory()
});
 
// 2. Plugins
// app.use({});
 
// 3. Model
app.model(require('./models/app').default);
 
// 4. Router
app.router(require('./router').default);
 
// 5. Start
app.start('#root');

至此，实现了路由间的跳转与model的连接

image.png

因项目需求，并没有使用最新的antd 4 的版本，所以安装的时候指定了版本

cnpm i antd@3.26.15 --save
cnpm i babel-plugin-import --save
cnpm i less less-loader --save

6.配置less
在package.json中对babel添加plugin 配置

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

另外在webpack.config.js中配置less

image.png

在下面添加下面两行代码，然后找到oneOf，在cssRegex的配置下面添加less配置

 {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
              },'less-loader'),
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
                modules: true,  
                modules: {
                  getLocalIdent: getCSSModuleLocalIdent,
                },
              }, 'less-loader'),
            },

大概位于470--530行
然后在pages下新建a.less

@color: #f00;
.p{
   color: @color
}

修改page a.js代码，引入less

image.png

我使用的是modules，所以文件名为a.moduls.less
至此，页面刷新，

image.png

配置mock

cnpm i webpack-api-mocker --save-dev

在webpackDevServer.config.js中添加配置

const apiMocker = require('webpack-api-mocker');
...
before(app, server) {
      if (fs.existsSync(paths.proxySetup)) {
        require(paths.proxySetup)(app);
      }
      apiMocker(app, path.resolve(__dirname, '../mock/index.js'))
    },

src同级建mock文件夹 ,编写 /mock/index.js

module.exports = {
      [`GET /react/user`]: (req, res) => {
        let result = {
            status: 200,
            message: "succese",
            data: [100000000]
        }
          if (res && res.json) {
            res.json(result);
          } else {
            return result;
          }
      }
      }

另外，在组件中使用@符号时需进行babel配置

cnpm i @babel/plugin-proposal-decorators  babel-plugin-transform-decorators-legacy --save -dev

更改package.json 或.babelrc文件

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "style": "css"
        }
      ],
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose": true
        }
      ]
    ]
  }

至此，完成了react 项目的基本配置。从头来一遍，是希望自己对某些配置更熟悉
好记性不如烂笔头，记录一下。
原文出处： https://blog.csdn.net/xw505501936/article/details/80621740