Vue项目结构

捕获6.JPG

)

1.node_modules 依赖文件夹
2.public 文件夹

一般情况下，不需要你去做任何操作，内含两个文件，一个 ico图标，一个index.html(项目主页面)，主页面中有一个id为app的div，在vue中几乎所有页面及操作都是在 #app 里面进行。

3.src 项目主要开发文件夹(项目所有的开发，都在这个文件夹下面进行)
  • 3.1 assets 文件夹，静态资源文件夹，一般存放图片文件
  • 3.2 router 文件夹(路由文件夹)，用于设置各个页面的路由
  • 3.3 store 文件夹(全局状态管理文件夹)vuex文件夹，用来设置及操作所有的全局状态
  • 3.4 views文件夹(页面文件夹)，用来存放所有的页面文件(这里的页面文件，是指.vue 文件)
  • 3.5 components文件夹(组件文件夹)，用于存放所有的组件文件
    组件和页面的区别：
    像nav content sideBar 之类的组成页面的模块就叫组件，
    像 index about login 之类的完整页面就是页面
    一个页面可以由若干个组件组成，组件可以复用
  • 3.6 App.vue主组件(主页面)
    用来组装所有的页面，如果将页面比喻成拼图，组件比喻成小拼图块，那么App.vue就是用来承载整个拼图的拼图板，左右的页面都是在App.vue下面进行切换的
4.vue.config.js 文件是项目的主要设置文件

用来设置项目中各个文件夹的虚拟路径(类似于express 中将public 文件夹路径设置为"/"），或开启关闭严格模式，或对跨域进行设置等
\color{orange}{注意：}一般情况下，项目中，开发者只需要操作src和vue.config.js

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

推荐阅读更多精彩内容