Vue框架中分模块编写界面

这是最近做的一个网的主页面，这样的一个页面有许多内容，为防止错误以及便于修改，我们可以将整个大的页面分成多个小模块编写

image.png

以中心的更多热门专题为例

• Theme.vue是更多专题部分的代码，放在common文件夹中

  
  
  

  image.png

• Index.vue是主页面的代码

  
  
  

  image.png

• 先在Index.vue的script中定义一个vTheme,并在其中加入Theme.vue

  
  
  

  image.png

• 可以直接使用vTheme放在页面里

  
  
  

  image.png

这样分块编写页面的方法非常值得大家学习，相信这个对大家以后的前端设计也是非常简便有用的！