Vue项目目录结构

Vue项目目录结构

参考https://www.cnblogs.com/bingquan1/p/15236433.html

https://zhuanlan.zhihu.com/p/70752505

https://www.cnblogs.com/hellman/p/10985377.html

 

      Vue开发的是单页面式的项目，没有页面跳转。多页面应用是多个html组件来回跳转，而单页面应用是组件式开发，要用的时候在页面里换组件。所以项目中只有index.html一个页面，vue后缀的文件就是组件。（如果vue文件里的代码没有高亮，说明编译器没有安装vue的插件，还不认识.vue文件。）

─ VuePro
   └── node_modules  #npm加载的项目依赖模块，一般不可以移植给其他电脑环境
   └── public   
              ├── favicon.ico #标签图标
              └── index.html  #前端首页入口模板（当前项目唯一的页面）
   └── src #这里是我们要开发的目录，基本上要做的事情都在这个目录里。
              ├── assets #静态资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建
              ├── components #公共组件(页面中的小组件）
              ├── router 
                      └── index.js #路由脚本文件（配置路由url链接 与 页面组件的映射关系）
              ├── store
                      └── index.js #仓库脚本文件（vuex插件的配置文件，数据仓库,用来存储一些需要进行转发的对象）
              ├── views #业务模块（大的页面组件）
              ├── App.vue #根组件（汇总所有组件）
              └── main.js #项目入口，即执行npm run serve后，第一个访问的地方。它与App.vue直接通信，并负责把App.vue放入index.html的div容器中
   └── .browserslistrc #根目录下的配置、说明文件
   └── ……        

b站讲解视频 https://www.bilibili.com/video/BV1Zy4y1K7SH?p=62