Vue学习笔记----index.html 、main.js 、app.vue

1.index.html   

package.json文件规定了脚本 npm run dev/start 执行的是build里面的webpack.dev.conf.js ,而该文件里面通过newwebpackplugin规定了项目的首页入口；整个项目只有这一个 html 文件，所以这是一个 单页面应用，当我们打开这个应用，表面上可以有很多页面，实际上它们都只不过在一个 div 中

2.App.vue

        这个文件称为“根组件”，因为其它的组件又都包含在这个组件中。vue 文件是一种自定义文件类型，在结构上类似 html，一个 .vue 文件即是一个 vue 组件。

  export default 是 ES6 的语法，意思是将这个组件整体导出，之后就可以使用 import 导入组件了。

      <router-view/>，是一个容器，名字叫“路由视图”，意思是当前路由（ URL）指向的内容将显示在这个容器中。也就是说，其它的组件即使拥有自己的路由（URL，需要在 router 文件夹的 index.js 文件里定义），也只不过表面上是一个单独的页面，实际上只是在根组件 App.vue 中

3.main.js

    vue实例化在main.js中，但在index.html中并没有引入main.js，main.js与index.html是如何产生关联的?在webpack.base/webpack.dev中，vue默认设置main.js为项目的唯一入口。在项目打包时，webpack会从main.js开始构建依赖图，梳理整个项目依赖且不重复的模块。

    vue的webpack默认配置中还加入了htmlwebpackplugin插件，用于生成index.html与挂载JS脚本。

    当你输入 npm run dev 后，发生了这样一连串事件——webpack选择了开发配置，并进入main.js入口文件，构建项目依赖图。webpack将整理后的所有依赖模块打包成输出文件app.js，接着htmlwebpackPlugin将它挂载到index.html页面上。
最终，它呈现出的模样如下所示：