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