今天想聊聊怎么用Vue3的框架模板搭网站，这个是我上周刚折腾完的一个小项目。一开始我也觉得这玩意儿应该挺复杂的，但真动手后发现比想象中简单不少。

先从找模板开始

我直接去GitHub上搜vue3 template，结果跳出来一大堆。挑了个星星最多的，看介绍说是带了路由、状态管理这些基础功能，感觉挺适合新手。下载下来解压，里面一堆文件看得我有点懵，但README写得挺详细，就硬着头皮跟着操作。

环境配置这块儿

得装*，我电脑上本来就有，但版本太老又重装了一遍。接着用npm装依赖，命令行里敲完npm install就开始刷刷刷下载，等了大概三五分钟。中间报了个错，说是某个包版本冲突，我直接把*删了重新install，居然就好了。

动手改代码

模板里默认有个首页，全是英文的。我先把src/views下面的*打开，把标题改成中文，又加了两段介绍文字。样式文件在assets文件夹里，我试着调了调颜色和字体大小，发现改完保存一下浏览器就自动刷新了，这个热更新确实方便。

• 路由配置在router/*里，我加了两个新页面
• 组件拆得太细了，我又把几个小文件合并成一个
• 图片路径老是报错，发现得放在public文件夹里

踩坑记录

最坑的是部署环节。本地运行好好的，传到服务器上就白屏。查了半天发现是路由模式问题，得把history改成hash模式才行。还有一次是打包后CSS没加载，原来是因为用了相对路径，要在*里加个publicPath配置。

搞完这些差不多花了我一个下午，虽然中间有点手忙脚乱，但看到网站能正常访问还是挺有成就感的。下次如果再弄的话，估计两个小时就能搞定了。