javascript - 完整vue项目的目录结构及组件划分问题

问题描述

问 题

1、我现在用vue正在写一个PC的页面，用vue-cli构建的项目
2、这图片是官网首页 我想把页面分成三个大的组件，也就是header content footer 存放在srccomponents目录下
3、 红色标框部分是header组件 header组件中绿色标框部分是导航
4、红色框下面是content组件 content组件下面是footer组件(没有截出来) 然后头部导航中匹配到的子组件渲染到content区域 不管点击哪个导航页面头部跟底部不变
5、一开始我把所有的组件都放在components下面了 然后领导说 这样弄不好 太乱 应该把子组件单独放到一个文件夹 像contents这样的页面级组件放在compoents下 什么是页面级的组件？
6、我让头部导航匹配到的组件渲染到contents里面合适吗 我理解就是这样的 因为这些导航匹配到的组件就是显示在content区域的 就算是导航匹配到的组件里还有子组件也是显示在content里
7、不知道是不是这样 不是说这里涉及到多页面开发的问题 多页面开发还不太懂 刚开始用vue做项目 对组件和目录划分完全不熟啊 请教大家 指点指点

解决方案

新建page目录与components同级

components
    ---common   //公共部分
        ---header
        ---footer
    ---content  //内容部分
        ---组件1
        ---组件2
page    //各页面入口
   ---home.vue  
   ---content1
   ---content2
   ---content3
   ---content...           

看看是否是你需要的

这篇关于javascript - 完整vue项目的目录结构及组件划分问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！