react项目实战1——项目结构及打包部署

react入门学习告一段路，其中UI样式就不做练习了。想法是，对于咱测试而言，并不需要追求很好的样式，当然css的一些基本概念还是需要懂得，但对于自定义样式，基本属于没有需求，直接引入成型的UI组件库就可以了，做拿来主义即可。

项目创建

脚手架

webstorm直接新建项目（没必要一定要从零开始，什么终端创建）

注意的是，需要在项目目录下新建一个.env文件，内容为SKIP_PREFLIGHT_CHECK=true。原因是版本不兼容，忽略版本检查。

试运行，终端键入yarn start，跑起来就算成功了

打包部署

首先，安装serve，命令：npm install -g serve

打包：npm run build，打完包会在项目目录下创建一个build文件夹，这个就是部署在生产环境下的文件

最后，serve build运行即可

基本结构

src

        api——ajax后端接口路由

        assets——公用资源

        components——非路由组件

        config——配置

        pages——路由组件

        utils——工具模块

实际项目中，一般都是这样的项目结构

antd-pro

首先，该框架是antd+umi搭建的，所以必须安装了umi才行

node -v

npm -v

yarn -v

umi -v

这四个必须都已经安装了，安装最后一个是通过npm install umi -g

然后就是下载该框架的代码了，使用npx create-umi project_name，按提示进行选择即可

打开框架后，就像python根据requirement安装依赖一下，js具体根据那个配置安装依赖真还没研究，但框架必然是需要安装依赖的，框架不可能把所有依赖都打包放一起让你下载。所以直接执行npm install慢慢等待下载即可

最后试运行，npm start就可以了

接下来本人的项目练习就是基于antd-pro框架进行的