我打造了一个简历在线生成应用

来源:未知 作者:admin 发表于:2022-06-09 16:23  点击:
项目目录结构 ./configwebpack配置文件├──webpack.base.js--公共配置├──webpack.config.build.js--生产环境特有配置├──webpack.config.dev.js--开发环境特有配置├──webpack.config.js--引用的配置文件│

项目目录结构

./configwebpack配置文件├──webpack.base.js--公共配置├──webpack.config.build.js--生产环境特有配置├──webpack.config.dev.js--开发环境特有配置├──webpack.config.js--引用的配置文件│./public公共静态资源├──css│└──print.css打印时用的样式│./src核心代码├──assets静态资源css/img├──constants常量│├──index.js存放导航的名称映射信息│├──schema存放每个简历模板的默认JSON数据,与pages中的模板一一对应│└──────demo1.js├──pages简历模板目录│└──demo1--其中的一个模板│├──utils工具方法├──app.js项目的入口js├──index.html项目的入口页面

约定优于配置

根据约定好的目录结构,通过自动化的脚本

所有模板都统一在src/pages/xxx目录下

页面模板约定为index.html,该目录下的所有js文件将被自动添加到webpack的entry中,自动注入到当前页面模板中

例如

./src├──pages│└──xxx│└─────index.html│└─────index.scss│└─────index.js

此处自动化生成entry/page配置代码可移步至这里查看

自动生成的结果如下

每个HTMLWebpackPlugin的内容格式如下

自动生成导航栏

首页顶部有一个导航栏用于切换简历模板的路由

这部分的链接内容如果手动填写是很无趣的,如何实现自动生成的呢?

首先首页模板的headernav部分内容为

htmlWebpackPlugin.options表示HTMLWebpackPlugin对象的的userOptions属性

咱们上面拿到了了所有Page的title,将所有title使用,连接拼接在一起,然后绑定到userOptions.pageNames上,则页面初次渲染结果就变成了

abc,demo1,vue1,react1,introduce

有了初次渲染结果,接下来咱们写一个方法把这些内容转为a标签即可

constnavTitle={'demo1':'模板1','react1':'模板2','vue1':'模板3','introduce':'使用文档','abc':'开发示例'}functioncreateLink(text,href,newTab=false){consta=document.createElement('a')a.href=hrefa.text=texta.target=newTab?'_blank':'page'returna}/***初始化导航栏*/functioninitNav(defaultPage='react1'){const$nav=document.querySelector('headernav')//获取所有模板的链接---处理原始内容constlinks=$nav.innerText.split(',').map(pageName=>{constlink=createLink(navTitle[pageName]

 

    有帮助
    (1)
    100%
    没帮助
    (0)
    0%
    购彩计划平台,购彩计划官网,购彩计划网址,购彩计划下载,购彩计划app,购彩计划开户,购彩计划投注,购彩计划购彩,购彩计划注册,购彩计划登录,购彩计划邀请码,购彩计划技巧,购彩计划手机版,购彩计划靠谱吗,购彩计划走势图,购彩计划开奖结果

    Powered by 购彩计划 @2018 RSS地图 HTML地图