Vue 3初始化工程

安装node.js20

npm install -g @vue/cli

检查版本需要三个都在

vue create vue_demo

Babel：将 ES6+ 的 JavaScript 转换为旧版浏览器支持的代码，保证兼容性。

TypeScript：提供静态类型检查，增强代码的可维护性，适合大型项目和团队开发。

PWA Support：支持开发渐进式网页应用（离线功能、安装到桌面等），适合需要离线使用的移动端应用。

Router：用于管理应用中的页面导航，适合单页应用（SPA）。

Vuex：集中式状态管理，适用于需要多个组件共享状态的复杂应用。

Linter/Formatter：代码格式化和检查工具，保持代码一致性和质量。

Unit Testing：单元测试，用于自动化测试代码的功能。

E2E Testing：端到端测试，模拟用户操作测试应用的整体功能。

--- Tips: 如果你在初始设置时没有选择某些功能，之后仍然可以通过以下方式来添加或修改：

安装缺少的功能 ：用 npm install 安装需要的包（如 vuex）。

使用 vue add 添加插件 ：如 vue add vuex。

修改配置文件：手动编辑项目中的配置文件。

不过，像 TypeScript 这样的功能一旦选择，就不容易撤回。

在 Vue CLI 的初始化过程中，Use class-style component syntax? 这个选项是询问你是否使用 类式组件语法 来编写 Vue 组件。你可以根据以下两种方式来决定是否启用它：

1. 类式组件语法（Class-style components）

如果你选择 y，表示你希望使用类式语法来定义 Vue 组件，类似于传统的面向对象编程语言中的类。
这种方式使用 ES6 类语法，并结合 TypeScript，具有很强的类型支持。

javascript 复制代码

import { Vue, Component } from 'vue-property-decorator'

@Component
export default class HelloWorld extends Vue {
  message: string = 'Hello, Vue with Class!'

  mounted() {
    console.log(this.message)
  }
}

这种方式的好处是，你可以直接使用类的特性，如继承、装饰器等，并且对于习惯面向对象编程的开发者来说，类式组件语法更加直观。

2. 传统的选项式组件语法（Options API）

如果你选择 N（即不使用类式组件），你将使用传统的选项式语法（Options API）来编写 Vue 组件，这种方式是 Vue 中最常见的组件定义方式，适用于 Vue 2 和 Vue 3。

例子：

javascript 复制代码

import { defineComponent } from 'vue'

export default defineComponent({
  name: 'HelloWorld',
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  mounted() {
    console.log(this.message)
  }
})

这种方式更加简洁，不需要类的语法，使用选项式（如 data、methods、computed）来定义组件。

总结：

如果你习惯面向对象编程或希望使用类的特性，可以选择 y 启用类式组件语法。
如果你更倾向于 Vue 官方推荐的传统方式（尤其是 Vue 3 推荐使用 Composition API），可以选择 N。

大多数开发者在 Vue 3 中选择不使用类式组件语法，而是使用 Composition API 和传统的选项式组件。

Use history mode for router 这个选项是关于 Vue Router 配置的，具体含义如下：

History 模式

选择 Y （启用 history 模式）：这意味着你将使用 HTML5 的 History API 来管理路由。

在 history 模式 下，URL 不会再包含 #，例如：

http://localhost:8080/home（无 #）。

这种模式让你的 URL 看起来更像传统的网站路径，且有更好的 SEO 支持。

需要注意：

生产环境服务器配置 ：为了让 history 模式正常工作，你需要确保服务器在处理未知路径时，能够返回应用的入口 HTML 文件。否则，刷新页面或直接访问某个路径时，服务器可能找不到该路由。

例如，若用户直接访问 http://localhost:8080/about，服务器必须知道如何处理这个请求，并返回正确的 HTML 页面，而不是 404 错误。

大多数现代服务器（如 Nginx、Apache）都可以配置一个通用的 index.html，来处理这种情况。

Hash 模式

选择 n （使用 hash 模式）：这种模式使用 URL 中的 # 符号（如 http://localhost:8080/#/home）。

由于浏览器不会向服务器发送 # 后面的部分，因此刷新页面时不会出现 404 错误。这是因为服务器只会收到根路径请求，并始终返回 index.html。

这种模式适合不需要额外配置服务器的情况，尤其在开发过程中，或者没有控制生产环境服务器时。