使用create-react-app搭建dva项目（一）

---

一、使用create-react-app

1. 全局安装 create-react-app

npm install -g create-react-app

2. 创建项目，项目名为“react-cli-demo”（这里的–template typescript是创建ts的项目，如果需要创建js的不加此后缀。）

create-react-app react-cli-demo —-template typescript

二、增加webpack配置

直接执行以下命令，放出了默认的webpack配置项（create-react-app这版将配置文件都统一到config文件夹里）

npm run eject

如果执行该命令报错

• 原因：脚手架添加.gitgnore文件，但是却没有本地仓库。
• 解决方式：先把代码commit一下之后执行npm run eject就可以了。

三、安装less和less-loader（看个人需要）

npm i less less-loader —save-dev

1. 修改webpack.config.js里（将sass的配置复制一份为less）

            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: { // 开启模块化
                    mode: "icss",
                  },
                },
                "less-loader"
              ),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: {
                    mode: "local",
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                "less-loader"
              ),
            },

2. 在react-app-env.d.ts文件里增加

declare module "*.module.less" {
  const classes: { readonly [key: string]: string };
  export default classes;
}

声明后引入less文件可使用
import styles from ‘./index.module.less’
这种形式

三、安装antd（看个人需要）

npm install antd

注意：antd5的dist没有antd.css这个文件，所以样式不可引入全局样式

四、安装dva和history（看个人需要）

npm i dva --save
npm i history

顺带改造项目结构为

到这后看下一篇文章
使用create-react-app搭建dva项目（二）