脚手架初始化Vue项目中都有啥

公司让用脚手架安装项目，并且开会教了怎么使用，但是我这人有个缺点，网课开二倍速可以看的很认真，真人讲课从来都听不进去，或者说刚听懂了一点就要跑神，缓过来劲的时候已经又听不懂了
这使得我最初的学习方式只能通过黑马的网课，网课讲的是循序渐进的，所以导致很长一段时间以来都在两股知识中产生了自我精神分裂
分裂的起源就是因为我看不懂脚手架项目最开始自动生成的那一部分代码，所以这个周末我盯着看了很久才癔症过来为什么脚手架安装的VUE项目这么难以理解——因为名字叫app的玩意儿实在太多了！

chapter1
故事的缘起还是从一个index.html的body中引入了一个id="app"的div开始
<div id="app"></div>
随后，我们在main.js中，简单的导包之后，真正的主角Vue登场

import Vue from 'vue'
new Vue({})

在这个构造函数new Vue()中，el是这个Vue实例挂载的对象，也就是刚刚的div盒子
el: '#app',
这边就此告一段落

chapter2
如果说刚刚的VUE是万物之源的话，现在创建的是组件之源，最大的也是第一个组件App.vue
在App.vue中，或者说任何一个组件中，你可以没有script去暴露对象，可以没有style去设置样式，但是一定要有一个template来决定这个组件中的内容是什么
就连刚刚的new Vue()也得有一个template，App.vue中有什么东西暂且按下不表，现在我们回到main.js
导入刚刚的App.vue包之后，给他起一个名叫App，从此这个组件名叫App
import App from './App'
在components中注册这个组件，从此这个组件变成了Vue实例的组件，真正意义上成为了组件
components: { App },
在template中使用这个组件，从此这个Vue实例中只有一个内容，就是这个名叫App的组件
template: '<App/>'
在经历了以上的变化之后，万物之源从最开始的index.html中的一个div，转移到main.js中的一个new Vue()实例对象，再转移到了这个App.vue的主组件

import Vue from 'vue'
import App from './App'
new Vue({
el: '#app',
components: { App },
template: ''
})

chapter3
其实现在的main.js还是不完整的，在大刀阔斧地开始敲代码之前，还有一个重要的东西，路由
（上次开会的时候组长问大家路由是什么，我说是孔子的学生，结果没有人get到这个梗）
还是建造一个跟刚才的App.vue差不多的玩意，这次叫它HelloWorld.vue，我们仍然不关心暴露对象和样式，只要它有一个template
然后就是router路径下一个叫做index.js的文件，我个人认为这是一个很糟糕的名字，像是main.js和index.html媾和的产物，没有体现其路由相关的信息
言归正传，在index.js中导入vue包和vue-router包，以及刚刚创建的HelloWorld.vue

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

在这里使用这句话来使用这个路由
Vue.use(Router)
有关路由的东西，我也会再开一个随笔来总结，这里先默认自己都会了，等到总结完再回来看，所以这里留下了一个坑
————————————————————————————————————————————————————————————————————————————————————————
——————————————————————————————————————————坑————————————————————————————————————————————
————————————————————————————————————————————————————————————————————————————————————————
在路由的创建方法中routes对应了一个匹配规则的数组对象，每一个{}中都是一个匹配规则
这里创建一个默认路径的路由，显示的路由为刚刚引入的HelloWorld组件

export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})

此时此刻我有两个疑问，1.明明匹配规则中的name属性的作用 2.这里暴露出的对象是让谁接收了
在index.js写完之后，回到未完成的main.js中，这时候就可以导入这个index.js了，虽然这里我不太明白为什么这样可以找到router下面的index.js，但是就是这么写的
import router from './router'
然后实例对象中也可以加入这个路由了
完整格式应该是router:router，这里简写就是一个无情的 router
到此为止，初始化的工作已经全部结束，放一下main.js的全部代码
import Vue from 'vue'
import App from './App'
import router from './router'
new Vue({
el: '#app',
router,
components: { App },
template: ''
})