VisResumeMook简历平台(1)

最近准备投暑假的实习,在超级简历上做简历,有些功能要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');
        }
    }
相关推荐
Hockor28 分钟前
用 Kimi K2 写前端是一种什么体验?还支持 Claude Code 接入?
前端
杨进军28 分钟前
React 实现 useMemo
前端·react.js·前端框架
海底火旺30 分钟前
浏览器渲染全过程解析
前端·javascript·浏览器
你听得到1131 分钟前
揭秘Flutter图片编辑器核心技术:从状态驱动架构到高保真图像处理
android·前端·flutter
驴肉板烧凤梨牛肉堡32 分钟前
浏览器是否支持webp图像的判断
前端
Xi-Xu33 分钟前
隆重介绍 Xget for Chrome:您的终极下载加速器
前端·网络·chrome·经验分享·github
摆烂为不摆烂35 分钟前
😁深入JS(九): 简单了解Fetch使用
前端
杨进军36 分钟前
React 实现多个节点 diff
前端·react.js·前端框架
用户408128120038136 分钟前
拓展运算符和剩余参数
前端
再见了那维莱特39 分钟前
6.29 drilling notes
前端