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');
        }
    }
相关推荐
@PHARAOH几秒前
WHAT - 前端性能指标(交互和响应性能指标)
前端·交互
噢,我明白了2 分钟前
前端js 常见算法面试题目详解
前端·javascript·算法
im_AMBER3 分钟前
Web 开发 30
前端·笔记·后端·学习·web
Jonathan Star7 分钟前
Webpack 打包优化与骨架屏结合:双管齐下提升前端性能与用户体验
前端·webpack·ux
做好一个小前端21 分钟前
后端接口获取到csv格式内容并导出,拒绝乱码
前端·javascript·html
第七种黄昏25 分钟前
前端面试-箭头函数
前端·面试·职场和发展
Youyzq27 分钟前
前端box-shadow出现兼容性问题如何处理
前端
携欢35 分钟前
PortSwigger靶场之将 XSS 存储到onclick带有尖括号和双引号 HTML 编码以及单引号和反斜杠转义的事件中通关秘籍
前端·html·xss
三小河42 分钟前
工作中的Ai工具汇总
前端
mapbar_front1 小时前
react项目开发—关于代码架构/规范探讨
前端·react.js