Vue3和Vite实现极客时间官网首页

近日各大公众号都推vite的文章，也看了尤大大做客GitHub Open Source Friday的直播视频（https://www.bilibili.com/video/BV1kh411Q7WN），心痒痒也想用一用。在极客时间网站上学习过专栏也上过训练营，觉得还不错，于是选择了官网进行练手。

首先参考vite中文站（https://cn.vitejs.dev）和vue3中文站（https://vue3js.cn/docs/zh/）里的内容，创建项目

npm init @vitejs/app

需要注意的是要求Node.js版本>=12.0.0。

安装依赖

npm i vue-router@4 -S

npm i vant@next -S

npm i axios -S

npm i qs -S

添加项目目录

修改vite.config.js，配置@路径符号，proxy代理，获取服务器数据。

在http.js中对axios进行封装，可通过http.post和http.get获取数据。

将接口调用统一封装到api.js中，便于管理。

mock目录下存放了部分数据，在数据缺失情况下使用。

使用vue-router进行路由管理，但目前只有一个页面，还没使用上。

store状态管理也没用上，备用。

config.js中配置了常用的服务地址

util.js中添加了常用的方法，有按指定格式格式化时间、直播时间、获取url、防抖和节流等

最主要的内容是在views和components下，views是视图页面，components是封装的组件，这里很多首页用到的组件都放到components中了，随着项目的扩大，会不好维护，以后再修改。

common.css中加入了公用的样式，其他页面中的样式都是从极客时间网站里拿过来的，他们写的不错👍

代码集中在Home.vue中，由于是第一次用vue3，代码还有些堆叠，template、script和style中的代码在一个文件中，免不了上下横抖，写法上的不足之处，再后续优化升级了。

项目地址：https://github.com/chong2230/geektime-vue3

截图：