team wang网站仿写

这次准备仿一个我最喜欢star的网站—team wang。网站主掉色是黑白的，也是我非常喜欢的。这次的目标不单单是仿，而是要做到extreme，精致。由往常职位快速完成项目遇到自己不大熟的知识点而跳过，转变到知识发散性，提升项目的广度以及精细度。并且扩充自己不熟悉的知识，来踩踩盲区。这也是十分消耗时间的，所以我打算利用博客，来记录每一个步骤，会非常仔细的来记录。方便日后的回顾！

Let's GO !

本项目利用到的技术栈

react
react-router
react-hook
scss

1.初始化项目

把一个通过脚手架命令create-react-app创建的项目初始化，这是一个我们开发react经常会进行的简单操作，所以我在这里就不在进行赘述了，进入到下一步吧！

2.使用customize-cra来方便的我们资源的引用

customize-cra是一个用来扩展我们功能的包

先执行npm i customize-cra react-app-rewired -D，

然后 把package.json中的scripts属性改成下面图片的格式，来让我们使用customize-cra来扩展我们的功能

最后我们在项目中创建config-overriides.js来进行了进行插件的配置

const {
    override,
    addWebpackAlias
} = require('customize-cra');

const path = require('path')

module.exports = override(
    addWebpackAlias({
        assets: path.resolve(__dirname, './src/assets'),
    })
);

配置完addWebpackAlias之后，我们就可有在其中快捷定义我们需要的路径资源了。

3.头部的label部分

布局比较简单就不再赘述了，但是有一点需要注意，就是字体图标引入时，我们的jsx语法中标签中不支持标签属性名带：号，所以我们需要把冒号改成后面的字母改成大写字母，就是我们一般说的驼峰式。

4.完成路由的结构

由于页面结构比较简单，路由结构页是十分简单的，所以路由的结构就不详细赘述了。但是我们在跳转的时候需要在非路由组件中拿到一个叫做history方法来进行spa单页面应用的跳转，所以我们接下来会介绍一种方法，利用withRouter这个函数来为我们的组件中的props添加这个history对象

import { withRouter } from 'react-router-dom';
const NotRouterCom(props) {
	console.log(props.history)
}
export default withRouter(NotRouterCom)

正如上边的代码所示，我们就可以利用history来进行我们有关于路由的操作。

5.home, flag,cookies完成

就是先首先完成了三个页面的静态布局，没有什么难点，就进入到下个页面的了

6.cart页面

cart页面原本是需要认真做的，但是由于team wang实在是太火爆了，衣服都卖完了，所以我没有办法去看到cart里头有商品时候的样式，所以就简单做了没有商品时候的样式，其实与404页面的样式是一样的。我们在商品详情页的样式做完之后可能会考虑一下自己来设计一个cart页面的样式。接下来我准备把sahngpi9jn详情页留到最后来做，因为其中有一个我没有做过的放大镜效果。所以我下面做一点杂碎的布局简单样式。

7.page路由页面

page路由页面对应了好几个子路由，但大多数就是想instruction一样，交互很少。但是只有search页面是一个搜索框样式以及逻辑交互代码比较麻烦。接下来我会着重写这一个模块的代码，可能会用到redux，正则，hook等技术，接下来一步步的来把！！！

插曲

原本做到这儿了想部署到码云上看一下效果。但是出现资源404的问题。进过自习的搜证，发现是react脚手架的webpack默认打包的问题，把所有的资源默认打包成‘/'路径下，所以出现了问题，我想要资源是相对于index。html是相对引用的所以我们需要更改一下打包的配置，采用如下方法

：在项目的package.json文件中增加一个节点“homepage”:"."，或者是"./"，当然，此功能是在react-scripts 0.9.0或者更高版本才支持的。

问题二，addwebpackalian 引用的文件无法访问到，我们手动修成了相对路径。这个问题是否有更好解决办法。我们之后再看

8.后来就懒得记录了，大体上是完成了，附上网址

teamwang