vue-cli：渲染过程理解2（vue init webpack方式创建）

main.js: 入口文件

import Vue from 'vue'    //引入node_modules中的vue
import App from './App'  //引入当前路径(src)下的App.vue并命名为App, .vue后缀省略

Vue.config.productionTip = false   //关闭浏览器console中, 开发环境转为生成环境提示

new Vue({
  el: '#app',    　　　　　　//作用域是index.html中的<div id="app"></div>
  components: { App },   　//将引入过来的App声明为局部组件App, {App: App}
  template: '<App/>'  　　 //创建template, 用App这个组件替换index.html中的<div id="app"></div>
})

index.html

<body>
    <div id="app"></div>
</body>

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>  //③模板中使用HelloWorld组件
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'    //①引入HelloWorld.vue

export default {     //将App.vue暴露出去
  name: 'App',       //name暂时没用
  components: {
    HelloWorld       //②将HelloWorld声明为局部组件 {HelloWorld: Helloworld}
  }
}
</script>

<style>
#app {
}
</style>