今天想和大家聊聊怎么用Vue做个模板网站，我自己也是从零开始摸索的，过程挺有意思的。

第一步：先把环境搭起来

我一开始连Vue是啥都不太清楚，就跟着官方文档装*。下载安装包，下一步下一步点完，打开命令行输入node -v，看到版本号跳出来才算安心。接着用npm装Vue CLI，敲命令的时候手抖打错了好几次，发现是少打了个横杠。

第二步：创建项目骨架

用vue create命令新建项目的时候，我选了最基础的配置，连路由和状态管理都没敢加。等终端刷完一堆进度条，文件夹里突然多了好多文件，看着那些陌生的文件名差点想关掉编辑器。

• 试图直接改public里的*
• 在*里乱加*
• 把components当成页面文件夹用

第三步：摸清文件关系

后来静下心看文档，才明白*是根组件，components放的是小零件。我试着在默认的HelloWorld组件里改了几个字，浏览器居然实时更新了，当时激动得拍了桌子。

第四步：拼凑页面结构

我先删光了默认代码，从网上找了个网页模板，把HTML拆成几个vue文件。header单独做成组件，main部分留着动态内容，footer直接复制粘贴。结果发现样式全乱了，原来得手动把CSS分割到每个组件的style标签里。

第五步：解决动态数据

最头疼的是把静态内容改成动态的。我先在data里硬编码了标题和介绍文字，然后用v-for渲染导航菜单。点击跳转时路由总报错，折腾半天才发现得先用router-link代替a标签。

启动npm run serve时，浏览器跳出欢迎页的那一刻，感觉像拼好乐高一块积木。虽然只是把静态模板改成了Vue版本，但看到页面能交互、能跳转，还是特别有成就感。下次准备试试加个后台数据接口，应该会更有意思。