umi.js运用要领

node环境装置

在官网下载与体系相应的node版本，node.js版本>=8.10

编辑器

引荐运用Visual Studio Code 装置要领

装置umi

npm install -g umi

引荐运用 yarn 替代 npm 来装置 umi ， yarn 会针对部份场景做一些缓存以节省时候，你能够输入以下敕令来全局装置 yarn，运用yarn后项目中只管防止再运用npm，不然可能会发作意想不到的毛病。

npm install -g yarn

# 装置完成后，运用敕令检察是不是装置胜利
yarn -v

# 运用yarn装置umi
yarn global add umi

# 装置完成后，运用敕令检察是不是装置胜利
umi -v

umi疾速搭建项目

建立项目文件后运用终端东西翻开文件

引荐运用 yarn create 敕令，能确保每次运用最新的脚手架。

yarn create umi / npm create umi

假如提醒 create-umi 敕令不存在，你须要实行 yarn global bin，然后把 global bin 的途径增加到环境变量 PATH 中。

挑选 project,挑选app项目回车键确认

? Select the boilerplate type (Use arrow keys)
  ant-design-pro  - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.
❯ app             - Create project with a simple boilerplate, support typescript.
  block           - Create a umi block.
  library         - Create a library with umi.
  plugin          - Create a umi plugin.

挑选是不是运用 TypeScript,引荐运用TypeScript，输入y后回车完毕

? Do you want to use typescript? (y/N)

挑选你须要的功用

功用引见详见 plugin/umi-plugin-react

? What functionality do you want to enable? (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ antd
 ◯ dva
 ◯ code splitting
 ◯ dll

项目建立完成

启动项目
yarn start / npm run start

环境设置

在.env文件中可变动环境设置，平常不须要变动，罕见变动比方

# 变动效劳启动端口号
PORT=8001

# 封闭自动翻开浏览器，默以为翻开
BROWSER=none

细致设置

config设置

编译时的设置文件，.umirc.(js|ts) 和 config/config.(js|ts)，两者选一，不可共存
引荐在主文件夹下建立config文件，运用config.js举行项目设置（删除自动搭建项目时建立的.umirc.(js|ts)）
细致设置
config.local.js和config.production.js可在此设置开辟环境和线上环境差别的设置，在举行打包时需修正package.json中剧本代码

# 下载cross-env开启代码支解功用
yarn add -D cross-env / npm install --save-dev cross-env 

# package.json中 "scripts"修正
"build": "cross-env UMI_ENV=production umi build"

typings.d.ts设置(运用typescript)

依据实际情况举行后缀增加，不然ts会报导入毛病

declare module "*.png";
declare module "*.jpg";
declare module '*.less';

tslint.yml设置(运用typescript)

修正tslint划定规矩，可依据个人运用情况修正，细致设置可见tslint-react相干商定划定规矩

# 引荐修正
rules:
  eofline: true
  no-console: true
  no-construct: true
  no-debugger: true
  no-reference: true
  no-trailing-whitespace: false
  jsx-no-multiline-js: false
  jsx-alignment: false
  jsx-no-lambda: false

(js|ts)config.json开启ES7装潢器功用

"experimentalDecorators": true

文件详解

mock文件

寄存mock.js，默许开启mock功用，可在.env文件中封闭： MOCK=none

src

一切与项目相干代码寄存在src文件当中

src/assets

寄存静态资本，比方图片文件、字体文件等

src/components

寄存全局通用组件

src/layouts

全局规划，假如该文件夹下有index.(js|tsx)会在一切路由表面嵌套一层路由
比方之前路由为

[
  { path: '/', component: './pages/index' },
  { path: '/users', component: './pages/users' },
]

嵌套之后为

[
  { path: '/', component: './layouts/index', routes: [
    { path: '/', component: './pages/index' },
    { path: '/users', component: './pages/users' },
  ] }
]

可在index文件中举行全局规划，或许依据pathname修正差别路由下的规划

src/models

全局models,假如有一个以上的页面会运用雷同namespace空间内的代码，请将models文件放在此处，不然两个页面之间做交互时，
namespace中的代码会产生影响

src/styles

寄存通用款式，假如想掩盖全局款式可在global.(css|less|sass|scss)举行修正，此文件不走 css modules，且会自动被引入。
或许在app.(js|ts)中导入款式文件

src/services

寄存全局通用要求

src/utils

寄存通用要领

src/pages/.umi

这是 umi dev 时临盆的暂时目次，默许包括 umi.js 和 router.js，有些插件也会在这里天生一些其他暂时文件。能够在这里做一些考证，但请不要直接在这里修正代码，umi 重启或许 pages 下的文件修正都邑从新天生这个文件夹下的文件。
该文件下的router.js可检察自动天生的路由

src/pages/…

项目页面文件，在差别文件中建立的components、models、services文件最好只在该页面中运用，可以使项目构造变得越发清楚

tests

该文件为测试剧本文件，不会天生路由设置，假如须要运用mock测试，能够在外部mock文件中或许在该文件下建立__mock__文件

Dva.js运用需控制的知识点

Model

在 umi 项目中，你能够运用 dva 来处置惩罚数据流，以相应一些庞杂的交互操纵。这些处置惩罚数据流的文件一致放在 models 文件夹下，每个文件默许导出一个对象，内里包括数据和处置惩罚数据的要领，一般我们称之为 model 。一个 model 文件的构造平常是如许的：

export default {
  namespace: 'example', // 这个 model 的名字，必需全局唯一,不然雷同namespace的代码会产生影响
  state: {
    count: 0,
  }, // 初始数据
  reducers: {
    save() { ... },
  }, // 用于修正数据
  effects: {
    *getData() { ... },
  }, // 用于猎取数据
  subscriptions: {
    setup() { ... },
  }, // 用于定阅数据
}

Reducer

每个 reducer 都是一个一般函数，接收 state 和 action 作为参数，即：(state, action) => state ，你能够在函数中变动旧的 state，返回新的 state 。

reducers: {
  save(state, { payload }) {
    return ({ ...state, ...payload });
  },
},

Effect

每个 effect 都是一个 天生器函数 ，你能够在这里猎取你须要的数据，比方向效劳器提议一个要求、或是猎取其他 model 里的 state 。为了明确分工，你没法在 effect 中直接修正 state ，但你能够经由过程 put 要领 挪用 reducer 来修正 state

state:{
  assets:{},
},
*changeAssets({ payload }, { call, put, select }) {
  const user = yield select(states => states.user);
  const assets = yield call(fetchData, user);
  yield put({ type: 'save', payload: { assets } });
},

select

此要领用于猎取当前或其他 model 的 state 。

const data = yield select(states => states[namespace]);

call

此要领用于实行一个异步函数，能够理解为守候这个函数实行完毕。项目中常用于发送 http 要求，守候效劳端相应数据。

const data = yield call(doSomethingFunc, parameter);

put

此要领用于触发一个 action，这个 action 既能够是一个 reducer 也能够是一个 effect 。

yield put({ type: 'reducerName', payload: { page } });

Subscription

subscription 用于定阅一个数据源，依据须要运用 dispatch 触发相应的 action。数据源能够是当前的时候、效劳器的 websocket 衔接、keyboard 输入、geolocation 变化、history 路由变化等等。 项目中常用于页面初始化数据的自动要求，如：

subscriptions: {
  setup({ dispatch, history }) {
    return history.listen(({ pathname, query }) => {
      // 进入 '/home' 路由，提议一个名叫 'query' 的 effect
      if (pathname === '/home') {
        dispatch({ type: 'query' });
      }
    });
  },
},

dispatch

相似 effect 中的 put 要领，你能够在 subscription 的参数、或是一个已 connect 过的组件的 props 中拿到。

connect

经由过程此要领在你的组件中猎取到指定 model 的 state 数据。

import { connect } from 'dva';
function App({ user, dispatch }) {
  const handleClick = () => {
    dispatch({ type: 'user/fetchUser' });
  };
  return (
    <div>
      <h2>Hello, {user}</h2>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}
export default connect(({ user }) => ({ user }))(App);

假如运用es7的装潢器则为

import { connect } from 'dva';

@connect(({ user }) => ({ user }))
function App({ user, dispatch }) {
  const handleClick = () => {
    dispatch({ type: 'user/fetchUser' });
  };
  return (
    <div>
      <h2>Hello, {user}</h2>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}
export default App;