使用UMI仿今日头条首页

创建UMI项目

全局安装umi

npm install umi -g

全局安装 create-umi

npm install create-umi -g

使用create-umi指令

create-umi

安装依赖

npm i

启动项目

npm start

修改配置文件

umi 允许在 .umirc.js 或 config/config.js （二选一，.umirc.js 优先）中进行配置，支持 ES6 语法。

默认的配置文件是根目录下面的 .umirc.js文件，如果想要用config.js，那么需要先在根目录下创建一个 config文件夹，然后将.umirc.js文件中的配置信息复制到config.js，修改了配置文件后要重启一下项目。

在配置文件中引入路由配置文件

当有了 routes 的配置之后 umi 就不会再执行约定式对应的路由逻辑了，而是通过配置声明的路由（优先使用配置式路由，且约定式路由会不生效）

import pageRoutes from './router.config';

开发

• 给一个元素设置多个style样式

安装classnames

npm i classnames --save-dev

在js文件引入

import moreClass from 'classnames';

render() {
    let downloadAppStyle = moreClass(styles.downloadApp,styles.headerBtn);
    let weatherStyle = moreClass(styles.weather,styles.headerBtn);
    let complainStyle = moreClass(styles.complain,styles.headerBtn);
    let productStyle = moreClass(styles.product,styles.headerBtn);
    return (
      
        

            
下载APP
            

                 北京  晴  18℃  /  31℃
                
            
            
头条产品
            
侵权投诉
        
      
    )
  }

• umi项目中图片资源的引入

import downArrow from '../../assets/header/downArrow.png';

如果在/public目录下的静态图片，可以直接输入绝对路径，假设/public/yay.jpg,访问方式：（注意：以上必须构建后在dist中才能看到。）

在/src/assets 和 /src/pages/ 目录下的图片，不能通过输入绝对路径访问，必须先import导入，才能访问。或者require导入。

原因：构建时，/public目录下的文件会原样复制到/dist/目录下，而/src/assets/  和  /src/pages/目录下的文件会被改名（base64编码，webpack相关知识）并复制到/dist/下。

• 关于e.target

e.target获取到的是一个DOM元素。
DOM相关的操作分为两种：Property、Attribute
Attribute表示的是中的attr1、attr2，需要通过getAttribute来获取。
而Property则是一些DOM特殊的属性值，可以直接.XXX来获取。
常用的Property：className、htmlFor、style、value
对应的Attribute：class、for、style、value

注意：使用getAttribute()获取属性值的时候，要注意得到的值类型为string类型，要获取数值的话，要记得使用Number()转换一下类型防止使用===时判断出错（比如在切换a标签时）

this.state = {
    listArray: [
        '西瓜视频', '热点', '直播','图片', 
        '科技', '娱乐', '游戏','体育', 
        '汽车', '财经', '搞笑','更多'
    ],
    actived: -1,
}

{
  this.state.listArray.map((item, index) => {
    console.log(this.state.actived,typeof this.state.actived,index,typeof index,this.state.actived==index,this.state.actived===index);
    return {item}
  })
}

不转换属性值类型（效果图如左）：

this.state.actived!==index(this.state.actived由number变成了string类型， 因为获取到的e.target.getAttribute('data-index')值为string类型)

handleListMouseOver(e) {
    let index = e.target.getAttribute('data-index');//获取的属性值会将index变成string类型
    this.setState({
      actived : index
    },()=>{
      // console.log(this.state.actived);
    })
  }

      

转换属性值类型（效果图如右）：

handleListMouseOver(e) {
    let index = Number(e.target.getAttribute('data-index'));//获取的属性值会将index变成string类型
    this.setState({
      actived : index
    },()=>{
      // console.log(this.state.actived);
    })
  }

• jsx语法是不允许if条件判断的

• 同一行的input和button不对齐，给父元素设置弹性布局，设置justify-content:值为space-around

• z-index无效