基于umi的Ant Design介绍

其他 2018-11-02 17:30:19 阅读次数: 0

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

猜你喜欢

转载自blog.csdn.net/eunice_sytin/article/details/83542476
今日推荐
周排行
错误：聚合‘std::ifstream inFile’类型不完全，无法被定义
Python中Django中的JS异步调用疑难杂症
使用Bind服务配置DNS服务器
关于调试中的printf的坑
04：一文初探Tensorflow高级API使用（初学者篇）
修改MySQL数据库中主键的值
Codeforces 33B. String Problem（Floyd最短路）
【8】文件的读写
报表导出之easypoi的应用
剑指Offer(Python多种思路实现):用两个栈实现队列
每日归档
更多
2024-07-21(0)
2024-07-20(0)
2024-07-19(0)
2024-07-18(0)
2024-07-17(0)
2024-07-16(0)
2024-07-15(0)
2024-07-14(0)
2024-07-13(0)
2024-07-12(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022