梳理項目搭建（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啦～