蓝贝尔奶粉好不好？成分配方大揭秘，看完不纠结！

大家我是老K。

今天跟大家唠唠我最近折腾的“蓝贝尔”项目，名字挺洋气，但就是个个人网站的小改版。之前那个版本界面太老气了，自己看着都嫌弃，所以就想着重新捯饬捯饬。

1. 想法起源

最开始就是觉得丑，真受不了了。然后看了看别人的网站，各种炫酷的效果，心里痒痒。就寻思着，咱也得跟上时代的步伐，搞个现代化的网站出来。

2. 技术选型

我之前一直用的是PHP，这回想着换个口味，就选了*。听说这玩意儿做前端很方便，组件化开发，效率高。后端还是用的老一套，PHP+MySQL，毕竟熟悉，懒得折腾。

3. 动手开干

说干就干，先是搭环境。装了个*，然后用npm装了Vue脚手架。这过程磕磕绊绊的，各种报错，百度了好久才搞定。然后就是vue create一个新项目，开始写代码。

4. 界面设计

我是个程序员，不是设计师，所以界面设计这块儿对我来说是个大难题。就在网上找各种模板，找了个看着顺眼的，然后照着葫芦画瓢。改颜色，换字体，调整布局，反正就是怎么顺眼怎么来。

5. 功能实现

• 首页： 搞了个轮播图，放几张好看的图片。下面是文章列表，用卡片式布局，看着舒服。
• 文章详情页： 把markdown解析成HTML，显示文章内容。加了个评论功能，可以跟读者互动。
• 关于我： 简单介绍了一下自己，放了些个人信息。

6. 遇到的坑

这期间遇到的坑那是真不少：

• 跨域问题： 前后端分离之后，就得解决跨域问题。搞了个CORS，配置了一下header，总算是解决了。
• 路由配置： Vue的路由配置一开始不太熟悉，各种跳转错误。看了看文档，debug了好久才搞明白。



• 样式问题： CSS这玩意儿，永远是我的痛。各种样式冲突，排版错乱，调了半天才弄

7. 成果

经过一个多星期的折腾，总算是把网站改版完成了。虽然还有很多不足之处，但总体来说比之前那个版本好看多了。自己看着也舒服多了。

8. 总结

这回改版，学到了不少新东西，也踩了不少坑。但还是挺有成就感的。以后有机会，再继续优化优化。

就酱，下次再跟大家分享其他折腾经历。