Elementary parsing of projects built with vue-cli

    I've been watching vue recently, and I've seen vue for a while before. At that time, I introduced vue directly with the <script> tag, and I had some understanding of the basic concepts of vue. Now I try to build it with the tools of vue-cli, and then again Well, modern (emmm) js requires a lot of tools to build, and you have to try to use these tools if you want to understand.

    

After the tool is built, the file directory should be like this. First, there is no objection to entering index.html (since nodejs is not very familiar, so I don't know why it is index.html...)

Then I didn't find that index.js was not introduced in the file, but according to the observation, main.js is probably his js file, and then searched for main.js and found that there is a section of emmmm in   webpack.base.conf.js, but the principle is still unknown. If you want to dig deeper, do some research.

The content of mian.js is as follows

import View from 'view'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new View({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

The first sentence should mean the introduction of vue. I saw that there is a paragraph in webpack.base.conf.js

Here $ should be the meaning , we remove it

import View from 'view'

This line finds that the page is empty 

Here we need to understand the meaning of es6 import and export

Then we remove the router section.. This section will be analyzed later

here

components: { App },

It is equivalent to components in es6: { App:App },

Let's delete the code in App.vue

<template>
    <img src="./assets/logo.png">
</template>

we change 

import App2 from './App'

It is found that the page becomes blank and the components parameter becomes

components: { App:App2 },

It is found that the page is normal again. It is inferred that App2 in the component is the name after import.

About the last

template: '<App/>'

 I found that it must be the same as the first one of { App:App2 } and the format must be <***/> to find the template file. If it is other, the template will be output directly

The above is about the low-level parsing of vue. I found that many files are automatically loaded, and I am not very clear about the rules. I will study them later.

emmmm now look at the router again