这事儿得从上周二说起

当时领导扔过来个需求，说要做个挺重要的企业展示官网，要求得好看，还能和用户有点小互动。我寻思着，这活儿用Vue应该挺趁手。为啥选Vue？前几年被原生JS和JQuery折磨得够呛，每次改点东西都像在玩多米诺骨牌，动一发牵全身。

说干就干，我立马打开VSCode，第一步就是让电脑联网下载零件。直接在终端敲了 npm create vue@latest 这串命令，电脑吭哧吭哧跑了一会儿，蹦出来一长串选项。我盯着屏幕，选项目结构时默认勾了好几个，我看着 Router（管理页面跳转的）、Pinia（存公共数据的）、ESLint（管代码规矩的）这几个都挺有用，就全留下了，手指头一敲回车，文件夹唰就生成了。

结果一上来就踩坑

我刚想美滋滋启动项目看看空架子，照着官方说明敲了 npm run dev。好家伙，终端直接报红字儿！提示我某个依赖没装上。气得我差点把键盘摔了——刚刚创建项目时明明自动装了？ 只好硬着头皮，老老实实再敲一遍 npm install ，这回它才磨磨唧唧把所有零件真正安重新启动，浏览器终于跳出个默认页面，蓝底白字的 Vue 标在那儿转，心里石头这才落地。

动手搭积木

我脑子大概盘算了下页面：头图 Banner、公司介绍、产品服务、新闻动态、联系方式，这五个板块基本够用。赶紧打开项目文件夹开始搭积木：

• 先在 src/views 底下啪啪新建了五个 .vue 文件，每个对应一个页面，比如 、；
• 又钻进路由文件（router/*）里，手动把新页面一个个给“挂上号”，这样浏览器地址输不同路径才能找到对应地方；
• 接着搞导航栏，就在默认的 文件里找了个空位置，加了段带链接的代码，每个链接指向刚挂号的页面；
• 顺手还偷懒引了个UI库（具体名字不说了），主要图它按钮、卡片长得周正，省得我自己调样式。

万万没想到，响应式给我当头一棒

吭哧吭哧搞定了公司介绍页，放了几段文字几张图，在自个儿大显示器上看美得很。结果隔壁设计部小李用他那个破笔记本打开一看，直接打电话过来吼：“哥！你页面炸了！字都叠到图片上去了！” 我跑过去一看，真是惨不忍睹。光顾着赶路，忘了手机和笔记本这些小屏幕了。赶紧滚回去改代码，在样式（CSS）里面疯狂加 @media 这种“条件判断”。屏幕宽的时候怎么排，窄的时候怎么缩，密密麻麻写了好几十行，写得我眼花缭乱，感觉像是在给不同尺寸的手机缝衣服。改完又让小李拿他笔记本看，来回折腾三四次才算能看。

领导突然“加戏”

首页快收尾的时候，领导溜达过来瞅了一眼，指着 Banner 图下面一大块空白说：“这儿空荡荡的不好看，要不你加个最新的两条新闻滚动展示？动态一点。” 我表面笑嘻嘻，心里直骂娘。只能翻出之前找的轮播图插件，吭哧吭哧装进项目（npm install xxx-carousel）。然后在 * 文件里，先是像请神仙一样把插件文件引进来（import），然后在代码里找个合适位置，照着插件说明书，写了一堆看着就眼晕的配置项。调位置、调速度、调样式，搞到快下班才看着不那么突兀。

打包上线又掉链子

所有页面拼完，自测感觉没啥大毛病了，准备把代码打包扔服务器上线。自信满满敲了 npm run build ，看着终端飞快刷屏，心想总算完了。结果打开生成的 dist 文件夹，扔进服务器后，用户点新闻详情页，页面居然是空的！白花花一片！我头皮都麻了，赶紧查。折腾半天，发现是路由配置里，默认设置成“历史模式”（history）了，这玩意儿服务器没特殊处理就认不出来。解决办法很简单（但真不好找），要么改服务器配置，要么把路由模式切换回“哈希模式”（hash）。我图省事，灰溜溜地滚回路由设置文件，把 history: createWebHistory() 注释掉，换成 createWebHashHistory() ，重新打包上传，世界才清净。

回头看这一趟，建项目、踩坑、布局、调样式、加功能、解决上线问题，真是一路荆棘。不过最终页面跑起来还算流畅，效果也还凑合。下次再做，开头就得把响应式和打包路径想明白喽，能少挨不少闷棍。这折腾劲儿，够我喝两壶茶缓半天了。正要站起来活动活动，领导又发消息：“对了，再加个在线留言表单哈，下周要用！” 得，茶也别喝了……