Vue.js教程-Vue项目的目录结构和.vue文件的构成

前言

• 本章介绍vue项目的目录结构和一个.vue文件的三部分，分别是template、script和style。
• 上一篇文章说到为什么同样都是.vue文件，为什么存在于不同的文件夹下，下面先解释一下目录结构。
• 因为Vue属于单页面开发方式，构成这个页面的元素就是组件，各个小组件组成一个大组件，各个大组件组成这个页面，在实际操作中只需要刷新对应组件即可，节省了任务量。通俗一点解释就是：单页面作为一棵树的根结点，它的子结点就是大组件，子结点的子结点就是小组件，以此类推。

Vue项目的目录结构(Vue-cli3/4版本)

• 先看一下整体的目录，还是用上一篇的vue工程。
  

• 众所周知，源码都放在src文件夹里，其他的要么是配置文件，要么是项目里需要的相关依赖。

• assets文件夹：经常有两个子文件夹，分别是CSS和icon(就是存图片的)。

• components文件夹：顾名思义存的是组件，这种组件全是vue文件，但这里经常放的是能够在不同的项目中进行重复使用的组件，例如移动端开发的Tabbar，或者是PC端的左侧导航栏等等，在不同的项目中直接复制粘贴这个文件夹就能使用了&#x