vue（三）[引入组件]

App.vue引入全局组件

@符号

先说下vue项目中的@符号，我们在build/webpack.base.conf这个文件下可以看到webpack把@定义成 src 文件路径。
所以@符号跟vue没有什么关系，他是基于webpack的，有很多人把这个给误解了。
而 . 是代表绝对路径。

App.vue全局引入

App.vue是全局显示的组件，所以把组件引入到App显示每个页面都会有。
使用import 别名 “@/components/组件名”进行组件引用，然后在components 中注册，在html输出别名标签即可，千万不要在@后面跟src。
目前看到有Hello和index两个组件，我们在App中引入Hello：

HTML：

<div id="app">
	<hello></hello>
</div>

JS：

	//全局引入
	import hello from "@/components/HelloWorld.vue"
	export default {
		components: {
			hello
		},
		name: 'App'
	}

Hello内容：

<div id="hello">
	<p>hello world</p>
</div>

页面内容：

局部引入

局部引入和全局引入方法是一致的，只不过是在components下单组件之间互相引用，如下例子只能在index页面显示hello页面的内容。
html：

<div id="index">
    <p>你好</p>
    <hello></hello>
</div>

JS:

  import hello from "./HelloWorld.vue"
  export default {
    components:{
      hello
    }
};

页面效果：