vue - 优雅的vue2项目总体结构

前言

在多人合作的 Vue 项目中，或多或少会使用到 vue-router / vuex / axios 等工具库。本文在基于 vue-cli webpack模板 生成的目录结构基础上，建立一个利于多人合作、扩展性强、高度模块化的 vue 项目目录结构。

vue2的总体结构如下：

├── build                           存放项目打包后的文件
├── node_modules 					项目依赖
├── public 							存放index.html和静态文件
│   ├── idnex.html
│   ├── images							存放图片
│   ├── videos							存放视频
├── mock                            mock测试数据文件
│   ├── hello.js
├── src                             项目源码目录    
│   ├── api  						存放项目的接口目录
│ 		└── myAxios.js					对axios的封装
│ 		└── login.js					其他接口方法
│	├── assets						存放css相关和icon字体图标之类的
│   	└── resetCss  					全局样式和清除默认样式	
│   	└── iocnFonts 					矢量图标以及静态图片
│	│── components 					存放全局组件
│   	└── HelloWorld.vue 				每个组件
│		└── ...vue
│	├── config                       重要配置参数                  
│   	└── index.js                    存放一些配置参数（比如接口代理路径，百度云秘钥等等）
│	├── entry                       存放ts的类型约定（ts项目）                  
│   	└── index.js                    
│	│── plugins 					所需的第三方库（最好按需引入）
│   	└── elementUi.js  				element-ui库
│   	└── vantUi.js 					vant-ui库
│	│── router						存放路由 
│   	└── index.js					路由表及其配置
│	│── stores							vuex状态管理仓库 
│   	└── user.js							用户子模块							
│   	└── login.js						登陆子模块						
│   	└── index.js						根模块root
│	│── utils						工具类
│		└── tools.js					共用方法
│	│──views                         页面目录
│       └── hello.vue
│       └── login.vue
│       └── ....vue						其他页面
│	│──App.vue						设置路由出口 
│	│──main.js						入口文件  
├── .browserslistrc					针对浏览器的兼容性
├── .env.test						测试环境配置文件
├── .env.development				开发环境配置文件
├── .env.production					生产环境配置文件
├── .gitignore						忽略上传到git的文件,比如node_modules和build打包
├── .prettierrc.json				统一代码风格，比如缩进
├── .eslintrc.js					ESlint 语法检查，代码格式化，优化代码
├── babel.config.js					转ES5语法和配置一些插件
├── package.json                    npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
├── package-lock.json               锁定包的版本，自动生成
├── vue.config.js					vue配置文件
├── README.md						项目说明文档，重要

下面是项目结构的详细说明:

注意：vue2和vue3项目结构是有一些差异的，但基本都是一样的，vue3的index.html文件放到了最外面，且vue3是用vite构建的，所以要配置vite.config.js，不懂的可以学习一下vite构建；

vite中文网： https://vitejs.cn/

其他需要注意的：

1，package.json 里面的dependencies 和 devDependencies区别：

dependencies字段指定了项目运行所依赖的模块，devDependencies指定项目开发所需要的模块。

比如dependencies 下的core.js包和vue包会被编译到最终生成的文件中，而 devDependencies 下的这些包不会被编译进去，因为这些提供的功能（语法转换、开发服务器、语法检查、vue的编译器）仅在开发阶段用到。

其中，依赖模块的版本可以加上各种限定，主要有以下几种：

• 指定版本： 比如1.2.2，遵循大版本.次要版本.小版本的格式规定，安装时只安装指定版本。
• 波浪号+指定版本： 比如~1.2.2，表示安装1.2.x的最新版本（不低于1.2.2），但是不安装1.3.x，也就是说安装时不改变大版本号和次要版本号。
• 插入号+指定版本： 比如ˆ1.2.2，表示安装1.x.x的最新版本（不低于1.2.2），但是不安装2.x.x，也就是说安装时不改变大版本号。需要注意的是，如果大版本号为0，则插入号的行为与波浪号相同，这是因为此时处于开发阶段，即使是次要版本号变动，也可能带来程序的不兼容。
• latest： 安装最新版本。

2，public文件夹

任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack（vue-cli依赖的打包工具）。可以通过相对路径来引用它们;

推荐将资源作为你的模块依赖图的一部分导入，这样它们会通过 webpack 的处理并获得如下好处：

• 脚本和样式表会被压缩且打包在一起，从而避免额外的网络请求。
• 文件丢失会直接在编译时报错，而不是到了用户端才产生 404 错误。
• 最终生成的文件名包含了内容哈希，因此你不必担心浏览器会缓存它们的老版本。

通常，我们只需要关注public/index.html这个文件，它会在构建过程中被注入处理后的 JavaScript 和 CSS 等的资源链接。同时，它也提供了 Vue 实例挂载的目标。