Different builds

UMD CommonJS ES Module (based on build tool use) ES Module (directly for browser)
The full version vue.js vue.common.js vue.esm.js vue.esm.browser.js
Only the runtime version is included vue.runtime.js vue.runtime.common.js vue.runtime.esm.js –
Full version (production environment) vue.min.js – – vue.esm.browser.min.js
Include only the runtime version (production environment) vue.runtime.min.js – – –

Note:

  • Full version: Contains both compiler and runtime versions.
  • Compiler: Code used to compile template strings into JavaScript rendering functions.
  • Runtime: Code for creating Vue instances, rendering and processing virtual DOM, and so on. Basically everything else is stripped out of the compiler.

The full version vue. Js

Introduced the index.html

main.js

Local preview

Contains only the runtime version vue.runtime.js

Introduced the index.html

main.js

Local preview

Window.vue still prints, but the 0 is gone, because the Runtime version does not support fetching views from HTML.

Even if written in template, it is not supported

But using template is supported in the full version

If you compile a template on the client side (such as passing a string to the template option, or mounting it to an element and using HTML inside its DOM as the template), you will need to add a compiler, the full version:

// Complete version of new Vue({template: '< div > {{hi}} < / div >'}) / / no need compiler / / runtime version new Vue ({render (h) {return h (' div ', this. Hi)}})Copy the code

Delete the {{n}} div in index.html and render in main.js

Implement the +1 function

new Vue({
  el: '#app'.render(createElement){
    const h = createElement
    return h('div'[this.n,h('button', {on: {click:this.add}},'+ 1')])},data: {n:0
  },
  methods: {add(){
      this.n += 1}}})Copy the code

Vue instance

Vue instance official document

There are three ways to use Vue instances:

Method one:

The full Vue can be done by referencing vue.js or vue.min.js from the CDN, or by importing vue.js or vue.min.js

Method 2:

The runtime version vue.runtime.js

Method 3:

Write (full version), user download (runtime version)

It is possible to translate *. Vue files into h build methods using vue-loader via webpack, but doing so only has a div#app for HTML, which is SEO unfriendly

In general, the runtime version uses vue-loader or Vueify, and templates inside the *. Vue file are precompiled into JavaScript at build time. You don’t need a compiler in the final package, so just use the runtime version. In comparison, the runtime version is approximately 30% smaller than the full version.

Write a vue

use

Import Demo in main.js and specify render to #app, i.e. index.html

The Demo is printed as follows:

Vue. Loader automatically renders the template in demo.vue to the render required by the script.

Printing demo.render. ToString () confirms this statement.

This Demo is the vUE single-file component

SEO friendly

As mentioned above, method three is not SEO friendly, so what is SEO?

SEO is search engine optimization

Search engines use curl to guess the content of a page. If a page uses JAVASCRIPT to create divs, it is difficult to detect the information.

Do you want curl to get the information on your page? Do you want curl to get the information on your page?

Google can get jS-created content.

Understand the differences in depth

Vue full version Vue partial version evaluation
The characteristics of A compiler No compiler Compiler makes up 40% of the volume
view Write it in HTML or in the Template option Write the h in the render function to create the tag H is written by the author and passed to Render
Introduced the CDN vue.js vue.runtime.js The generation environment suffix is.min.js
Webpack introduced Alias needs to be configured. This version is used by default The author configuration
Introduced the @ vue/cli Additional configuration required This version is used by default The author configuration

Best practice: Use the incomplete version, then work with vue-loader and vue files

Ideas:

  1. To ensure user experience, the JS files downloaded by users are smaller in size, but only h functions are supported
  2. To ensure the development experience, developers can write HTML tags directly in vue files instead of h functions
  3. usevue-loaderConvert HTML from vue files to h functions