# 克隆项目
git clone git@github.com:xh476645818/OurFramework.git
# 安装依赖
// 推荐使用npm安装
npm install
//or 使用淘宝镜像安装可以解决下载速度过慢
npm install -g cnpm --registry=https://registry.npm.taobao.org
然后执行
cnpm install
#若已经使用cnpm 安装失败，请使用以下办法解决：
1、删除项目目录中package-lock.json
2、npm uninstall //删除package锁
3、物理删除nod_modules
4、npm install下载开发模式
npm run dev
生产模式
npm run build 进行打包
npm run server 启动node服务进行浏览
访问前需要配置config/project.config.json整体工程基本设置文件
{
"devUrl": "0.0.0.0", //开发访问地址,开发环境中的IP地址
"devPort": "8080", //开发访问端口,开发环境中的端口
"webTitle": "脚手架", //项目名称，打包后的页面title标签内容
"proUrl": "192.168.3.8", //生产访问地址，关联server.js
"proPort": 8024 //生产访问端口，关联server.js
}
# 注意：启动项目前要修改项目的开发访问地址，否则会报错；
查看ip:
打开windows命令窗口，快捷键 windows+R 输入：cmd进入DOS模式；
输入：ipconfig 查看IP(IPv4 地址 即是本地IP)
浏览器访问 http://192.168.3.8:8080
build目录为打包配置文件
├── build // 构建相关
│ ├── webpack.common.js // webpack打包配置文件
│ ├── webpack.dev.js // 开发环境打包配置
│ ├── webpack.pro.js // 生产环境打包配置
# 注意：不要随便改动以上文件
├── entrance // 入口文件
│ ├── app.js // 此文件是整个项目的主入口
│ ├── template.html // 模板文件（处理Ie兼容）
通过配置template.html文件兼容Ie8+,此文件中主要是通过引入es5-sham.min.js、es5-shim.min.js、es6-sham.min.js、es6-shim.min.js（在webpack.common.js文件中，还需配置babel-polyfill来转换语法，实现浏览器不支持原生功能的代码）
#考虑到网络状况的原因转换兼容文件是存放在本项目中 src/public/ie/下
<script src="../public/ie/es5-shim.min.js"></script>
<script src="../public/ie/es5-sham.min.js"></script>
<script src="../public/ie/es6-shim.min.js"></script>
<script src="../public/ie/es6-sham.min.js"></script>
在build/webpack.common.js文件中使用webpack配置plugins，进行全局配置
目前项目中进行了全局引入第三库配置的有：echarts、React、Component、Fragment、react-redux的connect、Proptypes、ReactDom
plugins: [
new webpack.ProvidePlugin({
echarts: 'echarts',
React: 'react',
Component: ['react', 'Component'],
Fragment : ['react', 'Fragment'],
connect : ['react-redux', 'connect'],
PropTypes: 'prop-types',
ReactDOM: 'react-dom'
})
]
1、在webpack.common.js文件中配置的全部别名路径
例：
resolve: {
alias: {
//图片别名
'img': path.resolve(__dirname, '../src/public/images'),
//图片别名
'media': path.resolve(__dirname, '../src/public/media'),
//字体别名
'font': path.resolve(__dirname, '../src/public/font'),
//data别名
'data': path.resolve(__dirname, '../src/public/data'),
//mock别名
'mock': path.resolve(__dirname, '../src/mock'),
//action别名
'action': path.resolve(__dirname, '../src/redux/Action'),
//reducer别名
'reducer': path.resolve(__dirname, '../src/redux/Reducer'),
//saga别名
'saga': path.resolve(__dirname, '../src/redux/Saga'),
//store别名
'store': path.resolve(__dirname, '../src/redux/Store'),
//容器别名
'con': path.resolve(__dirname, '../src/containers'),
//组件别名
'com': path.resolve(__dirname, '../src/component'),
//公用方法
'method': path.resolve(__dirname, '../src/public/method')
}
}
2、使用别名（引入导出）
图片引入方式：
import A from 'img/A.jpg'
单个.js文件引入方式：
import A frome "./A"
import C frome "./C"
多个文件引入方式：
import {B1,B2,B3} frome "./B"
导出(两种方式)：
（1）、export{...}导出可以导出多个
export {
A,
B1,B2,
C
}
（2）、export default 导出默认的唯一组件（只可导出一个）
export default A;
component、containers、redux/Action、redux/Reducer、redux/Sage、redux/Store
等文件中定义各自的index.js
示例图片:
说明：使用这种方法：当项目文件庞大时可以清晰方便的使用路径文件，优化代码
使用 import * as ...方式引入和使用:
//导入Con中的所有
import * as Con from "con/index";
使用:
Con.A;
部分导入方式
//部分导入
import {A,B1,B2} from "com/index"
import {A,B1,B2} from "con/index"
import {A,B1} from "action/index"
组件文件夹、组件.js文件及组件样式文件首字母要大写且使用大驼峰命名规范
本项目使用sass，样式文件命名可以是：.scss或.css;命名格式与给所加样式的.js文件名相同
其他文件使用小写；
//导入样式文件使用import
import "./AppA.scss";
├── build // 构建相关
├── config // 配置相关
├── doc // 文档说明图片
├── src // 源代码
│ ├── component // 无状态组件
│ ├── containers // 大组件容器
│ ├── entrance // 入口文件
│ ├── mock // mock数据
│ ├── public // 公共文件（data、、图片、公共方法等）
│ │ ├── data // 存放mock（假）数据
│ │ ├── font // 图标文字
│ │ ├── ie // 兼容IE8+的转换包
│ │ ├── images // 公共图片
│ │ ├── method // 公共方法
│ ├── redux // redux相关
│ ├── index.html // 入口html
├── .gitignore // git 忽略项
├── package.json // package.json
├── server.js // server
├── readme.md // 脚手架项目文档说明
├── 脚手架需要.md // 脚手架需要.md