项目安装

1.安装开发环境

webstorm 2018.2.5
node > v8.9.1

2.安装全局模块

此项目必装
npm install -g gulp

npm install -g babel-cli
npm install -g webpack
npm install -g eslint
npm install -g eslint-plugin-import
npm install -g eslint-config-airbnb
npm install -g eslint-plugin-jsx-a11y
npm install -g eslint-plugin-react
npm install -g eslint-plugin-vue
npm install -g eslint-plugin-html
npm install -g babel-eslint

3.安装依赖模块

开发环境
npm install

单独模块安装
npm install --save-dev 模块名
npm install --save 模块名

4.项目说明

+ [build]                                     项目webpack编译文件
+ [config]                                    项目配置文件
+ [dist]                                      项目发布临时文件夹
+ [src]                                       项目代码文件夹
+ [.babelrc]                                  babel代码转换
+ [.editorconfig]                             文件统一格式化，支持所有开发工具
+ [.eslintignore]                             项目代码检测忽略配置
+ [.eslint]                                   项目代码检测
+ [.gitignore]                                Git版本管理配置文件，用于配置不需要加入版本管理的文件
+ [server.js]                                 项目启动文件
+ [gulpfile.js]                               自动化打包，编译，压缩，部署服务器
+ [package.json]                              项目配置，自定义命令，启动程序，自动部署

5.package.json自定义命令说明

npm run env:dev        开发环境运行
npm run code:eslint    项目代码检测
npm run code:fix       项目代码修复
npm run publish:dev    将代码打包到测试服务器
npm run publish:prod   将代码打包到正式服务器

6.运行程序执行命令：npm run env:dev

其他

模块说明

chalk // 粉笔，客户端带颜色输出
connect-history-api-fallback // 地址栏历史回退
eventsource-polyfill // 事件源腻子，用于前端页面热加载，用于低版本浏览器
extract-text-webpack-plugin // 抽离css样式成文件,防止将样式打包在js中引起页面样式加载错乱的现象
http-proxy-middleware // http代理，将远程后端接口地址转为本地地址，防止服务器跨域禁止
opn // 自动打开浏览器
optimize-css-assets-webpack-plugin // 删除不同组件中重复的CSS
ora // 终端执行命令时显示加载图案效果
rimraf // The UNIX command rm -rf for node（删除掉文件）
semver // 版本号 格式化，检测，匹配 库
webpack-bundle-analyzer // webpack 编译结果报告，可在浏览器中查看