梳理项目搭建（dn+mobx+fusion+webpack）

项目环境(前后分离):

项目初始化：dn init 选择你需要的项目框架，dn已经开源：前往开源地址
webpack环境上关于别名的配置要在jsconfig.json 上加入paths来解决识别 alias不能跳转的问题：

  jsconfig.json
  compilerOptions
  "baseUrl": ".", // 相对于 "baseUrl"
  "paths": { // 解决 webpack alias 无法跳转的问题
    "css/*": ["./src/css/*"],
    "common/*": ["./src/scripts/common/*"],
    "components/*": ["./src/scripts/components/*"],
    "constants/*": ["./src/scripts/constants/*"],
    "layouts/*": ["./src/scripts/layouts/*"],
    "libs/*": ["./src/scripts/libs/*"],
    "pages/*": ["./src/scripts/pages/*"],
    "services/*": ["./src/scripts/services/*"],
    "stores/*": ["./src/scripts/stores/*"],
    "utils/*": ["./src/scripts/utils/*"]
  }

在最外层生成的index.js中加入引入的组件库的css样式文件及相应的项目需要用到的主题样式，应用组件库 Fusion Design；
模拟mock数据，要在项目中的配置文件(server.yml)中，配置proxy-rules，本地mock采用的是内部的mock平台，但是发现一个在线mock平台看起来很好用：Easy Mock
dn dev 最后项目跑起来就可以按照现有的文件结构来愉快的组建页面了...
项目页面测试完成通过dn的构建发布到cdn，将html文件提供给后端作为vm，后端部署一般都会更改vm的版本js的cdn地址，保证线上环境的正确使用；

项目的登陆设置：

该项目通过账户信息自动登陆了权限校验系统，实际是从内部某主要权限校验系统登陆过来的--通过后端添加拦截器的方式来保存校验账户信息；
判断依据：router_path；

Router：

基于dn这边跑起来的路由没什么好说的，因为整个框架是基于dn框架来搞的，如果添加最外层路由可以直接通过dn add 添加路由页面；
因为当前我们这个前端项目应用的dn版本内嵌的react-router版本是v4，所以在嵌套路由跟之前的v2版本要区别开（很不好意思的表示我好像没有用过v3）：
- 最外层的route_path还是按照dn add 选择router生成的方式来添加路由组件，但如果用到嵌套路由的话：在嵌套页面的最外层pages上重新加入Route组件：
```
import { Route,Switch } from 'react-router-dom';
<OuterLayout> // OuterLayout 就是第一层的路由页面
  <Switch>
    <Route exact path='/router1' component={Component1}/>
    <Route path='/router2Component1' component={Component2}/>
  </Switch>
</OuterLayout>
```
- v4的router有一个问题：如果用query传参的形式来做数据传递的话，重新刷新页面在获取query就会拿不到从上一个路由跑过来的queryParams，所以可以选择用解析props.location.search的方法来实现query参数的传递……
所有的router_path 加好之后，要注意要在最外层的router对应页面上加入{this.props.children}来实现子路由页面的挂载；

页面开发

我们在配置好mock数据之后，主要包了一下请求数据的方法；
其他的就直接开发页面ok啦～