2.0 vue工程项目的创建
前提准备.需要电脑上已经安装了nodejs
参考 7.nodejs和npm简单使用_npmjs官网-CSDN博客
创建vue2工程
全局安装 Vue CLI
- 在终端中运行以下命令来全局安装 Vue CLI：
npm install -g @vue/clinpm install -g表示全局安装。@vue/cli是 Vue CLI 的包名。
- 安装完成后，可以通过以下命令验证 CLI 是否安装成功：
或者vue --version
你应该能看到 Vue CLI 的版本号（例如vue -V@vue/cli 5.x.x）。注意：即使 CLI 版本是 5.x，它仍然可以创建 Vue 2 项目。 
步骤 3: 创建 Vue 2 项目
- 运行以下命令，
my-vue2-project是你项目的名称，你可以替换成你想要的名字：vue create my-vue2-project - 这会启动一个交互式界面。选择
Manually select features（手动选择功能）。 - 使用方向键选择你需要的特性，按空格键选中或取消选中，然后按回车键确认。
- 当提示选择
Vue version时，确保选择2.x。 - 后续根据你的选择进行配置（例如，选择 Router 和 Vuex 的版本，选择 CSS 预处理器，选择 Linter 配置等）。
- 最后，CLI 会询问你是否将此配置保存为预设（preset）。如果你以后还想用相同的配置创建项目，可以输入一个名字（如
my-vue2-preset）保存它。下次创建时，可以直接选择这个预设。
步骤 4: 启动项目
- 项目创建成功后，进入项目目录：
cd my-vue2-project - 启动开发服务器：
npm run serve - 启动后，通常会在终端中看到类似
App running at:的信息，并提供一个本地访问地址（如http://localhost:8080）。 - 打开浏览器，访问这个地址，你应该能看到 Vue 的欢迎页面，表明项目创建成功！
项目结构概览
一个典型的 Vue CLI 创建的 Vue 2 项目结构如下：
my-vue2-project/
├── node_modules/ # 项目依赖包
├── public/ # 静态资源
│ ├── index.html # 主页面模板
│ └── favicon.ico
├── src/ # 源代码目录
│ ├── assets/ # 静态资源（图片、字体等）
│ ├── components/ # 可复用的 Vue 组件
│ ├── App.vue # 根组件
│ └── main.js # 应用入口文件
├── .gitignore # Git 忽略文件配置
├── babel.config.js # Babel 配置
├── package.json # 项目元数据和依赖
└── README.md # 项目说明 
验证 Vue 版本
- 为了确保项目确实是 Vue 2，你可以检查
package.json文件中的dependencies部分，应该包含类似："dependencies": {"vue": "^2.6.14"// ... 其他依赖 } - 或者在项目根目录运行：
npm list vue
恭喜！你已经成功创建了一个 Vue 2 项目
vue3项目创建方式
npm create vue@latest 这个命令不会安装一个 Vue 2 项目，恰恰相反，它安装的是基于 Vue 3 的最新版本的官方项目脚手架。
让我们详细解释一下这个命令：
命令分解
npm create: 这是 npm (Node Package Manager) 提供的一个便捷命令，等同于npm init。它的作用是快速初始化或创建一个新项目，通常会调用一个特定的包（package）来生成项目结构。vue: 这里指定了要使用的包的名字。create-vue是这个包的完整名称，但npm create允许你省略前面的create-前缀。@latest: 这个标签指定了要使用该包的最新版本。如果不指定，默认也是使用最新版。
所以，npm create vue@latest 的完整含义是：使用 npm 的 create 命令，调用 create-vue 包的最新版本来创建一个新的项目。
create-vue 包的作用
create-vue 是 Vue.js 官方团队推出的现代化的项目脚手架工具，专门用于创建新的 Vue 3 项目。它取代了旧的 vue-cli 作为创建 Vue 3 项目的推荐方式。
安装了什么内容？
当你运行 npm create vue@latest 时，会发生以下事情：
- 下载并执行
create-vue包：npm 会临时下载create-vue包并执行它（通常不会全局安装）。 - 交互式配置：
create-vue会启动一个交互式界面，询问你一系列问题来定制你的项目：- Project name: 项目名称。
- Add TypeScript?: 是否添加 TypeScript 支持。
- Add JSX Support?: 是否添加 JSX 支持。
- Add Vue Router for Single Page Application development?: 是否添加 Vue Router (用于单页应用)。
- Add Pinia for state management?: 是否添加 Pinia (Vue 3 推荐的状态管理库，取代了 Vuex)。
- Add Vitest for Unit testing?: 是否添加 Vitest (一个基于 Vite 的快速单元测试框架)。
- Add an End-to-End Testing Solution?: 是否添加端到端测试方案（如 Cypress 或 Playwright）。
- Add ESLint for code linting?: 是否添加 ESLint 进行代码规范检查。
- Add Prettier for code formatting?: 是否添加 Prettier 进行代码格式化。
- 生成项目结构：根据你的选择，
create-vue会在当前目录下创建一个新文件夹（你指定的项目名），并生成相应的项目文件和目录。 - 安装依赖：项目生成后，
create-vue会自动运行npm install(或你选择的包管理器如yarn,pnpm) 来安装项目所需的所有依赖。
关键点：这是 Vue 3 项目！
- 核心框架：生成的项目会依赖
vue@^3.x。 - 构建工具：默认使用 Vite 作为构建工具和开发服务器，而不是 Webpack。Vite 以极快的冷启动和热更新速度著称。
- 状态管理：如果选择状态管理，会使用 Pinia，而不是 Vue 2 中常用的 Vuex。
- 脚手架：这是 Vue 3 生态系统的现代标准方式。
总结
npm create vue@latest 命令是创建一个全新的、现代化的 Vue 3 项目的标准方法。它利用 create-vue 脚手架工具，通过交互式配置，为你生成一个基于 Vite、可选 TypeScript、Vue Router、Pinia、Vitest、ESLint、Prettier 等技术栈的项目。
如果你想创建 Vue 2 项目，请不要使用这个命令，因为它创建的是 Vue 3 项目。你应该使用之前介绍的 vue create (Vue CLI) 并手动选择 Vue 2 版本