umijs有什么好处_UMI.js使⽤⽅法
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 (U arrow keys)
ant-design-pro - Create project with an layout-only ant-design-pro boilerplate, u 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 u typescript (y/N)
选择你需要的功能
What functionality do you want to enable (Press to lect, to toggle all, to invert lection)
应用化学专业就业前景❯◯ 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规则，可根据个⼈使⽤情况修改，详细配置可见tslint-react相关约定规则
# 推荐修改
rules:
eofline: true
no-console: true
no-construct: true
no-debugger: true
no-reference: true
no-trailing-whitespace: fal
jsx-no-multiline-js: fal
jsx-alignment: fal
jsx-no-lambda: fal
(js|ts)config.json开启ES7装饰器功能
"experimentalDecorators": true
⽂件详解
美军电影mock⽂件
存放mock.js，默认开启mock功能，可在.env⽂件中关闭： MOCK=none
src
所有与项⽬相关代码存放在src⽂件之中
src/asts
存放静态资源，例如图⽚⽂件、字体⽂件等
src/components
存放全局通⽤组件
src/layouts
地震是怎样形成的全局布局，如果该⽂件夹下有index.(js|tsx)会在所有路由外⾯嵌套⼀层路由
例如之前路由为
[
{ path: '/', component: './pages/index' },
{ path: '/urs', component: './pages/urs' },
]
嵌套之后为
[
{ path: '/', component: './layouts/index', routes: [
{ path: '/', component: './pages/index' },
{ path: '/urs', component: './pages/urs' },
] }
]
可在index⽂件中进⾏全局布局，或者根据pathname修改不同路由下的布局
src/models
全局models，如果有⼀个以上的页⾯会使⽤相同namespace空间内的代码，请将models⽂件放在此处，不然两个页⾯之间做交互时，namespace中的代码会产⽣影响
src/styles
存放通⽤样式，如果想覆盖全局样式可在global.(css|less|sass|scss)进⾏修改，此⽂件不⾛ css modules，且会⾃动被引⼊。
或者在app.(js|ts)中导⼊样式⽂件
src/rvices
存放全局通⽤请求
src/utils
存放通⽤⽅法
src/pages/.umi
这是 umi dev 时⽣产的临时⽬录，默认包含 umi.js 和 router.js，有些插件也会在这⾥⽣成⼀些其他临
时⽂件。可以在这⾥做⼀些验证，但请不要直接在这⾥修改代码，umi 重启或者 pages 下的⽂件修改都会重新⽣成这个⽂件夹下的⽂件。
该⽂件下的router.js可查看⾃动⽣成的路由
src/pages/…
项⽬页⾯⽂件，在不同⽂件中创建的components、models、rvices⽂件最好只在该页⾯中使⽤，可使项⽬结构变得更加清晰
读雷锋日记有感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: {
tup() { ... },
}, // ⽤于订阅数据
}
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:{
asts:{},
},
*changeAsts({ payload }, { call, put, lect }) {
const ur = yield lect(states => states.ur);
const asts = yield call(fetchData, ur);
yield put({ type: 'save', payload: { asts } });
},
lect
此⽅法⽤于获取当前或其他 model 的 state 。
const data = yield lect(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: {
tup({ dispatch, history }) {
return history.listen(({ pathname, query }) => {
// 进⼊ '/home' 路由，发起⼀个名叫 'query' 的 effect
if (pathname === '/home') {
