.jsx+ant项目前端页面总结

一、基础部分

1、项目启动

npm install

npm run start（看配置？）

图1-访问地址

2、页面结构

图2 项目结构

 3、新增页面

图3 文件夹及路由配置

4、访问

复制图1的地址，加上项目文件夹名，如图3的页面访问地址为：

http://localhost:8000/account-review

---

二、页面部分

1、.jsx基础页面

 2、实现class="a b"的效果

<span className={`${styles.bl_type} ${styles.icon_mbl}`}>MB/L</span>

 3、页面 特殊字符转义

<p className={styles.textMedium}>
    我们将在<strong>{'<1个工作日内>'}</strong>完成审核，请注意查收邮件！
</p>

 4、页面引入图片

< img src={require('@/img/foo.png')} />

.icon{
    background: url(../img/icon-server.png) no-repeat;
}

 为了节省时间，less引入多倍图背景图的时候，以下代码是必须的，可直接复制

background-size: 100%;
display: inline-block;
image-rendering: -webkit-optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;

 5、多倍图在google内核浏览器下模糊

img{
  //image-rendering: -moz-crisp-edges;
  //image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  //image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}

6、图片跳转页面

            <img
              src={require(`@/img/${lang}/banner-public.png`)}
              onClick={() => {
                history.push('/trailer-discount');
              }}
              style={{ cursor: 'pointer' }}
            />

**** 其他组件去ant官网查看即可 *****