Code Monkey home page Code Monkey logo

vuehomepage's Introduction

个人主页的Vue.js重构

既是学习,又是个人主页的进化。

目前实现的目标:

  • 使用路由跳转页面(使用router-link to=""方法规避页面刷新)
  • 首页随机看板娘
  • 首页内容增补
  • 版面填充
  • 添加友链(可以联系我来为你设置友链)
  • 快捷跳转个人维护的其他网站
  • 增加一些装饰使其看起来不那么素
  • 服务器部署
  • 响应式管理

    具体优化:

    • 移动设备会显示不一样但更契合的背景(啊喵喵)
    • 正常模式与夜间模式的字体颜色优化

构建

如果觉得好看希望在自己的服务器上部署的话,可以使用如下命令进行构建:

npm run build

之后会生成./dist文件夹,其中存放的就是服务器部署所需要的文件啦。 之后使用Nginx等工具就可以了。

注:本仓库只提供模板。如果需要请修改或删除 ./src/components文件夹下大部分内容。

目前存在的问题

DEV侧:

  1. 暗色模式下字体颜色不适配,尤其是在介绍栏目上;
  2. 响应式布局依旧处在十分初级的阶段,随意调整大小会导致背景图片渲染怪异。

OPS侧:

  1. 服务器部署后,在路由界面刷新会显示404

翻车历史记录

  1. 2024.5.24,由于大部分文件编码为GBK,本想用Python批量转换为UTF-8,结果因为觉得项目可能崩盘索性半途放弃。 目前的项目状态可能会炸,总之炸了不一定管(

    补:自己在修改Git准备提交时发现大部分文件都显示无变化,自己手动修改编码的文件倒是出现在暂存区。 总之情况大概率是自己的Python压根没工作:P

  2. 2024.5.30,不清楚Vue动态响应的原理走了不少弯路 (本来在.vue文件中使用纯TypeScript实现随机看板娘但<template>无法读出<script>中内容)

    最终使用v-bind成功绑定数据,可喜可贺,可口可乐(

vuehomepage's People

Contributors

luoyulose avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.