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');
        }
    }
相关推荐
清空mega几秒前
《Vue Router 与 Pinia 入门:页面跳转、动态路由、全局状态管理一篇打通》
前端·javascript·vue.js
踩着两条虫几秒前
AI 驱动的 Vue3 应用开发平台 深入探究(十):物料系统之内置组件库
前端·vue.js
坚持学习前端日记34 分钟前
AI 产品开发经验
前端·javascript·人工智能·visual studio
张一凡9336 分钟前
easy-model:简化领域驱动开发的理想选择
前端·react.js
雾削木42 分钟前
STM32输入捕获测量PWM频率占空比
前端·javascript·stm32
weixin1997010801642 分钟前
淘宝客商品详情页前端性能优化实战
java·前端·python·性能优化
JamesYoung79711 小时前
第八部分 — UI 表面 动作(工具栏)、徽标、弹出窗口
前端·javascript
Joker Zxc1 小时前
【前端基础(Javascript部分)】5、JavaScript的循环语句
开发语言·前端·javascript
Neweee2 小时前
JavaScript进阶内容详解
前端