Step 1. 安装 dva-cli 并创建应用
[livingbody@localhost ~]$ sudo cnpm i [email protected] -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/[email protected]@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/[email protected]@path-exists
[2/12] commander@^2.9.0 installed at node_modules/[email protected]@commander
[3/12] left-pad@^1.1.3 installed at node_modules/[email protected]@left-pad
[4/12] simple-uppercamelcase@^1.0.0 installed at node_modules/[email protected]@simple-uppercamelcase
[5/12] chalk@^1.1.3 installed at node_modules/[email protected]@chalk
[6/12] win-spawn@^2.0.0 installed at node_modules/[email protected]@win-spawn
[7/12] empty-dir@^0.2.1 installed at node_modules/[email protected]@empty-dir
[8/12] fs-extra@^0.30.0 installed at node_modules/[email protected]@fs-extra
[9/12] which@^1.2.10 installed at node_modules/[email protected]@which
[10/12] through2@^2.0.1 installed at node_modules/[email protected]@through2
[11/12] vinyl-fs@^2.4.3 installed at node_modules/[email protected]@vinyl-fs
[12/12] dva-ast@^0.3.5 installed at node_modules/[email protected]@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 [email protected] › [email protected] › 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 [email protected] › [email protected] › nomnom@^1.8.1 Package no longer supported. Contact [email protected] for more info.
deprecate [email protected] › [email protected] › [email protected] › 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
→ [email protected] › [email protected] › flow-parser@^0.*(0.89.0) (23:16:09)
2018-12-10
→ [email protected] › [email protected] › 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)
[[email protected]] 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 [email protected] › [email protected] › 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 [email protected] in /home/livingbody/dva/user-dashboard/node_modules/[email protected]@ajv-keywords unmet with /home/livingbody/dva/user-dashboard/node_modules/ajv(6.6.1)
peerDependencies link [email protected] in /home/livingbody/dva/user-dashboard/node_modules/[email protected]@react-dom unmet with /home/livingbody/dva/user-dashboard/node_modules/react(15.6.2)
deprecate [email protected] › [email protected] › [email protected] › circular-json@^0.3.1 CircularJSON is in maintenance only, flatted is its successor.
deprecate [email protected] › 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 [email protected] › [email protected] › browserslist@^2.11.3 Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
deprecate [email protected] › [email protected] › [email protected] › [email protected] › browserslist@^1.7.6 Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
deprecate [email protected] › [email protected] › [email protected] › [email protected] › [email protected] This version is no longer maintained. Please upgrade to the latest version.
deprecate [email protected] › [email protected] › [email protected] › [email protected] › [email protected] This version is no longer maintained. Please upgrade to the latest version.
deprecate [email protected] › [email protected] › [email protected] › [email protected] › [email protected] 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:
→ [email protected] › [email protected] › [email protected] › 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/[email protected] in /home/livingbody/dva/user-dashboard/node_modules/_@[email protected]@@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 [email protected] was installed
peerDependencies WARNING [email protected] › @ant-design/icons-react@~1.1.2 requires a peer of [email protected] but [email protected] was installed
peerDependencies WARNING [email protected] › rc-switch@~1.8.0 requires a peer of react@^16.0.0 but [email protected] was installed
peerDependencies WARNING antd@* requires a peer of react-dom@>=16.0.0 but [email protected] was installed
peerDependencies WARNING [email protected] › rc-switch@~1.8.0 requires a peer of react-dom@^16.0.0 but [email protected] 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:
→ [email protected] › @babel/[email protected] › @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