如何用Vue重构资讯页面，实现长尾词优化？

本文共计2493个文字，预计阅读时间需要10分钟。

从我开始接手这个页面代码重构前，一直都在使用Angular 1的代码去实现功能；作为一个追求新技术的前端，怎么忍心继续使用这样有历史感的框架。

从我接手到将这个页面代码重构前，一直都还是使用angular1的代码去做的，需求来了也是用angular去实现；作为一个憧憬新技术的前端，怎么忍受得了现在还在使用这么有历史感的框架，所以，以前就一直在酝酿着如何将angular重构成vue。

代码结构设计

这个资讯项目代码整体都是使用angular.js来去实现的，而此次想重构的资讯详情页面只是其中的一个页面，所以新建了一个文件夹 /newApp 、作为以后新技术的文件夹，以后使用vue技术的都放在这个文件夹下，区别于原先文件夹 /app 。

在旧的angular1的js文件中，由于页面功能丰富，所有的功能代码全都挤在了同一个js中，这就导致主要的js一共有1500+行的代码。每次打开看到长长的一摞代码、还要在里面找到对应的功能代码，就不禁吐槽其中的不合理。。

所以这次重构，我按照页面中的每个模块、每个功能，来将页面拆分成不同的.vue组件模块，以后想要去维护、或者新增功能时，可以直接去对应的模块文件中修改或者是新增一个vue文件。