关于我的个人主页！

仓库地址和预览

homepage-for-vue3

github.com

鹊楠の个人主页

quenan.cn

为什么想写一个主页

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

编写路程

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

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

Vue2 和 Vue3 的区别

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

• 本地运行的速度
  我使用 Vue2 写主页的时候，重新使用 npm run serve 运行项目的时候，要等好一会时间，而 Vue3 的运行速度可以说是秒开 不知道是不是 Vite 的原因
• main.js 的引入
  这个差别也是有的，Vue2 是

  Vue.config.productionTip = false;
  Vue.use(Vuesax);
  Vue.use(VueTypedJs);
  
  new Vue({
    render: h => h(App),
  }).$mount("#app");
  

  
  这样写的，而 Vue3 是

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

尾声

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