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>
上一篇:MongoDB C driver API continues


下一篇:mongodb C++ Driver安装