VisResumeMook简历平台（1）

你好小羊2024-03-06 10:31

最近准备投暑假的实习，在超级简历上做简历，有些功能要vip，好看一点的模板居然要我20块钱一个月。所以我决定自己搭建一个可以自定义简历的平台。

技术选型：

由于暑假期间接触了一些新的技术，所以想用这些技术实现。

electron+React Hooks
TypeScript
Webpack

一开始先搭建一个electron的框架

1 复制代码

npm install --save-dev electron

在安装的时候疯狂报错：

RequestError:certificate has expired

原来是淘宝镜像的证书过期，需要更换新的镜像网站。

1 复制代码

npm config set xxxxxxxx（新镜像网站）

然后后面安装了React、Babel、webpack、css插件和代码格式化插件等等（具体哪些后面会自动补充，并详细解释）

搭建react路由

在app文件下新建一个router.tsx，然后开始配置。

js 复制代码

import React  from "react";
import {HashRouter,Route,Switch,Redirect} from "react-router-dom";
import Root from "./container/root"
import Resume from './container/Resume';
function Router(){
    return (
        <HashRouter>
            <Switch>
                /* 首页 */
                <Route path="/" exact>
                    <Root/>
                </Route>
                /* 简历 */
                <Route path="/resume" exact>
                    <Resume/>
                </Route>
            </Switch>
            <Redirect to="/"></Redirect>
        </HashRouter>
    );
}
export default Router;

这里设置两个页面，我会使用react-router给出的方法（useHistory）进行页面的跳转。

页面跳转

js 复制代码

import {useHistory} from "react-router";

const history=useHistory();

    const onRouterToLink=(text:string)=>{
        if(text=="介绍"){
            history.push('/about');
        }else if(text=="简历"){
            history.push('/resume');
        }else {
            history.push('/code');
        }
    }