Understanding of index.html, main.js and app.vue in vue

First come a demo

Speaking of the Vue project, we don't need to use too much. Of course, there are many very important things in it. Before we talk about the topic, let's look at a DEMO (create a new html and directly introduce vue).

	let contnet = Vue.extend({
    
    
        template: `<p>我就是{
     
     {name}}，如何？</p>`,
        data: function () {
    
    
            return {
    
    
                name: '秦始皇'
            }
        }
    })
    let vm = new contnet()
    vm.$mount('#box')

	<div id="box">
		{
   
   {name}}
	</div>

Does the above code look familiar? That's right! This is what you use in index.html and main.js in the scaffolding. After running the above code, you will find that your browser has rendered "

I’m asking Shi Huang, how about? ".

We can understand the label "id=box" as the root. We just mount the instance object we created into our box, and then parse it through the $mOUn-Tsquaremethodintorowssolutionanalysis,fromtheshadingdyeoutto.(Egifacorrectknot$ students can mount realization of the principle of self-Baidu, VUE in when it comes to rendering, ultimately inseparable from the template, render, creatElement, that's it. Many things need to be considered merely an intermediate processing difficulty is, these need to be addressed When looking at things, it is recommended to look at the whole part first, then disassemble it, and then Baidu if you don’t understand. If Baidu doesn’t come out, write a demo experiment by yourself. The way of personal learning is like this)

All the codes are as follows:

main.js, app.vue in index.html and src files

If you can understand the above DEMO, I think the index.html and main.js created by the scaffolding should be familiar to you, right? just look at the picture!

1. Let's take a look at index.html first, there is not much in it, it is also the html we are familiar with, there is only one div tag with the ID app . If you are doing responsive or mobile students, your meta should still be added to it. If you ask this is a single page project, what should you do if you have multiple titles? ? So, guess (don’t mention this first, it’s 12 o’clock in the morning.. Let’s start with the topic, the subsequent routing part can almost meet all your needs.)?

2. Let's take a look at the main.js file again. This file is the main entry file of js in vue-cli. Almost all your JS will be imported through it. In addition to a bunch of import items above, there is also a news item called Vue.config.productionTip = false. The focus is on the new Vue below. We can see that:

new Vue({
    
    
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Our vue instance is directly hung on #app , router is the routing part, routing controls each page component, store is not mentioned for the time being, the render function enters the parameter as the component App, let’s look at the above import as follows:

import App from './App.vue'

The render function receives three parameters and returns a virtual node, which is what we need to render. (For detailed principles, please refer to relevant information, there are many things, so I won't talk about it.)

In our new vue instance, there are already APP components as input parameters, which are returned after processing by the render function, and then rendered into the "id=box" div in our index.html through $mount.

Looking at APP.vue again, we usually understand it as the root component, and all components are its child components. The router-view component is used in the root component, and all components matched in the route will be rendered through it.

Well, the functions of these three files are basically finished. How to contact is roughly as described above. (If there is something wrong, you can bring it up, I will correct it seriously, thank you, I originally planned to solve the directory structure and routing part today, think about this basic thing, you have to know it, let’s talk about it first. The next section will talk about the part of the project officially created.)

Digression: template and render functions

Both of these are used to render dom nodes, but the template is first converted to an ast syntax tree, and the ast syntax tree is converted to a render function, because the render function returns a virtual node, which in turn passes path and dom diff Algorithm to generate real dom nodes. If you like the detailed part, please refer to Baidu for the specific implementation principle.