Yay! Welcome to dva!

Step 1. 安装 dva-cli 并创建应用

[livingbody@localhost ~]$ sudo cnpm i dva-cli@0.7 -g
[sudo] livingbody 的密码：
Downloading dva-cli to /usr/local/node-v10.13.0-linux-x64/lib/node_modules/dva-cli_tmp
Copying /usr/local/node-v10.13.0-linux-x64/lib/node_modules/dva-cli_tmp/_dva-cli@0.7.10@dva-cli to /usr/local/node-v10.13.0-linux-x64/lib/node_modules/dva-cli
Installing dva-cli's dependencies to /usr/local/node-v10.13.0-linux-x64/lib/node_modules/dva-cli/node_modules
[1/12] path-exists@^3.0.0 installed at node_modules/_path-exists@3.0.0@path-exists
[2/12] commander@^2.9.0 installed at node_modules/_commander@2.19.0@commander
[3/12] left-pad@^1.1.3 installed at node_modules/_left-pad@1.3.0@left-pad
[4/12] simple-uppercamelcase@^1.0.0 installed at node_modules/_simple-uppercamelcase@1.0.0@simple-uppercamelcase
[5/12] chalk@^1.1.3 installed at node_modules/_chalk@1.1.3@chalk
[6/12] win-spawn@^2.0.0 installed at node_modules/_win-spawn@2.0.0@win-spawn
[7/12] empty-dir@^0.2.1 installed at node_modules/_empty-dir@0.2.1@empty-dir
[8/12] fs-extra@^0.30.0 installed at node_modules/_fs-extra@0.30.0@fs-extra
[9/12] which@^1.2.10 installed at node_modules/_which@1.3.1@which
[10/12] through2@^2.0.1 installed at node_modules/_through2@2.0.5@through2
[11/12] vinyl-fs@^2.4.3 installed at node_modules/_vinyl-fs@2.4.4@vinyl-fs
[12/12] dva-ast@^0.3.5 installed at node_modules/_dva-ast@0.3.5@dva-ast
deprecate win-spawn@^2.0.0 use [cross-spawn](https://github.com/IndigoUnited/node-cross-spawn) or [cross-spawn-async](https://github.com/IndigoUnited/node-cross-spawn-async) instead.
deprecate dva-ast@0.3.5 › jscodeshift@0.3.32 › babel-preset-es2015@^6.9.0 ????  Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update! 
deprecate dva-ast@0.3.5 › jscodeshift@0.3.32 › nomnom@^1.8.1 Package no longer supported. Contact support@npmjs.com for more info.
deprecate dva-ast@0.3.5 › jscodeshift@0.3.32 › babel-core@5.8.38 › minimatch@^2.0.3 Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
Recently updated (since 2018-12-08): 2 packages (detail see file /usr/local/node-v10.13.0-linux-x64/lib/node_modules/dva-cli/node_modules/.recently_updates.txt)
  2018-12-13
    → dva-ast@0.3.5 › jscodeshift@0.3.32 › flow-parser@^0.*(0.89.0) (23:16:09)
  2018-12-10
    → dva-ast@0.3.5 › jscodeshift@0.3.32 › colors@^1.1.2(1.3.3) (09:35:48)
All packages installed (342 packages installed from npm registry, used 10s(network 10s), speed 761.89kB/s, json 298(653.68kB), tarball 6.75MB)
[dva-cli@0.7.10] link /usr/local/node-v10.13.0-linux-x64/bin/dva@ -> /usr/local/node-v10.13.0-linux-x64/lib/node_modules/dva-cli/bin/dva
[livingbody@localhost ~]$ dva -v
dva-cli: 0.7.10
[livingbody@localhost ~]$ 

创建工程

[

livingbody@localhost dva]$ dva new user-dashboard
/usr/local/node-v10.13.0-linux-x64/lib/node_modules/dva-cli/bin/dva-new
Creating a new Dva app in /home/livingbody/dva/user-dashboard.

      create  .editorconfig
      create  .eslintrc
      create  .roadhogrc
      create  .roadhogrc.mock.js
      create  gitignore
      create  package.json
      create  mock/.gitkeep
      create  public/index.html
      create  src/index.css
      create  src/index.js
      create  src/router.js
      create  src/assets/yay.jpg
      create  src/models/example.js
      create  src/components/Example.js
      create  src/routes/IndexPage.css
      create  src/routes/IndexPage.js
      create  src/services/example.js
      create  src/utils/request.js
      rename  gitignore -> .gitignore
         run  npm install
use npm: cnpm
⠙ [15/16] Installing fs-extra@^3.0.1platform unsupported roadhog@1.4.2 › chokidar@1.7.0 › fsevents@^1.0.0 Package require os(darwin) not compatible with your platform(linux)
[fsevents@^1.0.0] optional install error: Package require os(darwin) not compatible with your platform(linux)
✔ Installed 16 packages
✔ Linked 956 latest versions
husky
setting up hooks
Can't find .git directory, skipping Git hooks installation
✔ Run 3 scripts
peerDependencies link ajv@4.11.8 in /home/livingbody/dva/user-dashboard/node_modules/_ajv-keywords@1.5.1@ajv-keywords unmet with /home/livingbody/dva/user-dashboard/node_modules/ajv(6.6.1)
peerDependencies link react@0.14.9 in /home/livingbody/dva/user-dashboard/node_modules/_react-dom@0.14.9@react-dom unmet with /home/livingbody/dva/user-dashboard/node_modules/react(15.6.2)
deprecate eslint@3.19.0 › file-entry-cache@2.0.0 › flat-cache@1.3.4 › circular-json@^0.3.1 CircularJSON is in maintenance only, flatted is its successor.
deprecate roadhog@1.4.2 › babel-preset-es2015@^6.18.0 ????  Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update! 
deprecate roadhog@1.4.2 › autoprefixer@7.2.6 › browserslist@^2.11.3 Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
deprecate roadhog@1.4.2 › css-loader@0.28.11 › cssnano@3.10.0 › autoprefixer@6.7.7 › browserslist@^1.7.6 Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
deprecate roadhog@1.4.2 › less@2.7.3 › request@2.81.0 › hawk@3.1.3 › boom@2.x.x This version is no longer maintained. Please upgrade to the latest version.
deprecate roadhog@1.4.2 › less@2.7.3 › request@2.81.0 › hawk@3.1.3 › cryptiles@2.x.x This version is no longer maintained. Please upgrade to the latest version.
deprecate roadhog@1.4.2 › less@2.7.3 › request@2.81.0 › hawk@3.1.3 › hoek@2.x.x This version is no longer maintained. Please upgrade to the latest version.
Recently updated (since 2018-12-08): 3 packages (detail see file /home/livingbody/dva/user-dashboard/node_modules/.recently_updates.txt)
  Today:
    → roadhog@1.4.2 › autoprefixer@7.2.6 › browserslist@2.11.3 › electron-to-chromium@^1.3.30(1.3.92) (09:02:24)
✔ All packages installed (1135 packages installed from npm registry, used 23s(network 21s), speed 1.55MB/s, json 972(2.15MB), tarball 30.14MB)
✔ Installed 1 packages
✔ Run 0 scripts
✔ All packages installed (used 557ms(network 554ms), speed 11.18kB/s, json 1(6.2kB), tarball 0B)
cnpm install end

Success! Created user-dashboard at /home/livingbody/dva/user-dashboard.

Inside that directory, you can run several commands:
  * npm start: Starts the development server.
  * npm run build: Bundles the app into dist for production.
  * npm test: Run test.

We suggest that you begin by typing:
  cd /home/livingbody/dva/user-dashboard
  npm start

Happy hacking!

Step 2. 配置 antd 和 babel-plugin-import

$ cd user-dashboard 

babel-plugin-import 用于按需引入 antd 的 JavaScript 和 CSS，这样打包出来的文件不至于太大。

[livingbody@localhost user-dashboard]$ cnpm i antd --save
✔ Installed 1 packages
✔ Run 0 scripts
peerDependencies link @ant-design/icons@1.1.16 in /home/livingbody/dva/user-dashboard/node_modules/_@ant-design_icons-react@1.1.2@@ant-design/icons-react unmet with /home/livingbody/dva/user-dashboard/node_modules/@ant-design/icons(-)
peerDependencies WARNING antd@* requires a peer of react@>=16.0.0 but react@15.6.2 was installed
peerDependencies WARNING antd@3.11.2 › @ant-design/icons-react@~1.1.2 requires a peer of react@16.x but react@15.6.2 was installed
peerDependencies WARNING antd@3.11.2 › rc-switch@~1.8.0 requires a peer of react@^16.0.0 but react@15.6.2 was installed
peerDependencies WARNING antd@* requires a peer of react-dom@>=16.0.0 but react-dom@15.6.2 was installed
peerDependencies WARNING antd@3.11.2 › rc-switch@~1.8.0 requires a peer of react-dom@^16.0.0 but react-dom@15.6.2 was installed
Recently updated (since 2018-12-08): 5 packages (detail see file /home/livingbody/dva/user-dashboard/node_modules/.recently_updates.txt)
✔ All packages installed (80 packages installed from npm registry, used 10s(network 10s), speed 1.31MB/s, json 88(393.11kB), tarball 12.95MB)
[1]+  Killed                  npm i antd --save

继续装

[livingbody@localhost user-dashboard]$ cnpm i babel-plugin-import --save-dev
✔ Installed 1 packages
✔ Run 0 scripts
Recently updated (since 2018-12-08): 1 packages (detail see file /home/livingbody/dva/user-dashboard/node_modules/.recently_updates.txt)
  Today:
    → babel-plugin-import@1.11.0 › @babel/helper-module-imports@7.0.0 › @babel/types@^7.0.0(7.2.2) (18:05:23)
✔ All packages installed (6 packages installed from npm registry, used 2s(network 2s), speed 55.76kB/s, json 8(19.49kB), tarball 107.09kB)

修改

修改 .roadhogrc，在 “extraBabelPlugins” 里加上：

["import", { "libraryName": "antd", "style": "css" }]
[livingbody@localhost user-dashboard]$ cat .roadhogrc
{
  "entry": "src/index.js",
  "env": {
    "development": {
      "extraBabelPlugins": [
        "dva-hmr",
        "transform-runtime"
      ]
    },
    "production": {
      "extraBabelPlugins":[
       ["import", { "libraryName": "antd", "style": "css" }]]
    },
    "proxy": {
      "/api": {
        "target": "http://jsonplaceholder.typicode.com/",
        "changeOrigin": true,
        "pathRewrite": { "^/api" : "" }
      }
    }
  }
}

Step 3. 配置代理，能通过 RESTFul 的方式访问

新的改变

修改 .roadhogrc，加上 “proxy” 配置：

"proxy": {
  "/api": {
    "target": "http://jsonplaceholder.typicode.com/",
    "changeOrigin": true,
    "pathRewrite": { "^/api" : "" }
  }
},

然后启动应用：(这个命令一直开着，后面不需要重启)

$ cnpm start
浏览器会自动开启，并打开 http://localhost:8000 。

访问 http://localhost:8000/api/users ，就能访问到 http://jsonplaceholder.typicode.com/users 的数据。(由于 typicode.com 服务的稳定性，偶尔可能会失败。不过没关系，正好便于我们之后对于出错的处理)X