In-depth understanding of Vue full and incomplete versions

Understand the differences in depth

Vue full version

Vue Incomplete version (run version)

The characteristics of

The “full version” has compiler, while the “incomplete version” does not

• Compiler, which has the function of compiling HTML, which is very complex and takes up space
• As a result, the “complete” version is 40% larger than the “incomplete” version

view

Let’s say I want to write a button

• Using the “full version” button can be written in HTML or in the Template option

• Use the “incomplete version”, which can only be written in the render function. Create the label using the h function as an argument to the render function

• H was written by Yuxi and passed to Render, so developers can get the h function.

  • Note: Since h is passed as an argument to the render function, the parameter name h can be changed arbitrarily, but the Vue documentation uses H, so it is recommended not to change and use h as the function name

The introduction of

Import through CDN

In index.html, it is introduced by the script tag

Official documentation: Introduced with the

• The file is called vue.js, which stands for “full version”
• The file name is vue.runtime.js, which stands for “incomplete version”
• If you want to deploy online (in production), you need to use a file with the suffix.min.js
  • .min.js is a smaller, uncommented, compressed version of the code
  • Vue. Min. Js and vue. Runtime. Min. Js

Introduced via Webpack

Introducing the configuration of vue with Webpack is a bit of a hassle

Introduced via WebPack, using “incomplete version” by default (this is specially configured for Rain Creek)

If you want to introduce the “full version” via Webpack, refer to it

• ⚠️ Vue installation documents, Webpack documents
• ⭕️ Webpack introduces Vue in two ways

Import through @vue/cli

Projects created through @vue/ CLI use “incomplete version” by default (this is configured by You Yuxi and Jiang Haoqun)

If you want to introduce the “full version”, refer to

• ⚠️Vue Cli Webpack document
• ⭕️ Issues: How to set alias, chainWebpack document, Vue scaffolding configure alias 📌

// vue.config.js
const path = require("path")
module.exports = {
  / / method
  chainWebpack: config= > {
    config.resolve.alias
      .set("vuehaha", path.resolve("./node_modules/vue/dist/vue.esm.js")) 
    	// Give "vue full version "a different name, "vuehaha"
  }
  / / method 2
  // configureWebpack: {
  // resolve: {
  // alias: {
  // "vuehaha": path.resolve("./node_modules/vue/dist/vue.esm.js")
  / /}
  / /}
  // }
}
Copy the code

// main.js entry file
import Vue from "vuehaha"  / / 👈 👈 👈
new Vue({
  el: "#app".// 👇 full version, you can get the view directly "from index.html" or "from template option
  template:` 
      

        {{n}} 
       +1 
      
 `.data: { n: 0 },
  methods: {
    add() { this.n += 1}}})Copy the code

​

The template and render

Always choose between template and render. If both are used together, one or the other is bound to fail

• Template is for “Vue Full Version”
  • The full version must be written as an HTML string, either to the template option or to an HTML file
• Render is used for “Vue incomplete version”
  • The non-complete version must write the render function

​

Use of Vue instances

Requirement: achieve click button plus one. The implementation of four schemes under the Demo

Plan a

CDN introduces Vue full version (vue.js or vue.min.js)

• Including the compiler, views can be retrieved directly from the HTML or template option
• Compiler: Code used to compile template strings into JavaScript rendering functions

Online sample: HTML

Online sample: template

Scheme 2

CDN introduces Vue non-complete version (vue.runtime.js or vue.runtime.min.js)

• Without a compiler, you can’t compile HTML and can only build views from JS
• Developers need to write the render function (h build method) official documentation
• The code for the h build method is very complex, so this scenario is not recommended

Online sample

Plan 3

The CDN introduces the Vue incomplete version, with the Vue Loader (official documentation) and.vue files

• Vue Loader can translate a single.vue file into an object containing the render function (h build method).
• Developers can get h functions without writing them

Vue Loader is a Loader for Webpack that allows you to write Vue components in a format called single-file Components (SFCs)

• This is what WebPack brings to the front end. It is possible to organize an object in any form (such as a.vue file), as long as it can eventually be restored to the object through a loader

Online sample

​

Optimal plan – Plan three

Best practice: Always use the incomplete version, and then work with vue-loader and.vue files

• Vue-loader loads and translates. Vue files

Specific thinking (why this is the best solution)

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. Let loader do the dirty work. Vue-loader will convert the HTML written by the developer in the. Vue file into h function

   • Developers can get h functions (via vue-loader) without writing them
   • It not only ensures the development experience, but also ensures the user experience
   • Ps: Encapsulate all the details into one (class, function, plug-in…) That’s what engineers do

​

Set up Vue project online

Normally, we would create a vue project using @vue/cli (sh: vue create XXX -demo)

But there’s another, more convenient way — codesandbox.io

CodeSandbox is an online code editor that focuses on creating Web application projects. Think of it as a browser-side sandbox environment that supports popular build templates such as create-React-app, VUe-CLI, Parcel, and more. Can be used for rapid prototyping, DEMO, Bug reduction, and more.

• To create a VUE project online, click on the Create Sandbox and select the VUE icon.
• You can download ZIP files for online projects and use them to unzip them (although you usually don’t need to download them for test demos)

prompt

Codesandbox.io can only create 50 projects after logging in

But you can create an unlimited number without logging In (mindful of clearing cookies), so Do Not Sign In (😉)