记录 | 元素周期表的开源网页
记录 | 元素周期表的开源网页
Preface
昨晚正准备睡觉，化学老师一个微信过来，便准备开始干活（绝对不是为了GPA）。
需求：元素周期表的网页
Literature Review（网上冲浪）
在全球最大的同性交友网站上搜索了一番之后，我锁定了如下项目：
kadinzhang/Periodicity
实现（使用）
首先分析源码，查看项目的结构：
可以发现，是用Vue做的纯前端（所以我们就可以瞎搞了）。（不过之前没碰过Vue，所以使用传统的猜测API大法进行修改）
首先，二话不说，先：
cnpm installBash
复制
注：使用cnpm的淘宝源只是为了快一点
然后
npm run buildBash
复制
npm run startBash
复制
编译项目，启动项目。但是很遗憾，发现端口被占用，所以需要修改启动端口。但是非常恶心的是不能在config.js里面改（试过了，无效），需要：
然后跑一把可以发现跑得起来，如果你只是想跑，这样其实就行了。
挂上VPS
由于我懒得给apache2配置二级域名与泛解析，所以想要直接在目录下新加一个文件夹直接解析，即：gyrojeff.top/periodicity/
但是新的问题又产生了（烦），如果直接把dist目录扔到服务器上去的话，我们会发现加载不出，即，空白页。
为了解决这个问题，分析dist目录中的index.html
可以发现是css和js引用的路径出了问题。
经过分析后，我发现作者在config/index.js当中给出了配置选项：
按照自己的情况配置即可，这里我由于需要速度优化，就直接把生成的static文件扔到了腾讯云COS上面。
做完这些之后，我们build一把再上传文件到VPS，可以发现解决了大部分问题。
但是，仍有一个问题尚未解决。由于这个网站启用了pjax，跳转页面的时候虽然不会直接刷新，但是会修改地址栏，我们可以发现，加载完毕后会自动修改地址：
而且，到别的子页面以后，一刷新就会404. 经过一系列的问题排查，基本上锁定了问题在两个文件：
src/router/index.jssrc/components/home/PeriodicTable.vue
进行修改（具体问题请具体分析，照搬我的修改是不行的）：
这样就能把router的问题解决了。
后记
初次使用Vue，感觉这种设计模式是一种好文明（（以后有时间一定学，以及，互联网真的是太伟大了（确信）
注：此项目使用的开源协议为MIT协议
之所以要放到自己的服务器上其实是因为原网站periodicity.io的速度实在太慢了，为了教学效果需要做的国内迁移（绝对不是因为减轻自己服务器压力才用COS的），加快速度。
后来的后来
真香！配置了二级域名呢（（（
地址：https://periodicity.gyrojeff.top/
本文作者：博主： gyrojeff 文章标题：记录 | 元素周期表的开源网页
本文地址：https://cloud.tencent.com/developer/article/1827306
版权说明：若无注明，本文皆为“gyro永不抽风！”原创，转载请保留文章出处。
许可协议:署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 转载请保留原文链接及作者！
我的博客即将同步至腾讯云+社区，邀请大家一同入驻