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');
        }
    }
相关推荐
捡芝麻丢西瓜1 分钟前
SPM 之 混编(OC、Swift)项目保姆级教程(Swift Package Manager)
前端
我是天龙_绍2 分钟前
cdn是个啥?
前端
南雨北斗3 分钟前
VSCode三个TS扩展工具介绍
前端
若无_5 分钟前
了解 .husky:前端项目中的 Git Hooks 工具
前端·git
ze_juejin7 分钟前
前端发送语音方式总结
前端
给月亮点灯|11 分钟前
Vue3基础知识-Hook实现逻辑复用、代码解耦
前端·javascript·vue.js
Simon_He13 分钟前
一款适用于 Vue 的高性能流式 Markdown 渲染器,源自我们的 AI 聊天机器人
前端·vue.js·markdown
顽强d石头18 分钟前
v-model与.aync的区别
前端·javascript·vue.js
Hilaku21 分钟前
我为什么认为 CSS-in-JS 是一个失败的技术?
前端·css·前端框架
月下点灯33 分钟前
✨项目上线后产品要求把应用字体改大点📏怎么办?一招教你快速解决🔧
前端·vite