Minecraft 下载站点前端技术

103次阅读
No Comments

细心的朋友发现,我们昨天更新了我们新的 Minecraft 下载站的站点,没见过的朋友可以去看一下 该项目也简单开源在 Github 上。移步 https://github.com/taurusxin/mc_download_station

这一次我们用了纯前端的技术,技术栈如下

  1. Vue.js
  2. Vue Router
  3. View UI
  4. Axios 异步请求

为了便于管理,我们这一次将请求的数据整合进了一个 Json 文件,并且是静态资源,存放在 public 里面

路由处理方面是个头疼的地方,既要处理 created 事件下的异步请求数据,又要刷新菜单渲染。 最后在axios下面的 finally 里面完成了这个过程。

<code class="language-javascript ">  created() {
    let that = this
    axios.get('/static/versions.json').then(response => {
      that.versions = response.data
    }).finally(function () {
      that.activeName = that.$route.path
    })
  }
</code>

UI 框架用了 iView 的后继者 View UI,至于为什么没用 element,我个人看法是 element 已经长久没有维护了。

View UI 的官网文档个人认为讲解的还是不够全面,查了多方资料才明白某一个 prop 或者 event 的调用方法。

源码编译 & 部署

git clone https://github.com/taurusxin/mc_download_station.git && cd mc_download_station

yarn install or npm install

yarn build or npm run build

dist 目录下面就是整个项目构建的文件,直接放 nginx 就可以跑

1