Vue-6.创建Vue项目
使用预设默认配置创建Vue项目
创建一个简单的 Vue 项目需要使用 Vue CLI（命令行界面）。Vue CLI 是一个用于快速构建 Vue.js 项目的工具，它可以帮助你设置项目的基本结构、配置以及开发环境。
以下是创建一个简单的 Vue 项目的步骤：
1. 安装 Node.js
Vue CLI 需要 Node.js 环境。如果你还没有安装 Node.js，请前往 Node.js 官网 下载并安装合适的版本。
2. 安装 Vue CLI
打开终端（命令行界面）并运行以下命令来全局安装 Vue CLI：
npm install -g @vue/cli
3. 创建新项目
运行以下命令来创建一个新的 Vue 项目。在这里，我们使用 “my-vue-app” 作为项目名称，你可以将其替换为你自己的项目名称。
vue create my-vue-app
my-vue-project/
├── node_modules/ # 依赖
├── public/ # 公共静态资源目录
│ ├── index.html # 应用程序的入口 HTML 文件
│ └── favicon.ico # 网站的图标文件
├── src/ # 项目源代码目录
│ ├── assets/ # 静态资源
│ │ ├── logo.png # 示例图像文件
│ ├── components/ # Vue 组件目录
│ │ ├── HelloWorld.vue # 示例组件
│ ├── App.vue # 根组件，应用的布局和全局样式
│ └── main.js # 入口文件，创建 Vue 实例和配置
├── .gitignore # Git 忽略文件配置
├── babel.config.js # Babel 配置文件
├── jsconfig.json # JavaScript 项目配置文件
├── package.json # 项目配置和依赖
├── package-lock.json # 依赖版本锁定文件
├── README.md # 项目说明文档
├── vue.config.js # Vue CLI 配置文件
4. 进入项目目录
创建项目后，使用以下命令进入项目目录：
cd my-vue-app
5. 运行开发服务器
使用以下命令在开发模式下运行项目：
npm run serve
运行后，你将在终端看到一个 URL（通常是 http://localhost:8080/ 或类似的地址）。在浏览器中打开该地址，你将看到一个简单的 Vue 应用程序。
这样，你就成功创建了一个简单的 Vue 项目。你可以在项目的 src 文件夹中找到主要的源代码文件，其中的 App.vue 是根组件，main.js 是项目的入口文件。
随后，你可以通过编辑 App.vue 和其他组件，添加更多功能和页面来进一步开发你的 Vue 项目。
使用预设手动配置创建Vue项目（推荐）
使用预设手动配置创建 Vue 项目意味着你可以在选择预设的基础上，根据你的需求进行一些自定义设置。以下是使用预设手动配置创建 Vue 项目的步骤：
1. 安装 Node.js
如果你还没有安装 Node.js，请前往 Node.js 官网 下载并安装合适的版本。
2. 安装 Vue CLI
打开终端并运行以下命令来全局安装 Vue CLI：
npm install -g @vue/cli
3. 创建新项目
运行以下命令来创建一个新的 Vue 项目。在这里，我们使用 “my-vue-app” 作为项目名称，你可以将其替换为你自己的项目名称。
cd C:\Users\Administrator\IdeaProjects
vue create my-vue-app
4. 选择预设配置
运行上述命令后，Vue CLI 将提示你选择一个预设配置。选择一个预设配置，例如 “Default ([Vue 2] babel, eslint)”。
5. 手动配置
在选择预设配置后，Vue CLI 将为你生成一个初始项目结构。然后，你可以进入项目目录，编辑不同的配置文件以及其他代码文件，进行手动配置和定制。
当使用 "Manually select features" 模式创建 Vue 项目时，你将可以选择是否启用特定的特性。以下是一份表格，展示了在手动选择特性模式下可能的选项及其描述：
| 选项 | 描述 |
|---|---|
| Babel | 使用 Babel 编译器将新版 JavaScript 转换为向后兼容的版本，以确保在不同浏览器中兼容。 |
| TypeScript | 启用 TypeScript 支持，这是 JavaScript 的超集，添加了类型系统支持。 |
| Progressive Web App (PWA) Support | 启用渐进式 Web 应用（PWA）的支持，提供更好的离线访问和用户体验。 |
| Router | 启用 Vue Router，官方的 Vue.js 路由管理器，用于构建单页面应用的路由系统。 |
| Vuex | 启用 Vuex，官方的 Vue.js 状态管理库，用于管理应用的状态。 |
| CSS Pre-processors | 启用 CSS 预处理器，如 Sass、Less 或 Stylus，以使用更强大的 CSS 功能。 |
| Linter / Formatter | 启用代码风格检查和自动格式化工具，以帮助保持一致的代码质量和风格。 |
| Unit Testing | 启用单元测试支持，可以选择使用测试框架如 Mocha 或 Jest。 |
| E2E Testing | 启用端到端（End-to-End，E2E）测试支持，可以选择使用测试框架如 Nightwatch 或 Cypress。 |
这些选项可以根据你的项目需求来进行选择和定制。每个选项都提供了不同的功能和工具，可以根据你的开发需要选择启用或禁用。根据你的选择，Vue CLI 将会为你生成适合你项目特性的配置文件和结构。
这里我不使用TypeScript,其他的都用
选择Vue.js-3.x
选择路由中使用 history 模式
当在 Vue 项目创建过程中选择 "Use history mode for router"（在路由中使用 history 模式）选项时，以下是关于两种路由模式的比较：
| 特性 | 哈希模式（Hash Mode） | 历史模式（History Mode） |
|---|---|---|
| URL 格式 | example.com/#/about |
example.com/about |
| 适用场景 | 适用于单页应用，不需要服务器端配置。 | 适用于需要更干净 URL 且服务器配置良好的应用。 |
| 浏览器支持 | 所有浏览器都支持。 | 需要支持 HTML5 历史 API 的浏览器。 |
| 服务器配置 | 不需要额外的服务器配置，开箱即用。 | 需要适当的服务器配置来处理客户端路由。 |
| URL 重写 | 不需要服务器重写配置。 | 需要配置服务器以避免直接访问 URL 时出现 404。 |
| SEO | 对搜索引擎优化不太友好，因为内容在哈希中。 | 对搜索引擎友好，URL 更清晰，内容更容易索引。 |
| 刷新页面 | 刷新页面时仍可正常加载应用。 | 需要服务器配置来确保刷新时正确加载应用。 |
CSS pre-processor选择less
当在 Vue 项目创建过程中选择 “CSS pre-processor”（CSS 预处理器）选项时，你可以根据需求选择是否使用以下预处理器来编写样式：
| 选项 | 描述 |
|---|---|
| None | 不使用任何 CSS 预处理器，直接编写原生 CSS。 |
| Sass/SCSS | 使用 Sass（Syntactically Awesome Style Sheets） 预处理器，提供了更丰富的功能，如变量、嵌套、混合等。Vue CLI 使用 SCSS 作为 Sass 的语法。 |
| Less | 使用 Less 预处理器，类似于 Sass，提供了类似的功能，如变量、嵌套、混合等。 |
| Stylus | 使用 Stylus 预处理器，提供了简洁的语法和强大的功能。 |
选择适合的 CSS 预处理器取决于你的个人偏好和项目需求。使用预处理器可以让你更有效地管理和组织样式代码，并提供一些额外的功能，以提高样式开发的效率。
根据你的选择，Vue CLI 将会配置项目以支持所选的预处理器，并且在项目的组件中的