主流JavaScript库官网地址：Vue、React与jQuery下载入口

三大主流库官方入口与下载渠道速查

前端开发库的获取方式通常分为两类：一是直接下载单文件静态脚本（适用于传统多页项目或无打包流程的原型测试），二是通过 Node.js 生态的包管理器（npm、pnpm、yarn）安装并在工程化构建工具中引用。以下是三大库经过核实的官方核心入口：

在选择获取途径时，需结合项目架构决定。单脚本文件直接引入无需配置任何构建工具，开箱即用；而包管理器则适合拥有组件拆分、TypeScript 检查与打包压缩需求的复杂工程。

jQuery 官方下载与本地引入操作步骤

jQuery 自 2006 年发布以来，一直保持着完善的单脚本分发机制。官方下载专区（https://jquery.com/download/）明确划分了生产环境版本与开发环境版本：

• Compressed（压缩生产版）：文件名通常为 jquery-3.x.x.min.js。该版本移除了所有代码换行、缩进及源码注释，并将内部变量简写压缩，文件体积最小，网页加载速度最快，专门供正式生产环境部署使用。
• Uncompressed（未压缩开发版）：文件名通常为 jquery-3.x.x.js。保留了全部原始代码、函数排版和详细注释，体积较大，便于开发者阅读底层实现、单步断点调试或学习源码。

具体下载与本地引入步骤

1. 进入官方下载页面：在浏览器地址栏输入 https://jquery.com/download/ 打开页面。
2. 保存脚本到本地：在页面中找到形如 Download the compressed, production jQuery 3.7.1 的链接。在链接上点击鼠标右键，选择“链接另存为...”（Windows 快捷键为右键后按 K 或保存文件，Mac 下按快捷键保存），将文件保存至本地。
3. 放入项目静态资源目录：在项目的根目录下创建 js 文件夹，将下载得到的 jquery-3.7.1.min.js 放置于该目录中。
4. 在 HTML 中引入并验证：编写基础 HTML 文件，在 </body> 结束标签之前添加 <script> 标签。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>jQuery 引入测试</title>
</head>
<body>
  <h1 id="title">页面加载中...</h1>

  <!-- 引入本地下载的 jQuery 生产版 -->
  <script src="js/jquery-3.7.1.min.js"></script>
  <script>
    // 验证 jQuery 是否成功挂载到全局 window 对象
    if (typeof jQuery !== 'undefined') {
      $('#title').text('jQuery 引入成功！当前版本：' + $.fn.jquery);
      console.log('jQuery 状态正常，全局对象已就绪。');
    } else {
      console.error('jQuery 引入失败，请检查文件相对路径是否正确。');
    }
  </script>
</body>
</html>

Vue 与 React 现代工程化安装与构建链路

与经典 jQuery 主要通过单文件直接操控 DOM 不同，Vue 3 与 React 18+ 依托于现代组件化与编译构建体系。虽然它们也提供独立编译文件，但官方明确推荐使用 Node.js 包管理器及脚手架搭建项目，原因在于：

• 单文件组件与 JSX 转换：Vue 的 .vue 文件与 React 的 .jsx / .tsx 语法需在编译阶段通过编译器转为标准 JavaScript，浏览器原生并不直接识别。
• 类型检查与自动化优化：工程化流程提供开箱即用的 TypeScript 支持、按需引入（Tree-shaking）及代码压缩分割。

1. Vue 官方安装与脚手架搭建

Vue 官方团队维护的最新脚手架工具是 create-vue。在安装了 Node.js（推荐 18.x 或更高 LTS 版本）的环境中，打开终端执行以下命令：

# 使用官方推荐脚手架创建 Vue 3 项目
npm create vue@latest

# 依次根据交互提示选择项目名、TypeScript、Vue Router、Pinia 等选项
# 创建完成后进入项目目录并安装依赖
cd your-vue-project
npm install

# 启动本地热重载开发服务器
npm run dev

如果仅想在单独的 HTML 页面中快速体验 Vue 3 的响应式能力，亦可直接使用官方编译的独立构建包：

<!-- Vue 3 独立全局构建包引入 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">{{ message }}</div>

<script>
  const { createApp, ref } = Vue;
  createApp({
    setup() {
      const message = ref('Vue 3 单文件引入成功！');
      return { message };
    }
  }).mount('#app');
</script>

2. React 官方安装与现代启动方案

React 官方主页现已全面改版为 react.dev（中文站：zh-hans.react.dev）。官方已不再推荐使用早期的 create-react-app，而是推荐基于 Vite 或现代元框架（如 Next.js、Remix）启动项目：

# 方案 A：使用 Vite 搭建纯客户端单页应用（快速、轻量）
npm create vite@latest my-react-app -- --template react

# 进入目录并安装 react 与 react-dom
cd my-react-app
npm install

# 启动开发服务器
npm run dev

在已有项目中单独引入 React 核心库与 DOM 渲染器，可执行：

npm install react react-dom

官方入口辨别与下载安全核对规范

随着前端开源生态的普及，网络上常出现一些第三方镜像站、旧版归档站或非官方聚合下载站。为了防止引入被恶意篡改的脚本，建议在下载和引入代码时严格遵循以下安全核对原则：

1. 核对官方顶级域名： Vue 官方域名为 vuejs.org（中文文档为 cn.vuejs.org）； React 官方新域名为 react.dev（旧文档 reactjs.org 会自动重定向，中文文档为 zh-hans.react.dev）； jQuery 官方主站为 jquery.com。对于任何使用 .net、.cc 或包含额外前缀后缀的所谓“下载中心”，务必保持警惕。
2. 生产环境严禁直接引用 @latest 标签： 在通过 CDN 引用（如 unpkg、jsDelivr）时，如果将 URL 写成 unpkg.com/vue@latest，CDN 会在底层库发布新版本时自动更新。一旦底层库发生主版本升级（破坏性更新），可能直接导致线上生产项目白屏或功能中断。生产环境必须固定具体版本号（例如 unpkg.com/vue@3.4.21）。
3. 启用 SRI（子资源完整性校验）： 当依赖外部 CDN 加速节点分发 JavaScript 库时，在 HTML 的 <script> 标签中务必配置由官方或可靠工具生成的 integrity 哈希值，以便浏览器在下载脚本后对比校验。一旦内容被恶意节点注入广告或后门代码，浏览器将直接拒绝执行。

常见问题与排查方法

1. 引入 jQuery 或 Vue 后，控制台报错 $ is not defined 或 Vue is not defined

这是初学者最常遇到的问题。排查顺序如下：

• 检查引入顺序：自定义的业务脚本如果依赖 jQuery 或 Vue，必须放置在核心库脚本的后面。浏览器是按顺序自上而下解析并执行脚本的。
• 检查文件相对路径：在浏览器开发者工具的“网络”（Network）面板中查看对应的 .js 文件状态码是否为 404 Not Found。若为 404，说明 <script src="..."> 中的相对路径拼写有误。
• 注意 defer 或 async 属性：如果为核心库添加了 async，脚本将异步无序加载，可能导致后续业务代码执行时核心库尚未完成解析。

2. 官方下载页面的 .js 链接在浏览器中点击后直接显示为纯文本，无法下载怎么办？

由于浏览器默认能够识别并渲染 .js MIME 类型，直接左键单击链接时，浏览器会直接在标签页中展示源码。正确做法是：在下载链接上点击鼠标右键，在右键菜单中选择“链接另存为...”（Save Link As...），即可直接将文件保存到指定的本地硬盘目录中；或者在页面展示代码后，直接使用键盘快捷键 Ctrl + S（macOS 下为 Cmd + S）保存为 .js 文件。