Vue.js2.0是目前国内使用最广泛的前端框架之一，虽然官方已经推出Vue3，但大量的存量项目和教程仍然基于2.0版本，学习成本也更友好。不过不少新人在最开始的环境搭建阶段就被劝退了：有人下载到了Vue3的文件，有人npm装错了包，还有人被vue-cli的版本搞得晕头转向。这篇文章就把Vue.js2.0的几种安装方式逐一拆解，告诉你每种方式适合什么场景、具体怎么做、有哪些坑要避开。
方式一：直接下载并引入script标签，最适合新手入门
这是最简单粗暴的方式，也最推荐零基础的人先用它。到Vue的官方发布页面下载2.x版本的vue.js文件，注意要认准版本号，2.x系列目前最稳定的是2.6.x和2.7.x。下载下来一般有两个文件：vue.js和vue.min.js，前者是完整开发版，带控制台警告和调试信息，体积大一些；后者是压缩后的生产版本，体积小但没有调试提示。
学习阶段务必用完整版，因为你写错了代码时，浏览器控制台会给出非常清晰的中文提示，比如提醒你某个变量没有定义、某个生命周期钩子拼写错误，这对排查问题帮助极大。引入方式就是在HTML页面的<head>或者<body>末尾加一个<script>标签：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Vue2 入门示例</title>
<!-- 开发环境引入完整版，便于调试 -->
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">{{ message }}</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue 2.0'
}
});
</script>
</body>
</html>打开浏览器如果页面显示出Hello Vue 2.0，说明环境搭建成功。这种方式不依赖Node.js，不需要命令行操作，一个文本编辑器加浏览器就能跑起来，非常适合写小demo和理解框架的基本概念。它的缺点也很明显：没有组件化、没有单文件组件（.vue文件）、没有热更新，项目一旦变大就难以维护，所以正式项目不要用这种方式。
方式二：CDN引入，轻量页面的快速方案
如果你不想下载文件到本地，或者只是想在已有的多页面项目中局部使用Vue，CDN引入是很好的选择。直接在页面中引用公开的CDN地址即可，常用的有unpkg、jsdelivr以及国内的静态资源库。示例如下：
<!-- 引入Vue 2.6.x 的开发版本 --> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <!-- 生产环境使用压缩版本 --> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js"></script>
这里要重点提一个坑：URL中的vue@2.6.14这种写法明确锁定了版本号，是比较安全的做法。千万不要写成vue不加版本号，这样会默认拉取最新版本，而最新版本现在是Vue3，它不兼容new Vue()这种2.0的写法，页面会直接报错。这是新手最高频的翻车点之一。
CDN方式的优点是零安装、加载快、可以充分利用浏览器缓存；缺点是依赖网络环境，如果CDN节点不稳定页面就会白屏。在国内使用时建议优先选择jsdelivr或者国内的CDN源，稳定性更有保障。另外生产环境的项目要做好兜底方案，比如检测window.Vue是否存在，不存在时给出友好提示。
方式三：npm配合vue-cli脚手架搭建工程项目
这是正式开发的标准姿势。这种方式能获得单文件组件、路由、状态管理、热更新、打包构建等完整工程化能力。前提条件是先安装Node.js，建议选择LTS长期支持版本，安装完成后在命令行验证：
# 检查node和npm是否安装成功 node -v npm -v # 安装vue-cli 3.x/4.x 脚手架（Vue2项目的推荐工具） npm install -g @vue/cli # 查看版本确认安装成功 vue --version
这里有一个非常关键的历史遗留问题需要说清楚：vue-cli其实分两代。老的一代包名是vue-cli，对应的安装命令是npm install -g vue-cli，它基于webpack 3，创建项目用vue init webpack 项目名；新的一代包名是@vue/cli，注意前面有个@符号，创建项目用vue create 项目名。两代命令不能混用，如果你机器上同时装过这两个包，会出现命令冲突。如果遇到奇怪报错，先执行npm uninstall -g vue-cli把老版本卸载干净，再安装新的。
装好脚手架后创建项目：
# 创建项目 vue create my-vue2-project # 在交互菜单中手动选择配置， # 如果vue版本选项里有Vue 3的提示，注意选择Vue 2 # 也可以直接指定使用vue2的预设 vue create my-vue2-project --preset vue-2-preset
在交互式菜单中，default预设会自动根据脚手架版本选择Vue版本。想确保项目是Vue2，最稳妥的办法是在Manually select features里自己勾选特性，然后在Vue version一步明确选择2.x。项目创建完成后，进入目录执行npm run serve启动开发服务器，浏览器访问localhost:8080看到欢迎页就大功告成了。
安装过程中的常见坑与避坑建议
第一，版本混淆是头号大坑。不管用哪种安装方式，都要确认拿到的是2.x版本。npm方式下安装依赖时，可以执行npm list vue查看实际安装的版本，package.json中应显示类似"vue": "^2.6.14"的记录。如果发现装成了3.x，执行npm install vue@2.6.14 --save降级即可。
第二，npm下载慢的问题。默认源在国外，下载依赖经常卡住。建议切换到国内镜像源，执行npm config set registry https://registry.npmmirror.com即可，下载速度会有质的提升。注意这个地址中包含敏感符号，直接复制命令到终端执行就行，不要手动敲。
第三，Node.js版本不要过高或过低。Vue2项目配合较新的webpack时，Node版本太老会报语法错误；而个别老旧的vue-cli 2.x模板在过高版本的Node上也会出问题。一般来说，Node 14到Node 16是跑Vue2项目比较稳妥的版本区间，遇到莫名其妙的构建报错时，优先检查Node版本。
第四，权限问题。Mac和Linux下全局安装脚手架时如果报permission denied，不要直接用sudo，更推荐修改npm的全局安装目录到用户目录下，避免后续各种权限后遗症。Windows用户则要注意命令行用管理员身份运行，以及路径中尽量不要包含中文和空格，否则脚手架创建项目时可能出错。
第五，devtools的版本匹配。浏览器装Vue Devtools调试工具时，也要确认它能支持Vue2。新版devtools对Vue3做了适配，老版本项目可能提示检测不到Vue，换用对应支持Vue2的扩展版本就能解决。
三种方式怎么选，一张表说清楚
最后把三种方式做个横向对比，方便你按需选择：
| 安装方式 | 适用场景 | 是否需要Node.js | 工程化能力 |
|---|---|---|---|
| 本地文件引入 | 学习入门、小demo、离线环境 | 不需要 | 无 |
| CDN引入 | 轻量页面、传统多页面项目局部增强 | 不需要 | 无 |
| vue-cli脚手架 | 正式项目、单页应用、需要组件化开发 | 需要 | 完整 |
总结一下建议的路径：刚接触Vue.js2.0时，先用本地文件引入的方式把基础语法练熟；理解了数据绑定、组件、生命周期这些核心概念之后，再过渡到vue-cli脚手架做完整项目。CDN方式则作为特定场景下的补充手段。安装环节看起来繁琐，但只要锁定好版本、选对工具，一次性配好环境并不难。建议把这篇文章收藏起来，装环境时对照着一步步来，遇到报错也能快速定位原因。
Vue.js2.0安装vue-cli脚手架CDN引入修改时间：2026-09-06 05:46:38