仓库地址和预览

❗这是个站外网站呢，不保证站点的可用性和安全性哟~
homepage-for-vue3
鹊楠吖
❗这是个站外网站呢，不保证站点的可用性和安全性哟~
鹊楠の个人主页
鹊楠吖

主页预览图

为什么想写一个主页

因为闲着无聊，同时根域名也空着，就打算写一个个人主页放在根域名，也可以当一张赛博名片））

而且最近还在学Vue，正好拿主页来练手

编写路程

我用的是 Vue3 + Vuesax-alpha 组件库搭建，一开始用的是 vue2 结果在编译的时候一直报 webpack（应该是这个） 错

询问群里的大佬后都推荐我使用更新的 Vue3 ，于是就使用 Vite 来构建我的 Vue 项目

Vue2 和 Vue3 的区别

我感觉到的区别其实没多少学艺不精，刚入门，感知明显比较大的有这几点：

  • 本地运行的速度

    我使用 Vue2 写主页的时候，重新使用 npm run serve 运行项目的时候，要等好一会时间，而 Vue3 的运行速度可以说是秒开 不知道是不是 Vite 的原因

  • main.js 的引入

    这个差别也是有的，Vue2 是

    1
    2
    3
    4
    5
    6
    7
    Vue.config.productionTip = false;
    Vue.use(Vuesax);
    Vue.use(VueTypedJs);

    new Vue({
      render: (h) => h(App),
    }).$mount("#app");

    这样写的，而 Vue3 是

    1
    2
    3
    4
    5
    const app = createApp(App);
    app.use(Vuesax);
    app.use(VueTyped);
    app.use(MotionPlugin);
    app.mount("#app");

    让不仔细看文档的我踩了个坑 😭

Vuesax-alpha

在开始写主页之前，我精挑细选的找了好一会组件库，终于在一篇博客园的文章中找到了 Vuesax 这个组件库。

但是它的文档是纯英文的，所以只能依靠 沉浸式翻译 的机翻勉强使用。

当我切换到 Vue3 的时候，发现用不了，排查一番发现 Vuesax 不支持 Vue3 ，当时感觉天都塌了！幸好在 浮杨 大佬的帮助下找到了 Vuesax 的测试版本，支持 Vue3 。

但是又出现了个问题，Vuesax-alpha 的文档是部署在 vercel 上面的，而 vercel 的域名在大陆无法访问，所以就要反复开梯子，并翻译英文文档 （其实有一些名词是能大概了解什么意思的）

在使用 Vuesax-alpha 的途中，遇到了一些小问题，应该是官方还没写完罢，自己修修补补将就着用）

开工项目

解决了组件库的问题，就开始编写主页了。先后安装了

  • vue3-typed-js : 打字机组件
  • @vueuse/motion : 动画库

编写的时候苦于没有灵感，就去借鉴了一下 pzjawa 和 清羽飞扬 两位大佬的主页 灵感是没有的，只会借鉴人家的了

中间出现了不少 bug，如 按钮无法跳转 、打字机定位错误 、动画失效 、没有深色模式导致界面颜色错误 等问题，幸好都不难，都是我这三脚猫功夫能解决的问题，最后也是成功写好了

尾声

有啥建议可以提一下！现在处于能用阶段了

目前存在的问题

部署在 vercel ，套 初七云 cdn 的时候，会显示 域名解析错误 但是我根域名是绑定的 cdn 给的 dns 地址，cdn 源站也配置正确，也能正常通过根域名访问主页，就是管理后台显示解析错误，搞不懂）