基于umi的Ant Design介绍

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];
    },
  },

});
  1. namespace:model 的命名空间,只能用字符串。一个大型应用可能包含多个 model,通过namespace区分。
  2. state:当前 model 状态的初始值,表示当前状态。
  3. reducers:用于处理同步操作,可以修改 state,由 action 触发。reducer 是一个纯函数,它接受当前的 state 及一个数据体(payload)作为入参,返回一个新的 state。
  4. effects:用于处理异步操作(例如:与服务端交互)和业务逻辑,也是由 action 触发。但是,它不可以修改 state,要通过触发 action 调用 reducer 实现对 state 的间接操作。
  5. 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 插件。

来源:https://www.yuque.com/ant-design/course/byllph

  • 9
    点赞
  • 42
    收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 1

打赏作者

辛木木

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值