The file names are differentbootcdnIntroduce the following) :

  • The full version:vue.js
Link: https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.jsCopy the code
  • Partial version (run-time version only) :vue.runtime.js
Link: https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.runtime.jsCopy the code

The full version is larger

The full version has an additional compiler (the compiler used to compile template strings into JavaScript rendering functions), and the code is about 40% larger than the non-full version

usage

  • Use the full version, introducedvue.jsView is written inHTMLOr in thetemplate 中
new window.Vue({
  el: "#app".template: ` 
      

       {{n}} 
       
      
 `.data: {
    n: 0
  },
  methods: {add(){
      this.n += 1}}})Copy the code
  • Use the incomplete version, introducedvue.runtime.jsView is written inrender 中
new window.Vue({
  el: "#app".render(h){
    return h("div"[this.n, h("button", {on: {click: this.add}}, "+ 1")])},data: {
    n: 0
  },
  methods: {add(){
      this.n += 1}}})Copy the code

Note:

In the production environment, files with the suffix.min.js should be used for the previous two versions

.min.js is compressed out of the space, carriage return file, mainly used for the development of.js is uncompressed source code, its own format is more convenient for users to view the source codeCopy the code

Supplement:bootcdnOther methods of introduction

  • webpackIntroduction:

By default, the incomplete version is used. To use the full version, you need to configure the alias

  • @vue/cliIntroduction:

The incomplete version is used by default, and additional configuration is required to use the full version

Conclusion:

It is usually best to default to a small, incomplete version of the code and leave the compilation to vue-loader

The advantages of this option are as follows:

  1. To ensure user experience, users downloadJSFile size is smaller, but only supportedhFunction.
  2. Ensure the development experience, developers can directly invueWriting in the fileHTMLLabel, not writehFunction.
  3. Simplify the operation process,vue-loaderthevueIn the fileHTMLtohDelta function, so that we don’t have to write too much troublehThe function does the same thing as the full version
The h function is the createElement method in vueCopy the code