Fade away

Appearance

十、umi ​

1.简介 ​

加快项目开发，封装起来了很多功能直接用

2.初体验 ​

1.版本 ​

最新 4.x 支持生成vue应用

最新 3.x

稳定 2.x

2.安装 ​

bash
yarn global add umi@2.12.9     留心安装完成后敲不了命令  问题环境变量
# 或
cnpm i -g  umi@2.12.9

验证

umi -v

3.创建页面 ​

终端敲命令

bash
umi --help 
# 在pages目录下创建index.js文件
umi g page index
umi g page users

# 运行项目
umi dev

4.跳转 ​

生命式 ​

jsx
import Link from 'umi/link';
//...
<Link to="/users">go to /users</Link>

编程式 ​

jsx
import router from 'umi/router';
// ...
<button onClick={() => { 
        router.goBack()
    }}>go back</button>

<button onClick={() => { 
        router.push(路径)
    }}>go back</button>

3.脚手架 ​

1.创建项目 ​

bash
npx create-umi@0.27.0 my-project
#  或
yarn create umi

依次选择 app -> dva

注意：选择dva的时候要空格选中再回车

2.安装模块 ​

yarn install

3.启动 ​

bash
yarn start 
# 或者
umi dev

4.约定式路由 ​

1-目录结构路由=》术语约定式路由：umi会根据pages目录自动生成路由配置文件  然后你访问 
2-配置文件路由：仿vue 同vue移动项目内部封装好了 你去改固定键就行（默认推荐  

.umirc.(ts|js)  routes

默认是配置文件路由，

可以通过修改.umirc.js文件关闭

1.创建页面 ​

1.手册基础路由 ​

下面指令可以在page目录下创建arts/index.js文件

注意：.js不用写

bash
umi g page arts/index   --less

2.手册动态路由 ​

创建一个可以接收路由参数的页面

bash
umi g page 'arts/$id' --less

3.手册嵌套路由 ​

umi g page arts/_layout --less

手动埋坑

src/layouts/index.js

js
function BasicLayout(props) {
  return (
    <div className={styles.container}>
      <div className={styles.header}></div>
      <div className={styles.main}>
        <div className={styles.menu}></div>
        <div className={styles.content}>
            // 埋坑
          {props.children}
        </div>
      </div>
    </div>
  );
}

src.pages/_layout.js

jsx
export default function(props) {
  return (
    <div className={styles.normal}>
      <h1>Page _layout</h1>
      <hr/>
      {props.children}
    </div>
  );
}

默认pages里面所有的代码都会塞到全局坑里面

2.404页面 ​

开发阶段自定义的404不会生效

5.配置文件路由 ​

开启配置文件路由，目录自动生成路由就没用了

注释默认的配置文件路由练习的

开启/关闭配置文件路由：.umirc.js文件中routes键存在就开启了 不存在没开启

配置路由

js
routes: [
    {
        path: '/arts',                  // 父路径
        component: '../layouts/index',  // 控制是否需要全局的layout
        routes: [
            // path 子路径
            // component 子组件内容
            // Routes 会优先显示，里面通过props.children显示component
            { path: '/arts', component: '../pages/arts/index',  Routes: ['./src/pages/arts/_layout'] },
            { path: '/arts/create', component: '../pages/arts/create',  Routes: ['./src/pages/arts/_layout'] },
            { path: '/arts/:id', component: '../pages/arts/$id',  Routes: ['./src/pages/arts/_layout'] },
        ]
    }, 
    {path: '/404',component: '../pages/404'},
    {
        path: '/',
        component: '../layouts/index',
        routes: [
            { path: '/', component: '../pages/index' }
        ]
    }
],

6.样式 ​

导入

jsx
import styles from '路径及文件名.less'

组件中定义类名

jsx
className={styles.类名}

7.路由模式 ​

.umirc.js

js
export default {
  history: 'hash',
    //...
}

8.鉴权 ​

pages/permission.js

js
import Redirect from 'umi/redirect';

export default props => {
    const token = localStorage.getItem('token');
    if (token) {
        return props.children;
    } else {
        return <Redirect to="/login" />;
    }
};

.umirc.js

js
 routes: [
    {
      path: '/arts',
      // 父路径
      component: '../layouts/index',
      // 控制是否需要全局的layout
      routes: [
        // path 子路径
        // component 子组件内容
        // Routes 会优先显示，里面通过props.children显示component
        {
          path: '/arts',
          component: '../pages/arts/index',
          Routes: ['./src/pages/permission.js','./src/pages/arts/_layout'],
        },
        {
          path: '/arts/create',
          component: '../pages/arts/create',
          Routes: ['./src/pages/permission.js','./src/pages/arts/_layout'],
        },
        {
          path: '/arts/:id',
          component: '../pages/arts/$id',
          Routes: ['./src/pages/permission.js','./src/pages/arts/_layout'],
        },
      ],
    },
    {
      path: '/404',
      component: '../pages/404',
    },
    {
      path: '/login',
      component: './login/login',
    },
    {
      path: '/',
      component: '../layouts/index',
      routes: [
        {
          path: '/',
          component: '../pages/index',
        },
      ],
    },
  ],

9.仓库models ​

1.定义仓库 ​

自动引入模型激活

文件名就是命名空间，既模块名

models/arts

js
export default {
  state: {
    num: 666,
  },
  reducers: {
    setNum(state, action) {
      state.num++;
      console.log(state.num)
      return state;
    },
  },
  effects: {},
};

2.使用 ​

  • 从dva导入connect高阶组件
  • 用connect包裹导出组件

pages/index.js

jsx
import styles from './index.less';
import { connect } from 'dva';
const Arts = props => {
  return (
    <div className={styles.normal}>
      <h1>arts index</h1>
      <h1>{props.num}</h1>
      <button onClick={() => props.add()}>+1</button>
    </div>
  );
};
const mapStateToProps = state => {
  return {
    num: state.art.num,
  };
};
const mapDispatchToProps = dipatch => {
  return {
    add() {
      dipatch({
        type: 'art/setNum',
      });
    },
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Arts);

umi的仓库不在需要考虑深浅拷贝

配置.umirc.js的plugins

修改dva的值

.umirc.js

js
 plugins: [
    // ref: https://umijs.org/plugin/umi-plugin-react.html
    [
      'umi-plugin-react',
      {
          //...
        dva: {
          immer:true
        },
          //...
      },
    ],
  ],

10.mockjs ​

js
// 使用 Mock
const Mock = require('mockjs')
const dataObj = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
// 'list|1-10': [{
//     // 属性 id 是一个自增数，起始值为 1，每次增 1
//     'id|+1': 1
// }]

"meta": {
  "msg": "提示信息",
  "status": 200
}, 
"data|1-3": [
  {
    "id": "@id",
    "img": "@image(200x100, @color)",
    "title": "@title(1)",
    "desc": "@cparagraph"  
  }
]
})


export default {
// 'GET /api/users/my': (req, res) => { res.end('webopenfather'); },
// 'GET /api/users/my': (req, res) => { res.end(dataObj); },
// 明确：res.end 是express知识点  只能返回字符串  你是对象不行
// 解决：通过res.json()
'GET /api/users/my': (req, res) => { res.json(dataObj); },

// 支持值为 Object 和 Array
'GET /api/users': { users: [1,2] },

// GET POST 可省略
'/api/users/1': { id: 1 },

// 支持自定义函数，API 参考 express@4
'POST /api/users/create': (req, res) => { res.end('webopenfather'); },
};

直接访问地址就可以获取数据

http://localhost:8000/api/users/my

11.dynamicImport ​

按需加载,首屏过慢

dynamicImport: true

js
plugins: [
    // ref: https://umijs.org/plugin/umi-plugin-react.html
    [
      'umi-plugin-react',
      {

        dynamicImport: false,

      },
    ],
  ],

样式语义化

objc
 dynamicImport: {
 	webpackChunkName:true
 }

自定义loading加载组件

objc
 dynamicImport: {
 	webpackChunkName:true,
 	loadingComponent:'loading组件路径'
 }

MIT Licensed

Copyright © 2024-present xarzhi