- 第一步入口main.js编写
import Vue form 'vue'; // 引入Vue对象;
import App form './App.vue';// 引入主页面名为App的vue文件
import router form './router';// 从文件router引入 路由,
// router文件必须有index.js,系统默认引入这个文件
new Vue({
el: '#app'; // 挂载index.html中id为app的元素
components: {App}; // 映射组件标签
template: '<App/>';//指定需要渲染到页面的模板
router //注册路由 ,
})
也可以用render渲染函数去映射组件
new Vue({
el: '#app'; // 挂载index.html中id为app的元素
render: h => h(App),
router //注册路由 ,
})
//**********************render函数分析***********************************
// render: h => h(App) == render : function(h){return h(App)}
// 相当于
/*
render : function (createElement) {
return createElement(App)
}
*/
- 第二步主页面App.vue的编写
<template>
// template下面必须要有一个块级容器
<div>
<childComponent/>
</div>
</template>
<script>
// 引入子组件,一般非路由组件,放在命名为components的文件夹中
import childComponent from './components/childComponent.vue';
export default{
data () { // 在脚手架中规定,data要方法的形式
return {}
},
components: {
// 注册子组件
childComponent,
}
}
</script>
<style></style>