前言
由于自己最初接触vue时，默认学习的网站上的教程，并没有关注脚手架版本的问题，都是一步一步按部就班下去的，最近看公司老项目才发现一些区别，简单记录下，也当做自己后续查看的笔记，也想通过这样的方式强迫自己学习起来
Vue CLI 2.x 和Vue CLI 3.x项目目录结构
- 在 Vue CLI 2.x 中，项目结构目录下的每个文件具体包含以下内容：
project
├── build
│ ├── build.js
│ ├── check-versions.js
│ ├── logo.png
│ ├── utils.js
│ ├── vue-loader.conf.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config
│ ├── dev.env.js
│ ├── index.js
│ ├── prod.env.js
│ └── test.env.js
├── src
│ ├── assets
│ ├── components
│ ├── router
│ ├── App.vue
│ └── main.js
├── static
├── index.html
└── package.json
各个目录介绍：
-
build：包含了用于构建项目的构建脚本和webpack配置文件。build.js：执行项目的构建逻辑。check-versions.js：检查 Node 和 npm 的版本是否符合要求。utils.js：项目中使用的一些实用工具函数。vue-loader.conf.js：用于配置 vue-loader 的相关选项。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：测试环境的配置。
-
src：包含了项目的源代码。assets：用于存放项目中使用的静态资源，如图片、字体等。components：存放项目中的 Vue 组件。router：存放路由配置文件。App.vue：Vue 应用的根组件。main.js：Vue 应用的入口文件。
-
static：用于存放静态资源文件，这些文件不会经过 webpack 的处理，会直接复制到最终打包的目录中。 -
index.html：应用的 HTML 入口文件。 -
package.json：用于管理项目的各种依赖和脚本。
- 在 Vue CLI 3.x 中，项目结构目录下的每个文件和文件夹具体包含以下内容：
|—— node_modules/ // 存放项目依赖的第三方模块
|—— public/ // 静态资源文件夹，存放不需要经过编译的静态资源
- favicon.ico // 网站图标
- index.html // 主页面模板
|—— src/ // 源代码文件夹
- assets/ // 存放静态资源，如图片、字体等
- components/ // 存放公共组件
- router/ // 存放路由配置文件
- views/ // 存放页面级组件
- App.vue // 根组件
- main.js // 项目入口文件
|—— .browserslistrc // 浏览器兼容性配置文件
|—— .eslintrc.js // ESLint 配置文件
|—— .gitignore // Git 忽略文件列表
|—— babel.config.js // Babel 配置文件
|—— package.json // 项目配置文件，包含项目的基本信息、依赖等
|—— README.md // 项目说明文档
|—— vue.config.js // Vue CLI 的配置文件，用于自定义配置
Vue CLI 2.x和Vue Cli 3.x两者在创建基础的项目时有什么不同
创建项目的语法，在Vue CLI 2.x和3.x中，从无到有创建一个新项目的过程有所区别。
Vue CLI 2.x:
- 安装Vue CLI 2.x，可以使用命令
npm install -g @vue/cli@2进行安装。 - 执行命令
vue init webpack my-project，其中my-project是你想要创建的项目名称。 - 在创建项目的过程中，你将会被要求提供一些选项，如模板类型、是否安装vue-router和vuex等。根据你的需求进行选择。
- 创建成功后，进入项目目录
cd my-project，然后执行npm install安装项目依赖。 - 最后，使用
npm run dev启动开发服务器，你的Vue项目就可以运行了。
Vue CLI 3.x:
- 安装 Vue CLI 3.x，可以使用命令
npm install -g @vue/cli进行安装。 - 执行命令
vue create my-project，其中my-project是你想要创建的项目名称。 - 在创建项目的过程中，你将会被要求选择一种预设（preset）。可以选择默认的
default (babel, eslint)预设或手动选择需要的特性。 - 创建成功后，进入项目目录
cd my-project，然后执行npm install安装项目依赖。 - 最后，使用
npm run serve启动开发服务器，你的Vue项目就可以运行了。
*注：我自己的情况是当时想同时安装两个不同版本脚手架，但是尝试起来是不行滴，文件会占用导致下载中断，索性直接选择了最新版本 （npm install -g @vue/cli） ，毕竟这个版本vue2和vue3语法都是可以写的，也比较方便，项目方面也没有硬性要求，同时自己也比较适应 3.x 的目录结构。
查看本地脚手架版本，可以使用 vue --version 或者 vue -V ,注意大小写！！！（当初自己就是因为大小写，非常郁闷，怎么这么简单的东西，就是不行呢）
