Vue takes notes

Vue

Read as view(/vju /), it stands for V in MVC

The V in MVC is the focus of Vue, while M and C are simplified

— Source: Hungry Man Valley

The author

Evan You, Rainy Creek University.

Graduated from Colgate University with a bachelor’s degree in Art and Art History and a MASTER’s degree in Art from Parsons School of Design. After graduation, HE worked as a UI related engineer in Google Creative Lab and later became a full-time JavaScript development engineer. Now an independent developer, living on more than 100,000 monthly donations and other sponsorship. – Non – academic front end can be good.

Github homepage, personal domain name

The main work

Vue, Vue Router, Vuex, @vue/ CLI

Vue heat comparison

Globally, Vue has half as many users as React.

The problem

Most of the people using Vue are Chinese?

Personally: Yes. Feeling Chinese is probably more than 80%

Reason :Vue’s Chinese documentation is really good

React or Vue?

Result: to learn, children to make choices

Knowledge :Vue and React are becoming more similar, especially Vue 3

Ability: If you learn one, it’s impossible not to learn the other

Order: Vue then React or React then Vue

Way to learn

Vue: English document, Chinese document

In the future, if you want to be more powerful, English is better.

Vue self-study Roadmap

Project structures,

responsive

Goal 1: Create a project that uses Vue

Install VUE – CLI first:

I like commands to reach a specific directory before global installation

Yarn Global add @vue/cli or NPM install -g@vue /cliCopy the code

After the installation is complete, you can use vue –version to check the version number to see whether the installation is successful

It can then be created using the vue create directory name

Specific steps

Some nonsense:

Method 1: Use @vue/ CLI

Search @vue/cli to go to the official website

Open the documentation, open the “Create a Project” section, and then CRM! Follow the document

- How to learn Vue systematically

Use CRM to go through all the documents!

Using the vue – cli

- This VUE learning option

Note:

If you choose wrong, please Ctrl+C interrupt and start again
Use the default options if there are no screenshots
This option is only suitable for this study. If it is a real project, please make your own choice

— Run vue create directory name step start

Please select a configuration, the default is recommended for self-study, I choose the manual selection feature here.

Up and down key move, space check CSS preprocessing, unit test. Complete the return

Others without screenshots are selected by default. The dart – sass, eslint

Run Lint at commit time to tell the code what went wrong

Use unit test scenarios

Others without screenshots are selected by default. The default file is kept separately in package.json.

Save this as a preset for future projects? (y/N) Do you want to use the previous option as the default value for future projects? If you select Y, it means that you do not need to change it, but it may change in the future. I do not know where to change it

And that worked

Start.(MAC :open.) Open the current directory and drag the project into VS

Start the terminal. Run yarn start The link is opened successfully.

You can also create a vue project directly online using codesandbox.io.

How do I use Vue instances

Use of vue.js and vue.runtime.js

Method one: Get the view from the HTML

This can be done by referring to vue.js or vue.min.js via script from bootCDN

The full Vue as described in the documentation. MVC view is not written in JS, written directly in the page, when introduced will get a global variable.

It is also possible to reference vue.js or vue.min.js via import

See the documentation section for details on the different versions

Method 2: Build the view with JS

Again look at the documentation link and use vue.runtime.js(runtime version)

As long as you go from HTML to something on the page, the full version supports it, but the runtime version does not

I’m sure the full version is nice for someone like me, but the runtime version is actually better and more independent

(Drawing illustration)

The full version takes up more code volume, and the documentation states that since the runtime version is approximately 30% smaller than the full version, this version should be used whenever possible.

The runtime version does not have compiler, so there is no way to turn HTML into nodes, but it can be translated using WebPack, using vue-Loader

Method 3: Use vue-loader

Vue files can be translated into h(createElement) build methods, single file components

An example of a single-file component:

Create a new Demo. Vue file in the SRC directory

Write HTML, Script, CSS

<template> <div class="red"> {{ n }} <button @click="add">+1</button> </div> </template> <script> export default { Return {n: 0,}; // Data () {return {n: 0,}; }, methods:{ add(){ this.n +=1 } } }; </script> // write CSS <style scoped>. } </style>Copy the code

Import it in main.js

import Demo from './Demo.vue'
new Vue({
  el: '#app',
  render(h){
    return h(Demo)
  }
});
Copy the code

But if you do that, your HTML will just have a div#app, which is empty, and it will eventually be replaced with what’s in the.vue. SEO is not friendly, and curl is followed by a bunch of JS rendered code. Can’t get the main content and related content, what to do?

SEO friendly

SEO, search engine optimization

You can think of search engines as doing nothing but curl up

Search engines use curl to guess the content of a page

Curl is stupid if you use JAVASCRIPT to create div pages

So what?

Simple. Give Curl some content

Write the title, description, keyword, H1, a well, you can see how to do taobao page source code.

Rule of thumb: Curl gets the information on your page, and SEO will work

How to make the page to the first? Enough people browse, or pay

Google can actually get jS-created content, but don’t rely on it.

Understand the differences in depth

The full version has strong function and large volume.

The run-time version is weak and small, but webpack allows you to write as if you were using the full version, but users only download the run-time version.

Use a table to see the specific differences between the two versions

	Vue full version	Vue runtime edition	evaluation
The characteristics of	A compiler	There is no compiler	Compiler makes up 30% of the volume
view	Written in HTML Or the template option	Write it in the render function, using h to create the tag	H is written by Judah and passed to Render
Introduced the CDN	vue.js	vue.runtime.js	The file name suffix is.min.js
Webpack introduced	Alias needs to be configured.	This version is used by default	Especially large configuration
Introduced the @ vue/cli	Additional configuration required	This version is used by default	Especially largeJiang HaoqunConfiguration of the

Table solution

The full version

File name: import vue. Js from CDN; Vue. Min. Js. The view can be obtained directly from HTML or template, and the compiler can change the {{}} placeholder or conditional statement into a real DOM node. The DOM node can be directly modified after modification, without compiling again, but the compiler is complicated and will occupy a certain volume

Runtime runtime version

File name: vue.runtime.js; Vue. Runtime. Min. Js. Without compiler, HTML cannot be turned into nodes. Webpack uses the ue-loader(set in YARN Build) to call the compiler to change the HTML to H (‘div’,this.n)

Best practices

Always use the runtime version, then work with vue-loader and vue files

Ideas:

To ensure user experience, the JS files downloaded by users are smaller in size, but only h functions are supported
To ensure the development experience, developers can write HTML tags directly in vue files instead of h functions
Let loader do the dirty work. Vue-loader converts HTML from vue files into H functions

What happens if you quote it wrong

-vue.js is used incorrectly as vue.runtime.js

Cannot compile HTML to view

– Vue.runtime. js is incorrectly used as vue.js

The code gets bigger because vue.js has the ability to compile HTML

Vue