vue2.0 Vs 3.0目录结构

一、2.0项目目录结构

|— build # (webpack配置相关)
| |— build-server.js # 运行本地构建服务器，可以访问构建后的界面
| |— build.js # 生产环境构建脚本
| |— dev-client.js # 主要用来实现开发阶段的页面自动刷新（热重载）
| |— dev-server.js # 运行本地开发服务器
| |— utils.js # 构建相关工具方法
| |— webpack.base.conf.js # webpack基础配置
| |— webpack.dev.conf.js # webpack开发环境配置
| |— webpack.prod.conf.js # webpack生产环境配置
|— config # 配置目录，包括端口号等
| |— dev.env.js # 开发环境变量
| |— index.js # 项目配置文件
| |— prod.env.js # 生产环境变量
| |— test.env.js # 测试环境变量
|— node_modules # npm install 安装的依赖代码库
|— src # 存放项目源码
| |— assets # 放置一些图片,如logo等
| |— components # 目录里面存放一些公共组件
| |— App.vue # 根组件
| |— main.js # 入口js文件
|— static # 存放静态资源(图片、字体等),不会被wabpack构建
| |— .gitkeep # 当static目录为空文件夹时git也可以提交到代码仓库
|— test # 测试文件目录
|— .babelrc # babel文件的编译配置
| |— presets # 预设转码规则
| |— plugins # 除了预设的,还可以根据自己的需求添加其他转码插件
| |— comments # 转换后代码生不生成注释
|— .editorconfig # 编辑器的配置
| |— charset # 编码
| |— indent_style # 缩进风格
| |— indent_size # 缩进长度
| |— end_of_line # 换行风格
| |— insert_final_newline # 创建一个文件是否自动在文件末尾插入一个新行
| |— trim_trailing_whitespace # 移除文件末尾多余的空行
|— .eslintignore # 忽略语法检查的目录文件
|— .eslintrc.js # eslint的配置文件
|— index.html # 入口页面
|— package.json # npm包配置文件
|— favicon.ico # 网站图标

vue2.0.png

二、vue3.0项目目录结构

vue3.0.png

我们对比发现 vue3.0 默认项目目录相比 2.0 来说精简了很多。

移除了配置文件目录， config 和 build 文件夹。

移除了 static 文件夹，新增 public 文件夹，并且 index.html 移动到 public 中。

在 src 文件夹中新增了 views 文件夹，用于分类 视图组件 和 公共组件。

三、vue-cli 3 与 2 版本有很大区别：

• vue-cli 3 的 github 仓库由原有独立的 github 仓库迁移到了 vue 项目下；
• vue-cli 3 的项目架构完全抛弃了 vue-cli 2 的原有架构，3 的设计更加抽象和简洁；
• vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3
• vue-cli 3 的设计原则是“0配置”
• vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化

由于 vue-cli 3 的设计思路是 “0配置”，所以项目初始化后，没有了以前熟悉的 build 目录，也就没有了 webpack.base.config.js、webpack.dev.config.js 、webpack.prod.config.js 等配置文件。

那么，我们该如何去配置自己的项目了？

其实这一切都是因为 vue-cli 3 的项目初始化，帮开发者已经解决了 80% ，甚至是绝大部分情形下的 webpack 配置。

上述功能就是由 @vue/cli-service 依赖去处理，当你打开 node_modules 目录下 @vue 中的 cli-service 看一眼，就会发现和 vue2.0 下的 build 目录下的配置文件很类似的样子

image.png