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}};

页面效果：