Vue3 安装

Key Points

• 安装 Vue3 有多种方法，包括本地开发环境设置和使用 CDN，推荐使用 create-vue 创建项目。
• 需要 Node.js 18.3 或更高版本，步骤简单，适合初学者。
• 使用 CDN 适合快速试用，但功能有限。

安装 Vue3 的步骤

准备工作
确保安装了 Node.js 18.3 或更高版本，可从 Node.js 官网 下载。

本地开发环境设置

1. 打开命令行，运行：

   npm create vue@latest

按提示选择项目选项，如是否使用 TypeScript。

2. 进入项目目录，例如：

   cd hello-world

3. 安装依赖：

   npm install

4. 启动开发服务器：

   npm run dev

浏览器会自动打开 http://localhost:5173/ 查看应用。

使用 CDN（快速试用）

• 在 HTML 中添加：

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

或使用 ES 模块：

  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  </script>

注意事项

• Vue3 不支持 IE8 及以下浏览器。
• 在中国大陆，可用 cnpm 加速下载：

  npm install -g cnpm --registry=https://registry.npm.taobao.org
  cnpm create vue@latest

---

详细调研笔记

以下是关于 Vue3 安装的全面调研，涵盖所有相关细节和背景信息，适合深入了解。

背景与方法概述

Vue3 是一种渐进式 JavaScript 框架，设计初衷是易于集成和使用。安装方式主要包括本地开发环境设置和 CDN 方式。调研发现，官方推荐使用 create-vue 创建项目，基于 Vite 工具，适合现代开发需求。而 CDN 方式适合快速原型或简单测试。

从多个中文教程和官方文档来看，安装步骤清晰，但在中国大陆用户可能面临网络速度问题，因此 cnpm 被广泛推荐作为 npm 的镜像加速工具。

详细安装步骤

1. 准备工作：Node.js 安装

• 要求 Node.js 版本为 18.3 或更高，确保系统环境支持 Vue3 的最新特性。
• 下载地址：Node.js 官网。
• 可通过命令 node -v 检查版本。

2. 本地开发环境设置（推荐）

使用 create-vue 创建项目是当前最佳实践，步骤如下：

• 运行命令：

  npm create vue@latest

系统会提示选择项目名称、是否使用 TypeScript、Babel、ESLint 等选项，按需选择。

• 进入项目目录，例如：

  cd <项目名称>

• 安装依赖：

  npm install

如果在中国大陆，建议使用 cnpm 加速：

  cnpm install

• 启动开发服务器：

  npm run dev

浏览器会自动打开 http://localhost:5173/，显示 Vue3 应用。

3. CDN 方式（快速试用）

CDN 适合无需构建步骤的场景，分为三种：

• 全局构建：
  在 HTML 中添加：

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

所有 Vue API 挂载在全局 Vue 对象上，适合简单示例。

• ES 模块构建：
  使用现代浏览器支持的 ES 模块：

  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    // 你的代码
  </script>

需要浏览器支持 ES 模块。

• Import Maps：
  如果浏览器支持 import maps（如 Safari 16.4+），可简化导入：

  <script type="importmap">
    {"imports":{"vue":"https://unpkg.com/vue@3/dist/vue.esm-browser.js"}}
  </script>
  <script type="module">
    import { createApp } from 'vue'
    // 你的代码
  </script>

4. 中国大陆用户优化

由于 npm 官方源速度可能较慢，推荐使用 cnpm：

• 安装 cnpm：

  npm install -g cnpm --registry=https://registry.npm.taobao.org

• 替换命令，例如：

  cnpm create vue@latest
  cnpm install

• 参考：使用淘宝 NPM 镜像。

技术细节与对比

以下表格总结不同安装方法的优缺点：

方法	优点	缺点	适用场景
本地开发（create-vue）	功能完整，支持 SFC，适合大型项目	需要 Node.js，步骤稍复杂	正式开发，团队协作
CDN 全局构建	无需构建，简单快速	功能受限，不能用 SFC	快速原型，教学演示
CDN ES 模块	支持模块化，现代浏览器	需浏览器支持 ES 模块	简单网页，浏览器测试
CDN Import Maps	导入更简洁，浏览器支持较新	浏览器兼容性有限（如 Safari 16.4+）	现代浏览器环境，简化开发

注意事项与限制

• Vue3 不支持 IE8 及以下版本，需注意浏览器兼容性。
• create-vue 使用 Vite 作为构建工具，相比传统 Webpack 启动更快。
• CDN 方式不适合生产环境，建议仅用于学习或测试。

参考资料与社区资源

调研中发现，菜鸟教程和 CSDN 提供了丰富的中文讲解，适合初学者。官方文档则更权威，适合深入研究。以下是关键资源：

• 菜鸟教程提供了详细的安装步骤，包括独立版本、CDN 和 NPM 方法，内容全面：Vue3 安装 | 菜鸟教程。
• CSDN 博客也有图文教程，适合中国开发者：Vue3 安装与配置 详细教程-CSDN 博客。
• 官方文档快速上手指南是最佳参考：快速上手 | Vue.js。

结论

综合来看，推荐初学者使用 create-vue 创建项目，步骤清晰，功能强大。而 CDN 方式适合快速试用，需根据实际需求选择。针对中国用户，cnpm 可显著提升安装速度，值得尝试。

Key Citations

• Vue3 安装 | 菜鸟教程 [https://www.runoob.com/vue3/vue3-install.html]
• Vue3 安装与配置 详细教程-CSDN 博客 [https://blog.csdn.net/majingbobo/article/details/134034891]
• 快速上手 | Vue.js [https://cn.vuejs.org/guide/quick-start]
• Node.js 官网 [https://nodejs.org/]