์๋ ํ์ธ์!
์ต๊ทผ ๊ฐ๋ฐ์ ์ํด dva๋ฅผ ์ฌ์ฉํ๊ณ ์๋๋ฐ, dva ์๊ฐ๋ค์ ๋
ธ๊ณ ์ ๊ฐ์ฌ๋๋ฆฝ๋๋ค ~
ํ์ฌ ์ ๊ฐ ๊ฒช์ ๋ฌธ์ ๋ ํ๋ก์ ํธ ํ์ผ์ด ๋ง์ง ์์ง๋ง ํจํค์ง ํจํค์ง๊ฐ ๋งค์ฐ ํฌ๋ค๋ ๊ฒ์
๋๋ค (index.js๊ฐ 1.3MB์ ๋๋ฌํ์ต๋๋ค). dva ๋น๋๊ฐ ํ๋ก์ ํธ๋ฅผ ์ฌ๋ฌ ํญ๋ชฉ์ผ๋ก ๋ถํ ํ๊ณ ๊ธฐ๋ฅ๋ณ๋ก ํ์ด์ง๋ฅผ ๋ถํ ํ๋ ๊ฒ์ ์ง์ํ ์ ์๋์ง ๋ชจ๋ฅด๊ฒ ์ต๋๋ค.
package.json
๊ฒ์
@nikogu ์๋๋ ๋ด package.json์ ๋๋ค.
{
"private": true,
"entry": {
"index": "./src/index.js"
},
"peerDependencies": {
},
"dependencies": {
"antd": "^2.4.3",
"dva": "^1.1.0",
"echarts": "^3.3.1",
"echarts-for-react": "^1.1.6",
"moment-timezone": "^0.5.10",
"path-to-regexp": "^1.7.0",
"qs": "^6.3.0",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"reqwest": "^2.0.5"
},
"devDependencies": {
"atool-build": "^0.9.0",
"atool-test-mocha": "^0.1.5",
"babel-plugin-dev-expression": "^0.2.1",
"babel-plugin-dva-hmr": "^0.2.0",
"babel-plugin-import": "^1.1.0",
"babel-plugin-transform-runtime": "^6.9.0",
"babel-runtime": "^6.9.2",
"dora": "^0.4.3",
"dora-plugin-proxy": "^0.8.4",
"dora-plugin-webpack": "^0.8.1",
"dora-plugin-webpack-hmr": "^0.2.1",
"expect": "^1.20.2",
"redbox-react": "^1.3.2"
},
"scripts": {
"start": "dora --plugins \"proxy?watchDirs=./mock,webpack?port=8000,webpack-hmr\"",
"build": "atool-build",
"test": "atool-test-mocha ./src/**/*-test.js"
}
}
dvacli๋ก ํ๋ก์ ํธ๋ฅผ ๋ง๋ค์์ต๋๋ค.
dva new myproject
echarts๋ ์ด๋ฏธ ํฝ๋๋ค
@codering echarts3 ๊ณต์ ์น ์ฌ์ดํธ๋ ์์ถ ํ 170k ์ด์์ด๋ผ๊ณ ๋งํ์ต๋๋ค.
ํด๋น ๋ชจ๋์ ์์ฒญ์ ๋์
๋ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด ๆ็บฟๅพ
, ๆฑ็ถๅพ
, ้ฅผๅพ
๋ค์๊ณผ ๊ฐ์ด ๋์
// ==== ไปฅไธๅฟ
้กปๅผๅ
ฅ ====
// core
import echarts from 'echarts/lib/echarts'
// for ie8
//import 'zrender/lib/vml/vml'
// ๆฑ็ถๅพ
import 'echarts/lib/chart/bar'
// ๆ็บฟๅพ
import 'echarts/lib/chart/line'
// ้ฅผๅพ
import 'echarts/lib/chart/pie'
// ==== ไปฅไธไธๅผๅ
ฅไนๅฏไปฅ๏ผๅชๆฏๆฒกๆๆ๏ผไนไธไผๆฅ้ ====
// tooltip
import 'echarts/lib/component/tooltip'
// legend
import 'echarts/lib/component/legend'
// title
import 'echarts/lib/component/title'
echarts.init(...)
๋ ์ฑ๊ฐ์ ๊ฒ์ ์ด๋ฌํ ๋ชจ๋์ด ๊ฐ๋ ฅํ ์ข ์์ฑ์ด ์๋๋ผ๋ ๊ฒ์ ๋๋ค. ์ผ๋ถ ๋ชจ๋์ ๋์ ๋์ง ์์ผ๋ฉด ํจ๊ณผ๊ฐ์๊ณ ์ผ๋ถ ๋ชจ๋์ ๋ ๋๋ง ์ค์ ์ค๋ฅ ๋ฉ์์ง๋ฅผ ํ์ํ์ฌ ํน์ ๋ชจ๋์ ๋์ ํด์ผํฉ๋๋ค.
๋ฌผ๋ก ๋ฐ๋ฒจ ํ๋ฌ๊ทธ์ธ์ ์์ฑํ๋ ๊ฒ์ด ๋ ์ฝ์ต๋๋ค. . . . .
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
ํด๋น ๋ชจ๋์ ์์ฒญ์ ๋์ ๋ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด
ๆ็บฟๅพ
,ๆฑ็ถๅพ
,้ฅผๅพ
๋ค์๊ณผ ๊ฐ์ด ๋์๋ ์ฑ๊ฐ์ ๊ฒ์ ์ด๋ฌํ ๋ชจ๋์ด ๊ฐ๋ ฅํ ์ข ์์ฑ์ด ์๋๋ผ๋ ๊ฒ์ ๋๋ค. ์ผ๋ถ ๋ชจ๋์ ๋์ ๋์ง ์์ผ๋ฉด ํจ๊ณผ๊ฐ์๊ณ ์ผ๋ถ ๋ชจ๋์ ๋ ๋๋ง ์ค์ ์ค๋ฅ ๋ฉ์์ง๋ฅผ ํ์ํ์ฌ ํน์ ๋ชจ๋์ ๋์ ํด์ผํฉ๋๋ค.
๋ฌผ๋ก ๋ฐ๋ฒจ ํ๋ฌ๊ทธ์ธ์ ์์ฑํ๋ ๊ฒ์ด ๋ ์ฝ์ต๋๋ค. . . . .