react项目初始化模板
3、输入用户名、密码、邮箱完成注册
5、安装 npm install xq-web-app-cli -g
6、xq-web-app-cli -V 输出版本信息,表示安装正确
7、初始化一个项目 xq-web-app-cli
8、自动安装node包由于网络原因可能会失败,安装失败的请手动安装
9、在项目根目录下运行 yarn run create 或者 npm run create 根据app.config.json配置文件创建页面并生成路由信息(自动生成的页面在src/view目录下)
10、yarn start 或者 npm start 运行项目
注意事项:
1、每次更改app.config.json文件时需要重新运行 yarn run create 并重启项目
初始化目录结构
├── config
│ │
│ └── webpack.config.dev.js 开发环境配置
│ │
│ └── webpack.config.prod.js 生成环境打包配置
|
├── public
| │
│ └── config.js 请求域名配置文件
| |
│ └── favicon.icon icon图标
│ │
│ └── index.html 项目模板页面
│
├── scripts
| │
│ └── build.js 项目打包脚本
| |
│ └── start.js 项目启动脚本
|
├── src
| │
│ └── assets 放置静态资源
| | |
│ | └── fonts 字体文件
│ | |
│ | └── images 图片
│ | |
│ | └── libs 其它库文件(项目打包时会将此文件夹整体复制过去)
│ | |
│ | └── styles 公用css
│ | |
│ | └── utils 常用工具方法
│ | |
│ | └── cookie.js cookie的操作方法
│ | |
│ | └── emitter.js 自定义事件的注册于触发
│ | |
│ | └── formatter.js 日期格式的处理(请使用moment.js库,功能更强大)
│ | |
│ | └── http.js 基于axios的请求封装
│ | |
│ | └── validator.js 常用的正则验证
| |
│ └── components 组件
| | |
| | └── form 基于antd表单验证组件封装
| | |
| | └── table 基于antd列表组件封装
| |
| └── service 所有的请求放在这里
| |
| └── app.config.json 自动生成页面和路由的配置文件
| |
| └── index.js 项目入口文件
| |
| └── .eslintrc.dev.json 代码规范校验配置
| |
| └── .eslintrc.prod.json 代码规范校验配置
| |
| └── .gitignore git忽略文件
| |
| └── package.json 项目node依赖配置
| |
| └── README.json
| |
| └── yarn.lock yarn安装依赖锁