1. 开发环境
1.1 安装 nodeJs,版本大于8.5.0。
1.2 安装cnpm
获得更快速、更安全的包管理体验。(可选)
npm install -g cnpm --registry=https://registry.npm.taobao.org
1.3 安装umi
依赖
1. mkdir antd-umi-course
2. cd antd-umi-course
3. cnpm init -y //初始化package.json
4. cnpm install umi --save-dev //安装umi的依赖
2. 创建页面
1. 创建配置文件config/config.js
或者.umirc.js
,初始化config/config.js
export default {};
2. 新建src目录,存放项目除配置以及单测以外的主要代码。
3. 在umi约定中,存放页面代码的文件夹是pages是复数,如需要改成page单数,在配置文件中添加singular:true
export default {
singular: true
}
4. 创建组件。新建src/page/HelloWorld.js
export default () => {
return <div>hello world</div>;
}
5. umi启动代码。在package.json中的scripts里面添加两个命令。
{
"scripts": {
+ "dev": "umi dev",
+ "build": "umi build"
}
}
在项目中,通过cnpm run [scriptname]
来运行
cnpm run dev
运行成功浏览器会打开http://localhost:8000/
路径。在umi中,1.可以使用约定式的路由,在page
下面的js文件都会按照文件名映射到一个路由,如访问/helloworld
会对应到HellloWorld.js;
2.也可以使用配置式路由,在配置文件config/config.js
中添加如下配置:
export default {
routes: [{
path: '/',
component: './HelloWorld',
}],
}
3. 添加插件
1. 安装插件cnpm install umi-plugin-react --save-dev
2. 在配置文件引入插件config/config.js
export default {
plugins: [
['umi-plugin-react', {
// 这里暂时还没有添加配置,该插件还不会有作用,我们会在后面的课程按照需求打开相应的配置
}],
],
routes: [{
path: '/',
component: './HelloWorld',
}],
}
4. Git管理
git init
git add -A
git commit -m 'init'
cnpm 安装的依赖会被默认安装到项目的 node_modules
目录下。这个目录通常是不需要提交到代码仓库中的。如果你使用的是 git 来作为代码的管理工具,那么你可以添加.gitignore
文件到项目根目录中,避免将不必要的代码提交到 git 仓库中。
node_modules
dist
.umi
git管理代码的细节不在这讲
5. 构建和部署
你可以通过 cnpm run build 来构建出最终的产物,执行该命令后会生成最终的 HTML、CSS 和 JS 到 dist 目录下。它们是浏览器可以直接识别并运行的代码,这样你就可以将它们部署到你想要的服务器上了。
6. 使用Ant Design组件
1. 引入antd
在 umi 中,你可以通过在插件集 umi-plugin-react 中配置 antd 打开 antd 插件,antd 插件会帮你引入 antd 并实现按需编译。
export default {
plugins: [
['umi-plugin-react', {
antd: true
}],
],
}
2. 使用antd
import { Card } from 'antd';
export default () => {
return (
<Card actions={[<a>操作一</a>, <a>操作二</a>]}>
</Card>
);
}
7. 路由配置
假设页面已经配置好了layout布局
例如:文件夹如下
├── Dashboard
│ ├── Analysis.js
│ ├── Monitor.js
│ └── Workplace.js
配置路由如下
export default {
routes: [{
path: '/',
component: '../layout',
routes: [
{
path: '/dashboard',
routes: [
{ path: '/dashboard/analysis', component: 'Dashboard/Analysis' },
{ path: '/dashboard/monitor', component: 'Dashboard/Monitor' },
{ path: '/dashboard/workplace', component: 'Dashboard/Workplace' }
]
},
]
}],
};
8. 使用dva
1. 引入dva
在 umi 中,你可以通过在插件集 umi-plugin-react 中配置 dva 打开 dva 插件。
export default {
plugins: [
['umi-plugin-react', {
antd: true,
dva: true,
}],
],
// ...
}
DVA 是基于 redux、redux-saga 和 react-router 的轻量级前端框架及最佳实践沉淀。其中,model 是 DVA 中最重要的概念,一个简单的 model 示例如下:
app.model({
namespace: 'todoList',
state: [],
effects: {
*query({ _ }, { put, call }) {
const rsp = yield call(queryTodoListFromServer);
const todoList = rsp.data;
yield put({ type: 'save', payload: todoList });
},
},
reducers: {
save(state, { payload: todoList }) {
return [...state, todoList];
},
},
});
- namespace:model 的命名空间,只能用字符串。一个大型应用可能包含多个 model,通过namespace区分。
- state:当前 model 状态的初始值,表示当前状态。
- reducers:用于处理同步操作,可以修改 state,由 action 触发。reducer 是一个纯函数,它接受当前的 state 及一个数据体(payload)作为入参,返回一个新的 state。
- effects:用于处理异步操作(例如:与服务端交互)和业务逻辑,也是由 action 触发。但是,它不可以修改 state,要通过触发 action 调用 reducer 实现对 state 的间接操作。
- action:是 reducers 及 effects 的触发器,一般是一个对象,形如{ type: ‘add’, payload: todo },通过 type 属性可以匹配到具体某个 reducer 或者 effect,payload 属性则是数据体,用于传送给 reducer 或 effect。
9. 使用mock模拟数据
1.在根目录下新建mock文件夹
2.新建mock/user.js
(取其他名字也可以,名字这里不重要)
export default {
'get /dev/random_joke': {
setup: 'What is the object oriented way to get wealthy ?',
punchline: 'Inheritance',
},
};
mock文件夹在umi中,会自动引入使用,可以新建多个mock文件。会根据请求路径对应拦截
10. 在 model 中请求服务端数据
代理请求:跨域问题。
在配置文件config/config.js
添加
+ proxy: {
+ '/dev': {
+ target: 'https://08ad1pao69.execute-api.us-east-1.amazonaws.com',
+ changeOrigin: true,
+ },
+ },
1.代理请求成功,显示的请求地址不会改变
2.如果没做其他处理,使用mock数据时,需要关闭proxy代码
11. 自定义样式
1. 在 src/page 目录下创建页面 index.js 和样式文件 styles.less 。
.
└── src
└── pages
├── index.js
└── styles.less
/* index.js */
import myStyles from './styles.less';
export default () => {
return (
<div className={myStyles.hello}>Hello World</div>
);
};
/* styles.less */
.hello {
font-size: 32px;
font-weight: bold;
color: #30b767; /* 绿色 */
}
2. 引用了 antd 的 Button 组件,我们想要覆盖它的一些样式属性定义。
:global(.ant-btn) {
// ...
}
或者配置 umi 主题
3. 更改全局样式
umi 有一个专门的文件 global.less 来让我们书写全局样式。这个文件并不会被 CSS modules 处理。
12. 国际化
1. 配置国际化插件。在 umi 中,你可以通过在插件集 umi-plugin-react 中配置 locale 打开 umi-plugin-locale 插件。
export default {
plugins: [
['umi-plugin-react', {
antd: true,
dva: true,
locale: {
enable: true,
},
}],
],
// ...
}
// src/locale/zh-CN.js
export default {
helloworld: '你好',
}
// src/locale/en-US.js
export default {
helloworld: 'hello world',
}
import {FormattedMessage,} from 'umi/locale';
// src/page/HelloWorld.js
export default () => {
return <div><FormattedMessage id="helloworld" /></div>;
}
import {formatMessage} from 'umi/locale';
consle.log(formatMessage({id: 'helloworld',}));
//改变语言方法
//getLocale 和 setLocale 是 umi/locale 中提供的方法
changLang() {
const locale = getLocale();
if (!locale || locale === 'zh-CN') {
setLocale('en-US');
} else {
setLocale('zh-CN');
}
}
13. 单元测试
umi 内置了 jest 测试。它约定了它的配置可以在package.json
中,也可以在项目根目录的 jest.config.js
中。
module.exports = {
testURL: 'http://localhost:7001',
};
新建一个 test/helloworld.test.js 的文件
const sum = function (a, b) {
return a + b;
};
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});
在 package.json 中添加 scripts.test 为 umi test,然后运行 cnpm run test。
14. 使用 TypeScript
在 umi 中内置了 TypeScript 的 Loader,你可以直接新建 .tsx 或者 .ts 文件来写 TypeScript 代码
1. 首先我们安装依赖包
cnpm install tslint tslint-config-prettier tslint-react @types/react @types/react-dom --save
2. 新建 tsconfig.json 和 tslint.json文件
tsconfig.json 来声明这是一个 TypeScript 项目,并且进行配置
{
"compilerOptions": {
"outDir": "build/dist",
"module": "esnext",
"target": "es2016",
"lib": ["es6", "dom"],
"sourceMap": true,
"jsx": "react",
"allowSyntheticDefaultImports": true,
"moduleResolution": "node",
"rootDir": "src",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true,
"experimentalDecorators": true
},
"exclude": [
"node_modules",
"build",
"scripts",
"acceptance-tests",
"webpack",
"jest",
"src/setupTests.ts",
"tslint:latest",
"tslint-config-prettier"
]
}
tslint 类似 eslint 是一个代码风格检查器。tslint.json我们可以直接使用如下配置:
{
"extends": ["tslint:latest", "tslint-react", "tslint-config-prettier"],
"rules": {
"no-var-requires": false,
"no-submodule-imports": false,
"object-literal-sort-keys": false,
"jsx-no-lambda": false,
"no-implicit-dependencies": false
}
}
为了增加使用体验,建议一并安装 vscode tslint 插件。