对vue中index.html，main.js和app.vue的理解

先来个demo

说起来vue的项目，我们所需要用到的并不是太多，当然，这里面也有许多非常重要的东西，讲正题之前，我们看个DEMO（新建个html，直接引入vue）。

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

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

上述代码是否看着非常眼熟？没错！这就是你在脚手架中的index.html和main.js中所用到的。运行上述代码后，你会发现你的浏览器中已经渲染出"

我就是请始皇，如何？"。

我们可以把“id=box”这个标签理解为根，我们只是将我们创建的实例对象挂载进我们的box中，然后通过$mount方法进行解析，从而渲染出来。（如果是纠结$mount实现原理的同学可以自行百度，VUE中说到渲染，归根结底离不开template，render，creatElement，就这样。只不过中间许多东西需要考虑处理。难点也就是这些需要处理的东西，建议看的时候，先看整体部分，再拆开看，不懂的再百度，百度不出来就自己写个demo实验，个人学习方式是这样）

所有代码如下图：

index.html和src文件中的main.js,app.vue

如果上述的DEMO看懂了的话，我想对脚手架新建出来的index.html和main.js应该也就不算陌生了吧？话不多说上图！

1. 我们先看看index.html，里面并没有太多的东西，也是我们所熟悉的html，里面只有一个ID为app的div标签。如果做响应式或者移动端的同学们，你们的meta还是加进这里面哦。如果你问这是单页面的项目，如果你有多个title应该怎么办？？那么，你猜（先不提这个，凌晨12点了。。赶着正题先说，后续路由部分几乎可以满足你的所有需求。）？

2. 我们再看一下main.js文件，这个文件就是vue-cli中js的主入口文件，你的所有JS几乎都会通过它来引入。除了上面的一堆import引入的东西之外，还有一个Vue.config.productionTip = false这个弹消息的东西，重点就是下面的new Vue了。我们可以看到：

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

我们的vue的实例直接挂在了 #app 上面，router是路由部分，路由控制着每个页面组件，store暂且不提，render函数入参为组件App，再来看下上面有个import如下：

import App from './App.vue'

render函数接收三个参数，返回一个虚拟节点，这个节点就是我们需要渲染的。（详细原理可查阅相关资料，东西比较多，就不说了。）

我们的new vue实例中已经有APP组件作为入参通过render函数的处理之后再返回的节点，再通过$mount渲染进我们的index.html中的“id=box”的div中。

再看看APP.vue，我们通常理解为根组件，所有的组件都是它的子组件。在根组件中再使用router-view组件，路由中匹配到的所有的组件都会通过它进行渲染。

好了，这三个文件作用基本上都说完了，如何联系的，大致也就如上所述。（如果有不对的，可以提出来哦，我会认真改正的，谢谢咯，本来打算今天将目录架构搭以及路由部分解决的，想想这基础的东西总得知道一下吧，还是先说这个吧，下节再说项目正式创建的部分。）

题外话： template和render函数

这两个都是用于渲染dom节点的，只不过其中template是先转为ast语法树，ast语法树又转化为render函数，因为render函数返回的是虚拟节点，它又通过path和dom diff的算法来生成真实的dom节点。详细部分喜欢的可以再百度一下具体实现的原理。