Vue框架中分模块编写界面

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

image.png

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

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


    image.png
  • Index.vue是主页面的代码


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


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


    image.png

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,698评论 25 709
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 14,481评论 2 59
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,043评论 3 119
  • 看了阿诺·阿梅哈(法)的绘本《有些时候,我特别喜欢爸爸》,二年级孩子的日记这样仿写: 我喜欢穿着滑冰鞋和爸...
    FangFang放下自在阅读 3,526评论 0 0