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，具有很强的类型支持。
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。
例子：
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。- 这种模式适合不需要额外配置服务器的情况，尤其在开发过程中，或者没有控制生产环境服务器时。
