一、框架搭建
1.環(huán)境搭建
npm install dva-cli -g
dva new dva-quickstart
npm start
如果安裝了其他的架包蝶棋，希望在npm start 前 npm i一下。
2. 使用 antd
通過 npm 安裝 antd和 babel-plugin-import 橱夭。
babel-plugin-import是用來按需加載 antd 的腳本和樣式的腰吟，詳見 repo 。
$ npm install antd babel-plugin-import --save
編輯 .roadhogrc鹤树，使 babel-plugin-import 插件生效。
"extraBabelPlugins": [
- "transform-runtime"
+ "transform-runtime",
+ ["import", { "libraryName": "antd", "style": "css" }]
],
3.定義路由
4.編寫 UI Component
5.定義 Model
6.connect 起來
7.mock數(shù)據(jù)
.roadhogrc.mock.js文件中
const loanee = [
{
key: 1,
no: '新增',
type: 'add',
case: '(2016)單民初字第744號',
caseType: '刑事案件',
caseDate: '2016-04-10',
court: '北京第一人民法院',
courtInfo: '北京第一人民法院',
tribunal: '北京第一人民法庭',
tribunalInfo: '北京第一人民法庭',
noticeCourtInfo: '打贏官司',
instrumentDetail: '一切事情逊朽，物來則應罕伯，過去不留',
caseStatus: '審理中',
caseRole: '被告',
caseExample: '侵害商標權(quán)糾紛',
amount: '10000',
judgementDoc: '有',
caseTitle: '樂事與淮安同信商標權(quán)1',
caseTitleContent: '淡定淡定淡定淡定1'
}]
'GET /api/loanee': (req, res) => {
res.json({
success: true,
data: otherLoanee,
});
},
'POST /api/loanee': (req, res) => {
const id = parseInt(req.query.id);
switch (id) {
case 1:
res.json({
success: true,
data: loanee,
});
break；
default:
res.json({
success: true,
data: loanee,
});
break;
}
},
8.構(gòu)建應用
npm run build
二叽讳、代碼規(guī)范約束
最新版webstorm 配置+editorconfig+eslintrc保證格式化代碼的正確性
1.editorConfig
# http://editorconfig.org
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
[Makefile]
indent_style = tab
2.eslintrc
{
"parser": "babel-eslint",
"extends": "airbnb",
"rules": {
"max-len": ["error",200],
"no-useless-concat":[2],
"generator-star-spacing": [0],
"consistent-return": [0],
"react/forbid-prop-types": [0],
"react/jsx-filename-extension": [1, { "extensions": [".js"] }],
"global-require": [1],
"import/prefer-default-export": [0],
"react/jsx-no-bind": [0],
"react/prop-types": [0],
"react/prefer-stateless-function": [0],
"no-else-return": [0],
"no-restricted-syntax": [0],
"import/no-extraneous-dependencies": [0],
"no-use-before-define": [0],
"jsx-a11y/no-static-element-interactions": [0],
"no-nested-ternary": [0],
"arrow-body-style": [0],
"import/extensions": [0],
"no-bitwise": [0],
"no-cond-assign": [0],
"import/no-unresolved": [0],
"require-yield": [1]
},
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true
}
}
}
3.webstorm配置追他，同時激活eslint功能，其實eslint已經(jīng)在nodemodules下岛蚤。
1.png
2.png
3.png
三邑狸、加precommit功能，以及git提交代碼腳本書寫
簡單的一行代碼涤妒，可以讓每次提交代碼更輕松簡單
#! /bin/sh
# 提交代碼 并且?guī)峤粌?nèi)容
git add -A
git commit -m "$1"
git push
此時单雾，如果出現(xiàn)這樣的界面，說明提交已經(jīng)完成。只是warn并非絕對錯誤硅堆。
4.png
OK屿储，
總結(jié)一下：
在webstorm中整個react+antd+eslint+git+precommit組成了了以react為核心的前端架構(gòu)。
目的是：讓代碼質(zhì)量更高渐逃，讓錯誤有依有據(jù)够掠，讓代碼邏輯更強，讓業(yè)務開發(fā)更簡單朴乖，讓組件復用性更好祖屏，讓前端更高效助赞。
希望能幫助到正在學react的你买羞。
