安装
约 677 字大约 2 分钟
2026-02-10
Vue.js 提供了多种安装方式,你可以根据项目需求选择最适合的方式。
CDN
对于快速原型开发或学习,可以直接通过 CDN 引入 Vue:
<!-- 开发版本,包含详细的警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!-- 生产版本,经过压缩且移除了警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>NPM
在生产项目中,推荐使用 NPM 安装。NPM 能很好地与诸如 webpack 或 Browserify 的模块打包器配合使用:
# 最新稳定版本
npm install vue
# 最新稳定版本(使用 yarn)
yarn add vueVue CLI
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供:
- 通过 @vue/cli 实现的交互式的项目脚手架
- 通过 @vue/cli-service 实现的零配置原型开发
- 一个运行时依赖 (@vue/component-compiler-utils)
- 开发依赖 (vue-loader 和 vue-template-compiler)
安装 Vue CLI:
npm install -g @vue/cli
# 或者
yarn global add @vue/cli创建项目:
vue create my-project
cd my-project
npm run serve构建版本
在 NPM 包的 dist/ 目录中提供了不同构建版本的 Vue.js,以下是主要版本的区别:
| UMD | CommonJS | ES Module |
|---|---|---|
| vue.js | vue.common.js | vue.esm.js |
| vue.min.js | vue.common.prod.js | vue.esm.browser.js |
| vue.esm.browser.min.js |
对于 Runtime + Compiler 和 Runtime-only
如果你需要编译模板(例如,将字符串模板传递给 template 选项,或挂载到元素上并将其内部 HTML 作为模板),你需要编译器,因此需要使用:
// 完整版本,包含编译器
import Vue from 'vue/dist/vue'如果你使用的是构建工具链(如 webpack + vue-loader 或 Browserify + vueify),那么在构建过程中,组件内部的模板会被预编译成 JavaScript。这使得你可以使用 runtime-only 版本,因为运行时版本体积更小:
// 运行时版本,不包含编译器
import Vue from 'vue'开发版本
如果你想使用最新的开发版本,可以直接从 GitHub 安装:
npm install github:vuejs/vue#dev浏览器支持
Vue.js 支持所有兼容 ECMAScript 5 的浏览器(IE8 及以下版本除外)。
需要注意的是,Vue.js 2.x 不支持 IE8 及以下版本,这是因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。Vue.js 2.x 支持所有现代浏览器以及 IE9+。
验证安装
安装完成后,可以通过以下方式验证 Vue 是否正确安装:
// 如果是通过 NPM 安装
import Vue from 'vue'
console.log(Vue.version) // 输出 Vue 版本号
// 或者在浏览器中
console.log(Vue.version)选择合适的安装方式取决于你的项目需求和开发环境。对于学习和快速原型开发,CDN 是最快的选择;对于生产项目,推荐使用 NPM 和构建工具。
