vue-cli: 渲染過程理解（vue create demo01方式創建）

1、根目錄配置 vue.config.js, 設置入口文件: index.js

module.exports = {
    pages:{
        index: {
            entry: 'src/pages/home/index.js',   //index.js為入口文件
            template: 'public/index.html',   //html頁面文件
            title: 'Home Page',
        }
    }
}

 

2、index.js

import Vue from 'vue'       　//直接引入vue
import App from './App.vue'   //引入APP.vue, template文件

Vue.config.productionTip = false   //阻止vue在啟動時控制台生成生產提示

new Vue({             //實例化Vue
  render: h => h(App),   //將template(APP)代碼寫入到 html頁面文件(vue的作用域中:'#app')
}).$mount('#app')    //vue的作用域'#app'

//上面的代碼相當於
new Vue({
　　el: '#app',
　　components:{HelloWorld}
})
//實例化了Vue, 確定vue的作用域'#app', 並且將template文件寫入到'#app'作用域中, vue可解析template代碼, 並注冊了一個組件:Helloworld

 

3、APP.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./../../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>          //組件: HelloWord, 通過msg父子傳值
  </div>
</template>

<script>
import HelloWorld from './../../components/HelloWorld.vue'   //引用組件: HelloWord, 因為index.js中僅注冊了組件名稱, 還需要引入組件內容

export default {      //export default, 向外暴露一個對象
  name: 'app',　　　　//給組件起的名字, 暫時未用到
  components: {       //將局部組件components也暴露給index.js
    HelloWorld
  }
}
</script>