Yay! Welcome to dva!

Yay! Welcome to dva!"/>

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]() or [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 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  .editorconfigcreate  .eslintrccreate  .roadhogrccreate  .roadhogrc.mock.jscreate  gitignorecreate  package.jsoncreate  mock/.gitkeepcreate  public/index.htmlcreate  src/index.csscreate  src/index.jscreate  src/router.jscreate  src/assets/yay.jpgcreate  src/models/example.jscreate  src/components/Example.jscreate  src/routes/IndexPage.csscreate  src/routes/IndexPage.jscreate  src/services/example.jscreate  src/utils/request.jsrename  gitignore -> .gitignorerun  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 endSuccess! 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-dashboardnpm startHappy 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": "/","changeOrigin": true,"pathRewrite": { "^/api" : "" }}}}
}

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

新的改变

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

"proxy": {"/api": {"target": "/","changeOrigin": true,"pathRewrite": { "^/api" : "" }}
},

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

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

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