要理解的是全局组件这一定义:
首先我们先明白什么是组件:
组件:
就相当于我们把一串我们想重复用的代码封装起来,当我们想要再次进行使用的时候,我们可以进行重复调用,来减少代码量.它像标签一样使用,这一组件提供对应的结构,功能和样式.
那么什么是全局组件?
在vm实例外创建的组件叫全局组件
如何创建全局组件:
1.我们使用Vue.component('名称',{配置})来封装个简单的全局组件
我们使用Vue.component("名称",{template:""})中的template来指定组件的结构
细节:template中定义模板,只能有一个根元素.
数据另外使用别的
已html文件为例,引入vue.js
<script src="../vue.js"></script>
<body>
<div id="sinan">
<!--像标签一样使用全局组件, 可重复调用 -->
<first></first>
<first></first>
<first></first>
</div>
</body>
<script>
//vm实例外创建的组件,Vue.component('名称',配置(它是个对象))
Vue.component("first",{
template:'<div><p>创建全局组件</p></div>'
})
//关联 使用范围
var vm = new Vue({
el:"#sinan"
})
</script>
缺点:
1.它是全局的:同全局变量相同,对性能很大的影响
全局变量是单独的存储空间，区别于一般的变量，全局变量在子函数中使用后，可以仍然保存数据，造成内存浪费.而一般变量，除了输出数据，其余数据都会清空.就因为所有地方都可以用全局变量，一旦在大的工程中出现问题，就需要在所有文件中对全局变量排错，这样非常不友好，所以不建议使用。
2.字符串模板缺乏语法高亮:没有提示,没有报错,没有层次结构...
8.png
当要使用层次结构需要在每句结尾加上\,太繁琐了
3.缺少CSS语法:当你在html文件中的<head></head>写入公共样式的时候,很有可能把复用的组件样式都进行了修改.
4.没有构建步骤限制只能使用 HTML 和 ES5 JavaScript,(它只能写入浏览器可识别的代码)而不能使用预处理器，如 Pug (formerly Jade) 和 Babel,less,sass等
解决方案:
使用单应用组件(.vue文件)的方式:
(单文件组件的应用的创建使用方法在03文章上)
9.png
高亮,步骤,css问题全部结局
webpack中支持vue单文件组件格式中文文档
Vue Loader 是一个webpack的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件
