Vue.js 安装

直接用 script 引入

直接下载并用 script 标签引入,Vue 会被注册为一个全局变量

在开发环境下不要使用压缩版本,不然你就失去了所有常见错误相关的警告!

 

CDN引入

对于开发原型或学习,可以这样使用最新版本:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

对于生产环境,我们推荐链接到一个明确的版本号和构建文件,以避免新版本造成的不可预期的破坏:

国内CDN:

<script src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script>

国外CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js"></script>

如果你使用原生 ES Modules,这里也有一个兼容 ES Module 的构建文件:

<script type="module">

  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.esm.browser.js'

</script>

你可以在 cdn.jsdelivr.net/npm/vue 浏览 NPM 包的源代码。

Vue 也可以在 unpkgcdnjs 上获取 (cdnjs 的版本更新可能略滞后)。

请确认了解不同构建版本并在你发布的站点中使用生产环境版本,把 vue.js 换成 vue.min.js。这是一个更小的构建,可以带来比开发环境下更快的速度体验。

 

NPM、CNPM、YARN等命令安装

在用 Vue 构建大型应用时推荐使用 NPM 安装[1]。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

由于 npm 安装速度慢,本教程使用了淘宝的镜像及其命令 cnpm

安装cnpm

npm install cnpm -g

安装vue

npm install vue

 

命令行工具 (CLI)

Vue 提供了一个官方的 CLI,为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验,以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档。

# 全局安装 vue-cli

$ cnpm install vue-cli

# 创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

# 这里需要进行一些配置,默认回车即可

This will install Vue 2.x version of the template.

 

For Vue 1.x use: vue init webpack#1.0 my-project

 

? Project name my-project

? Project description A Vue.js project

? Author 21yi <test@21yi.com>

? Vue build standalone

? Use ESLint to lint your code? Yes

? Pick an ESLint preset Standard

? Setup unit tests with Karma + Mocha? Yes

? Setup e2e tests with Nightwatch? Yes

 

vue-cli · Generated "21yi-project".

 

To get started:

 

 cd my-project

 npm install

 npm run dev

 

Documentation can be found at https://vuejs-templates.github.io/webpack

进入项目,安装并运行:

$ cd my-project

$ cnpm install

$ cnpm run dev

 DONE  Compiled successfully in 33688ms

 

> Listening at http://localhost:8080

 

对不同构建版本

 

  UMD CommonJS ES Module (基于构建工具使用) ES Module (直接用于浏览器)
完整版 vue.js vue.common.js vue.esm.js vue.esm.browser.js
只包含运行时版 vue.runtime.js vue.runtime.common.js vue.runtime.esm.js -
完整版 (生产环境) vue.min.js - - vue.esm.browser.min.js
只包含运行时版 (生产环境) vue.runtime.min.js - - -