vue构建项目笔记

1. index.html本来没有app.js的，但是运行到服务器上，用脚手架工具打开页面时，页面出现了app.js。这个app.js是vue/cli将src下面的所有代码进行打包后动态插入到index.html的，即

2、引入局部组件

import Header from './components/Header.vue'可以写成import Header from './components/Header'，这里可以省略.vue，因为脚手架工具内部配置了可识别的后缀有js json vue后缀，但是在别的项目当中就不行了，像node项目就不行，就是用默认的识别选项，vue脚手架工具配置了才可以。

CommonJs的向外输出：module.exports

脚手架工具配置了只识别es6的规则，不识别CommonJs规则

3、main.js文件怎么执行起来的？

（1）为什么main.js写render: h => h(App)

如果我们在main.js写import App from './App.vue'，new Vue({})里配置components:{App}，template：''，然后在vue.config.js配置编译模式runtimeCompiler为true，那么index.html的

的内容就会被template选项的内容覆盖，项目可正常显示，但这样会给项目额外增加10kb左右的代码量，所以为了减少代码量，同时我们也知道配置了template选项，template内部会执行一次render函数进行渲染，渲染template的结构，我们明知道它要执行render函数，不如我们自己帮它写上render函数。

（2）new Vue({})里配置template的作用

vue实例创建好之后，会取读取template值，读取到值之后就去解析结构，如果template值是普通的html标签，就直接渲染到页面上，但是如果template值是组件，比如''，就会去识别组件内部的