写一个小demo——个人简介网站，技术栈vue3.2+arco-design+ts

写一个小demo——个人简介网站（响应式）。

vue3.2出来了，就用它来开发吧！至于UI方面就借鉴（抄袭）网上的开源项目，毕竟不是设计师出身，也不想写的太丑，哈哈哈。UI框架就选字节开源的吧。至于逻辑层到底用js还是ts呢？用脚指头想了一下。emm还是ts吧，毕竟是练手的嘛。（工作中写业务逻辑个人觉得还是用js好一点，ts写业务逻辑会写到你怀疑人生，哈哈，造轮子才是首选ts）。

这个项目技术点不是很多，主要想尝试一下vue3.2的api，就直接开始了。（基础配置，安装脚手架就略过）

创建项目

vue create personal

安装axios

npm install axios

安装UI框架

npm install arco-design

其他需要用到的路由vue-router，状态管理，css预处理器，eslint等等就不一一列出了，都是基础中的基础。

一切准备就绪，开干！！

首先理清项目页面布局，一般网站都分为顶部菜单栏、面包屑、底部菜单、内容部分。 将各部分拼出来

具体样子就出来了

从上面的代码可以看出vue3.2的setup语法糖直接写到了script里面，在 script setup 里面引入的组件、定义变量、常量都可以直接在template中使用，响应式则用reactive或者ref

const state = reactive<any>({
  load: false
})
const val = ref(null)

使用reactive的话，为了方便使用需要用toRefs出来

const { load } = toRefs(state)

接下来就模拟请求数据，在本地创建josn文件

然后封装axios，

request.js

services.js

在需要用到的页面引入

import { getProject, getBlog } from '@/api/services'

使用

请求成功

一个小小的demo就这样完成了！

在线预览

gitee地址

ps:有个小小的疑惑，不管是vue3还是vue3.2都有一个问题，就是路由配置为懒加载的话，打包后有的页面会出现空白，查了代码，没有报错也没有写的不合理，全量导入就不会。vue2不会有这个问题。目前还没找到答案。