vue项目快速搭建（脚手架）webpack和vite的2种搭建方式

在 Vue.js 项目中，webpack 和 vite 是两种常用的构建工具，各自有不同的脚手架工具来快速创建项目。

1. 使用 webpack 的 Vue.js 项目脚手架

Vue CLI

Vue CLI 是 Vue.js 官方的脚手架工具，默认使用 webpack 作为打包工具。它提供了一个交互式命令行界面，可以帮助你创建和配置 Vue 项目。

安装 Vue CLI:

npm install -g @vue/cli

创建项目:

vue create my-project

在创建项目时，Vue CLI 会让你选择预设或手动配置项目。如果选择手动配置，你可以选择使用的工具（如 Babel、TypeScript、ESLint 等）和选择不同的插件。

分别有3个选项代表

1.默认搭建vue3项目

2.默认搭建vue2项目

3.手动选择搭建方式

选择1和2后就会自动搭建完成，选择3后出现在后面的选择

常见特性解释

1. Babel:

   • 用于将现代 JavaScript 代码转换为兼容旧版浏览器的代码。

   • 推荐选择，尤其是在需要支持旧浏览器时。

2. TypeScript:

   • 添加 TypeScript 支持，用于静态类型检查，增强代码的健壮性。

   • 选择时机: 如果你使用 TypeScript 或计划使用。

3. Progressive Web App (PWA) Support:

   • 提供渐进式 Web 应用程序支持，使应用具备离线使用能力。

   • 选择时机: 如果你打算构建一个 PWA。

4. Router:

   • 内置的 Vue Router 用于处理单页面应用程序的路由。

   • 推荐选择，特别是构建多页面或有复杂路由的应用时。

5. Vuex:

   • 状态管理工具，用于管理应用中全局状态。

   • 推荐选择，如果你的应用有复杂的状态管理需求。

6. CSS Pre-processors:

   • 支持使用 CSS 预处理器（如 Sass、Less、Stylus）。

   • 选择时机: 如果你使用 CSS 预处理器来编写样式。

7. Linter / Formatter:

   • 提供代码质量检查和格式化工具（如 ESLint）。

   • 推荐选择，有助于保持代码风格一致性和质量。

8. Unit Testing:

   • 添加单元测试支持，用于测试组件或功能的独立部分。

   • 选择时机: 如果你打算为代码编写单元测试。

9. E2E Testing:

   • 提供端到端测试支持，用于测试应用的整个工作流程。

   • 选择时机: 如果你打算进行完整的应用功能测试。

选择搭建vue2还是vue3

• 选择 y（是）:

  • 如果你习惯面向对象编程（OOP）风格，喜欢使用类和装饰器语法来组织代码。

  • 如果你使用 TypeScript 并且希望利用类装饰器语法编写更具结构化的组件代码。

  • 这种语法在大型项目中可能更易管理，尤其是对于熟悉其他面向对象语言（如 Java 或 C#）的开发者。

• 选择 N（否）:

  • 如果你更习惯 Vue 2.x 或 Vue 3.x 的标准组合式 API 或选项式 API 语法。

  • 如果你希望避免复杂的装饰器语法，保持代码的简洁性和易读性。

  • 对于初学者或小型项目来说，标准的 options API 或 Composition API 可能更直观和易用。

在创建 Vue.js 项目时，选择是否要 “Use Babel alongside TypeScript”（与 TypeScript 一起使用 Babel）取决于你的项目需求。以下是详细解释：

选择 y（是）的情况：

• 现代模式支持: 如果你打算使用 Vue CLI 提供的“现代模式”（modern mode），Babel 是必需的，因为它会处理现代 JavaScript 的编译和降级，以确保代码在旧浏览器中也能正常运行。

• 自动检测 polyfills: Babel 会自动检测需要的 polyfill（垫片），并仅添加那些在目标浏览器环境中所需的 polyfill。这对于优化打包体积非常有用。

• 转译 JSX: 如果你打算在项目中使用 JSX（JavaScript XML），Babel 是必需的，因为它负责将 JSX 转译为 JavaScript 代码。

选择 N（否）的情况：

• 纯 TypeScript 项目: 如果你希望项目仅使用 TypeScript 编译器 (tsc) 来处理所有 TypeScript 代码，而不需要 Babel 的额外配置或特性。这样可以简化项目的构建流程，但会失去 Babel 带来的一些现代功能。

• 不需要现代模式或 JSX: 如果你的项目不需要现代模式、polyfill 自动检测或 JSX，那么单独使用 TypeScript 也完全足够。

总结

• 选择 y:

  • 如果你想使用 Vue CLI 的现代模式、自动 polyfill 检测或 JSX。

  • 如果你想要最大限度的兼容性和功能支持。

• 选择 N:

  • 如果你更倾向于保持项目简单，仅使用 TypeScript 来处理所有代码。

  • 如果你不打算使用现代模式或 JSX。

一般来说，如果你不确定是否需要 Babel 的这些功能，选择 N 可以让项目更简单，而选择 y 则提供更多的灵活性和现代特性支持。

当你在创建 Vue.js 项目时，选择是否使用 history mode（历史模式）对于项目的路由方式有很大的影响。以下是关于这个选项的详细解释：

History Mode vs. Hash Mode

1. History Mode:

   • URL 结构: 使用正常的路径，例如 /about 而不是 /#/about。

   • 服务器配置要求: 需要在生产环境中进行适当的服务器配置，以确保所有路径都指向 index.html，否则用户直接访问非根路径（如 /about）时可能会出现 404 错误。

   • SEO 友好: 更符合 RESTful 风格的 URL，对 SEO 更友好，因为没有 #。

2. Hash Mode:

   • URL 结构: 使用 # 符号分隔路由，例如 /#/about。

   • 无需额外服务器配置: 由于 # 后的部分不会发送到服务器，所以无需特别配置。

   • SEO 不友好: URL 中的 # 不太美观，且对 SEO 不友好。

选择时的考虑

• 选择 Y（是）:

  • 如果你有能力配置生产服务器来支持 history mode（比如设置 Apache、Nginx、或其他服务器来进行适当的 index fallback 配置）。

  • 如果你希望你的应用程序 URL 更加美观、符合 RESTful 风格，并且对 SEO 友好。

• 选择 n（否）:

  • 如果你不希望或无法配置服务器进行 index fallback。

  • 如果你不介意使用 # 作为路由分隔符，并且更关注快速配置和开发便利性。

选择css方式

选项解释

1. ESLint with error prevention only:

   • 这是一个最基本的配置，主要集中在防止常见的编程错误，而不对代码风格做严格限制。

   • 适合: 想要避免错误，但不希望受到风格规则的严格约束。

2. ESLint + Airbnb config:

   • 采用 Airbnb JavaScript 风格指南 的 ESLint 配置，这是一个非常流行的、广泛应用的风格指南。

   • 包含较严格的代码风格和最佳实践建议。

   • 适合: 如果你想要遵循行业标准的代码风格，并且团队熟悉或愿意适应 Airbnb 的风格指南。

3. ESLint + Standard config:

   • 使用 JavaScript Standard Style 配置，这是一种不带分号的风格指南，强调简单和一致性。

   • 规则稍微宽松，但仍保持良好的编码习惯。

   • 适合: 如果你喜欢或习惯标准的风格，不需要过多的自定义配置。

4. ESLint + Prettier:

   • 将 ESLint 与 Prettier 集成，Prettier 是一个代码格式化工具，确保代码风格的一致性。

   • 通常会关闭 ESLint 中可能与 Prettier 冲突的规则，专注于代码格式化。

   • 适合: 如果你希望自动格式化代码，并且避免风格争论，Prettier 可以很大程度上简化团队协作中的代码风格问题。

如何选择

• ESLint with error prevention only:

  • 如果你希望保持代码简单，只关心避免错误，而不对代码风格过多干涉。

• ESLint + Airbnb config:

  • 如果你希望严格遵循行业标准，并且团队有遵循严谨风格的需求。

• ESLint + Standard config:

  • 如果你喜欢较宽松的代码风格，但仍希望有一个一致的标准。

• ESLint + Prettier:

  • 如果你注重代码的格式化，并希望在团队中避免代码风格的争论，Prettier 是一个很好的选择。

推荐

• 如果你想要一个强大的风格指南，ESLint + Airbnb config 是不错的选择。

• 如果你更注重代码的自动格式化，ESLint + Prettier 会是一个很好的选择。

选项解释

1. Lint on save:

   • 每次保存文件时自动运行 ESLint 检查代码。

   • 可以即时捕获并修复代码中的错误和风格问题，提高开发过程中的代码质量。

   • 适合: 你希望在开发过程中立即发现并修正问题，而无需等待到提交代码或运行手动检查时。

2. Lint and fix on commit (requires Git):

   • 在每次 Git 提交时运行 ESLint，并自动修复可修复的问题。

   • 这可以确保提交到代码库中的代码符合 lint 规则，避免将问题代码推送到远程仓库。

   • 适合: 你希望在提交代码时自动进行检查，确保提交的代码质量，并且团队使用 Git 进行版本控制。

如何选择

• Lint on save:

  • 如果你希望在每次保存文件时立即进行 lint 检查，并且在开发过程中快速修正问题，这个选项非常实用。

• Lint and fix on commit:

  • 如果你希望在提交代码时确保代码质量，并且不介意在提交过程中花费一些时间进行 lint 检查，这个选项非常有帮助，尤其是在团队合作时。

推荐

• 如果你希望提高开发效率并确保代码的一致性，建议选择 Lint on save。这会在你保存文件时自动进行 lint 检查，快速修复潜在问题。

• 如果你希望提交的代码都符合 lint 规则，建议选择 Lint and fix on commit。这可以在提交代码时自动进行检查和修复，防止不符合规范的代码进入代码库。

你可以根据自己的工作流程和团队需求选择这些选项，当然也可以同时选择两个。

一边选择第二个package.json

选择是否将当前的配置保存为预设取决于你是否计划在未来的项目中重复使用这些配置

一般选择npm的方式

二. 使用 vite 的 Vue.js 项目脚手架

Vite

Vite 是一个新一代的前端构建工具，由 Vue.js 的作者尤雨溪开发，默认支持 Vue.js 并且以更快的开发体验而著称。它非常适合构建现代化的 Vue.js 项目。

创建项目: Vite 提供了一个命令行工具 create-vite 来快速生成项目模板。

安装 Vite: 无需单独安装全局工具，你可以直接通过 npm 运行以下命令：

npm create vite@latest

然后按照提示选择项目名称、框架（选择 Vue）、以及使用的语言（JavaScript 或 TypeScript）。

或者指定项目名称和模板：

npm create vite@latest my-project --template vue

总结

• Vue CLI 适用于需要更复杂配置和插件的项目，且默认使用 webpack。

• Vite 适合需要更快构建和开发体验的项目，特别是在现代 Vue.js 项目中。