VUE学习（三）html引入vue.js，组件的创建和使用

1、简单的创建和使用vue组件

	
		
		
		
	
	
		

		  {{ message }}
		  

			  
		  
		
	
	

2、对上面的组件写法的优化，这个写法结构和以后的vue开发有很大关联

index.html：注意引入的main.js，它必须要写【type="module"】

main.js：就是1中的index.html页面中的vue提取到一个js文件中而已，并且引入了App组件

//引入组件
import App from "./App.js";

var vm = new Vue({
	el:"#app",
	components:{
		App:App
	},
	template:'',
});

App.js：它就是一个组件，并且还引入了Products组件

//引入
import Products from "../component/Products.js";

var template = '
测试组件
';

//导出
export default {
	//注册组件
	components: {
	    Products:Products,
	},
	template:template,
};

Products.js：就是一个纯粹的组件

var template = '
这里是产品
';

//导出组件
export default {
	template,
}

 这里的组件其实就是js文件，引入js文件用 import 。