一、什么是zha-cli脚手架？

基于React Antd TypeScript技术栈搭建的初始化项目的脚手架

生成后的项目有一套完整的配置，包括网络请求的封装，路由权限判断。显然里面的逻辑处理很难完全适用于用户的项目需求，请根据需要进行修改。但其意义还是很明显的，那就是方便了项目初始化，毕竟跟重头搭建一个项目工程相比，改改相关配置文件总要来得简单的多。

二、zha-cli仓库地址：https://www.npmjs.com/package/zha-cli

三、如何使用zha-cli？

1、全局安装

npm install -g zha-cli

2、创建项目

zha-cli create projectName

3、安装依赖

cd projectName

npm install

注：安装依赖时，出现问题，根据提示运行指令 npm audit fix

4、启动项目

npm start

注：启动项目前，记得修改一下config文件夹里配置后台服务器接口地址变量

webpack.dev.config.js、webpack.test.config.js、webpack.prod.config.js分别对应本地开发环境、测试打包，以及线上生产环境的webpack配置。请根据需求做更改。

{

    plugins:[

        new webpack.DefinePlugin({

            BASE_URL: JSON.stringify('xxx')

        })

    ]

}

5、打包测试环境

npm run build:test

6、打包正式环境

npm run build:prod

四、项目目录分析

config --配置文件

node-modules -- 依赖包

public -- html文件

src --

    assets--静态文件

    components --公共组件

    pages --页面

    reducers --redux的reducers就是用来处理数据的

    routes -- 定义路由

    sagas -- redux的中间件

    store -- redux的store,整个程序的状态/对象树保存在Store中

    utils -- 公共方法

app.tsx -- 定义app组件页面

main.tsx -- 项目入口

package.json --定义了这个项目所需要的各种模块

五、刚好项目中用到了这个脚手架，学习并收藏一下，以便后期搭建项目的时候可以快速使用到，如果你还有其他的脚手架，也可以分享给我，希望在学习跟积累中，以后能自己搭建一个很优秀的脚手架，向大佬们学习！