vli脚手架编写流程

• 第一步入口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>