Install


Directory

  • Vue Devtools

  • Use directly <script> Introduction

    • ##CDN

  • ##NPM

  • Command line tools

  • Explanation of different builds

    • Terminology

    • Runtime compiler vs. runtime only

    • Development environment vs. Production environment mode

    • CSP environment

  • Development version

  • Bower

    • ##AMD Module Loader


##Compatibility

Vue does not support
IE8 and below because Vue uses ECMAScript 5 features that IE8 cannot emulate. But it supports all

ECMAScript 5 compatible browsers

.


Change log

Latest stable version: 2.6.10Every See

GitHub

for the version update log.


Vue Devtools

When using Vue, we recommend Install Vue Devtools

on it. It allows you to review and debug Vue applications in a more user-friendly interface.


## Directly use
<script>

to introduce

Download directly and import it with the <script> tag,

Vue
will be registered as a global variable.

Do not use the compressed version in a development environment, otherwise you will lose all warnings about common errors!

Development version

Contains full warning and debug modes

Production versionRemoved warning, 33.30KB min gzip


##CDN

For prototyping or learning, you can use the latest version like this: 

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

For production environments, we recommend linking to an explicit version number and build file to avoid new versions Unexpected damage caused: 

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

If you use native ES Modules, there is also a build file compatible with ES Module: 

<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.esm.browser.js'
</script>

You can download it at

cdn.jsdelivr.net/ npm/vue Browse the source code of NPM packages.

Vue can also be obtained on

unpkg and cdnjs (the version update of cdnjs may be slightly lagging behind).

Please make sure to understand

different build versions and use the production environment version in the site you publish, replace vue.js with vue.min.js. This is a smaller build that allows for a much faster speed experience than the development environment.


NPM

##It is recommended to use NPM installation when building large applications with Vue

[1]. NPM works well with module bundlers such as webpack or Browserify. At the same time, Vue also provides supporting tools to develop single file components. 

# 最新稳定版
$ npm install vue


Command line tool (CLI)

Vue provides a
Official CLI

, quickly build complex scaffolding for single page applications (SPA). It provides batteries-included build settings for modern front-end workflows. It only takes a few minutes to be up and running and comes with hot reload, lint checking on save, and a production-ready build. For more details, please refer to the documentation of Vue CLI.

CLI tools assume that users have a certain level of understanding of Node.js and related build tools. If you are new to Vue, we strongly recommend reading through the Guide without a build tool first, and then getting familiar with Vue itself before using the CLI.


##Explanation of different build versions

In

NPM You will find many different Vue.js builds in the dist/ directory of the package. The differences between them are listed here:

CommonJSES Module (Based on the build tool)ES Module (directly used in the browser)Full versionvue.common.jsvue.esm.jsvue.esm.browser.jsOnly contains the runtime versionvue.runtime.common.jsvue.runtime.esm. js-Full version (production environment)- -vue.esm.browser.min.jsOnly contains the runtime version (production environment)---


Terms


#Runtime compiler vs. runtime only If you need to compile the template on the client side (such as passing a string to the

template

option, or mounting it on an element and using the HTML inside its DOM as a template), you will need to add On the compiler, that is, the full version: 

// 需要编译器
new Vue({
  template: '<div>{{ hi }}</div>'
})
// 不需要编译器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})
When using

vue-loader

or vueify, the template inside the *.vue file Will be precompiled into JavaScript at build time. You don't actually need a compiler in the final package, so just use the runtime version.

Because the runtime version is about 30% smaller than the full version, this version should be used whenever possible. If you still want to use the full version, you need to configure an alias in the packaging tool:

webpack

module.exports = {  // ...
  resolve: {    alias: {      'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
    }
  }
}

Rollup

const alias = require('rollup-plugin-alias')

rollup({  // ...
  plugins: [
    alias({      'vue': require.resolve('vue/dist/vue.esm.js')
    })
  ]
})

Browserify

Add to your project’s package.json: 

{  // ...
  "browser": {    "vue": "vue/dist/vue.common.js"
  }
}

Parcel

Add in your project's package.json: 

{  // ...
  "alias": {    "vue" : "./node_modules/vue/dist/vue.common.js"
  }
}


##Development environment vs. Production environment mode

For the UMD version, the development environment/production environment mode is hard-coded: use uncompressed code in the development environment, and use compressed code in the production environment.

CommonJS and ES Module versions are for packaging tools, so we do not provide minified versions. You need to compress the final package yourself.

CommonJS and ES Module versions also retain the original

process.env.NODE_ENV instrumentation to determine what mode they should run in. You should replace these environment variables with the appropriate packaging tool configuration to control the mode in which Vue is run. Replacing process.env.NODE_ENV with a string literal also allows compression tools like UglifyJS to completely discard development environment-only code blocks to reduce the final file size.

webpack

In webpack 4, you can use the

mode option: 

module.exports = {
  mode: 'production'
}

But in webpack 3 and above In lower versions, you need to use

DefinePlugin:

var webpack = require('webpack')

module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    })
  ]
}

Rollup

Use

rollup-plugin-replace:

const replace = require('rollup-plugin-replace')
rollup({
  // ...
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
}).then(...)

Browserify

Apply a global

envify transformation to your package. 

NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js

You can also move to

production environment deployment.


CSP Environment

Some environments, such as Google Chrome Apps, will force the application of Content Security Policy ( CSP), expressions cannot be evaluated using

new Function(). In this case the CSP compatible version can be used. The full version relies on this feature to compile templates, so it cannot be used in these environments.

On the other hand, the runtime version is fully CSP compatible. When built via

webpack vue-loader or Browserify vueify, the template will be precompiled into a render function that can run perfectly in a CSP environment.


Development version

Important: The /dist folder of the GitHub repository is only available in the new It will be submitted when the version is released. If you want to use the latest source code of Vue on GitHub, you need to build it yourself! 

git clone https://github.com/vuejs/vue.git node_modules/vue
cd node_modules/vue
npm install
npm run build


Bower

Bower is only available in UMD version. 

# 最新稳定版本
$ bower install vue


AMD Module Loader

All UMD versions can be directly Used as AMD module.


Translator’s Note
[1] For users in mainland China, it is recommended to set the NPM source to domestic mirror , which can greatly improve the installation speed.


→

php.cn

HomeHomeCourseCourseArticleArticleQ&AQ&ADictionaryDictionaryManualManualDownloadDownloadsearchsearchAPPDownload APPDownload
##UMD
vue.js
vue.runtime.js
vue.min.js
vue.runtime.min.js