追溯vue组件问题
在未讲项目之前，在 这一篇内容当中就讲到了组件引入使用，有内置的组件和动态组件以及封装一个swiper组件，组件也分为全局组件和局部组件，在讲在项目当中去使用组件之前先简单的回顾一下组件的编写：
<div id="app">
<hello></hello>
</div>
<script>
// 组件
Vue.component("hello",{
template:`
<div>
<button @click="handleHello">打招呼</button>
</div>
`,
methods:{
handleHello(){
alert("你好呀！");
}
}
})
new Vue({
el:'#app'
})
</script>
在之前讲到 vue 组件的时候，将其封装成组件的时候很方便使用，但是在编写template模板的时候存在很多的问题，下面就将在前面未解决的问题在本篇内容当中来进一步的学习：
1. 组件起名称：js(script)中编写驼峰式，则html需要用连接符 -
2. 组件中编写DOM结构时：没有代码的高亮显示（解决：通过vue单文件组件解决）
3. 组件中编写DOM时用到css：只能写行内样式（解决：通过vue单文件组件解决）
4. template(模板)：包含一个根节点（ps：将内容包裹起来）
5. 组件是孤岛，无法（直接）访问外边其他组件的状态或者方式（解决：间接的组件通信）
6. 自定义组件data必须是一个函数
7. 所有的组件写在同一个页面，代码很乱（解决：通过vue单文件组件解决）
补充：
刚接触组件编写template模板中DOM结构会发现没有代码的提示,完全需要自己手敲，虽然用起来好用,但觉得不方便，这个在后面做项目的时候是通过vue单文件组件可以解决的，所以这些问题都在后续有其他的变化；
使用组件可以进行引入使用,也使得组件像一座孤岛,那么组件与组件之间不能直接访问状态和方法，那么就需要通过组件与组件之间间接通信完成；
可以回顾以上代码编写下来,script中编写的组件代码(Vue.component)内容还是蛮多的,如果还有其他的,那么这些代码和new Vue()中的代码混合会使整体代码很混乱,虽然解决了代码的耦合,但这些问题都能够得以解决；以上的这些问题就是先前我们编写组件的方式存在的问题，那么现在在项目当中，也是本篇目中最重要的内容就是Vue的单文件组件，接下来就是开始对Vue单文件组件内容的学习！
vue单文件组件
通过简单的回顾了单文件组件的内容已经有了一个大概的了解，使用 Vue.components 来去定义组件，那么 vue单文件组件就是一个vue文件就是一个组件的形式，那么在存放组件的文件夹components中定义一个组件名为SayHello的组件；即 /components/SayHello.vue ；
<!-- SayHello组件 -->
<template>
<div>
<button @click="handleHello">打招呼</button>
</div>
</template>
<script>
export default {
methods: {
handleHello () {
alert('你好呀!')
}
}
}
</script>
在使用的时候，只要将其引入在对应的 .vue 文件当中即可；在App.vue文件当中引入使用；
全局组件编写
<!-- App.vue -->
<template>
<div id="app">
<sHello></sHello>
</div>
</template>
<script>
import hello from './components/SayHello.vue'
import Vue from 'vue'
// 全局注册
Vue.component('sHello', hello)
export default { }
</script>
局部组件编写
<template>
<div id="app">
<sHello></sHello>
</div>
</template>
<script>
import hello from './components/SayHello.vue'
export default {
// 局部注册
components: {
sHello
}
}
</script>
然后将项目进行运行起来，如是同上一篇来的可使用【npm run start】或【npm start】，如是自己创建的项目未修改则使用【npm run serve】运行；
在浏览器中中访问地址 http://localhost:8080访问查看：可以看到刚刚编写的SayHello组件也可以正常使用成功了；
可以知道我们刚在编写这个组件的时候同样是在template标签当中，同时该标签中仅能存在一个div，这个vue单文件组件解决了在之前通过Vue.components(...)中存在的一些问题，如template中代码的编写没有高亮提示，编写起来不方便等的一些问题。
样式冲突 —— scoped
在之前的内容中还存在什么问题呢？template模板中的组件编写DOM时只能用内联的css样式，现在通过单文件组件可以解决这个问题，那么仍存在这样一个问题，组件的引入使用中CSS样式是否会发生冲突呢？下面来简单的测试一下：
- 在App.vue文件中去编写按钮样式style :
<!-- App.vue -->
...
<style>
button {
background: yellow;
}
</style><!-- SayHello -->
...
<style>
button {
background: green;
}
</style>现在来测试运行之后，观察组件中的 <按钮> 是否会与App.vue中的组件样式发生冲突：
在 <head> 标签中的 <style> 标签可以看到 button 样式 background 有 green 和 yellow 两种，那么仅有App.vue中的样式得以体现；如何解决呢？
1）通过添加id选择器；
为 SayHello.vue template模板中div标签添加id选择器，在样式前添加选择器：
<template>
<div id="lhxz-button">
...
</div>
</template>
<script>...</script>
<style>
#lhxz-button button{
background: green;
}
</style>
现在可以看到的是可以通过选择添加id选择器的方式，那么接下来讲一种关于vue提高的另外一种解决方案；
2）scoped
可以不需要添加任何id选择，只需要在style标签种添加这样一个属性 —— scoped即可，添加这个属性后这这style的标签仅作用于当前这个组件；
<style scoped>
...
</style> 以上就是本篇目的全部内容，了解之前组件引入使用中留下问题的解决之法，一个vue单文件就是一个组件，以及单文件组件所带来的样式冲突问题，vue也同样提供了这样一套解决方案，在style标签当中使用scoped属性；本期内容就到此结束，感谢大家的支持！一键三连哦！
单页面 / 多页面
| 单页面应用【SPA】 | 多页面应用【MPA】 | |
| 组成 | 一个外壳页面和多个页面片段组成 | 多个完整页面构成 |
| 资源（css/js）共用 | 共用，只需要在外壳部分加载 | 不共用，每个页面都需要加载 |
| 刷新方式 | 局部刷新或更改 | 全局刷新 |
| url模式 | xxx.com/#/one xxx.com/#/two |
xxx.com/one.html xxx.com/two.html |
| 用户体验 | 切换快，用户体验好 | 切换加载慢，流程度不够，体验差 |
| 转场动画 | 容易实现 | 无法实现 |
| 数据传递 | 容易 | 依赖url传参、或cookie/localStorage等 |
| 搜索引擎优化（SEO） | 需要单独方案，实现较为困难，不利于SEO检索，可利用服务器端渲染（SSR）优化 | 实现方法简易 |
| 试用范围 | 高要求的体验度、追求界面流程的应用 | 适用于追求高度支持搜索引擎的应用 |
| 开发成本 | 较高，常需借助专业的框架 | 较低，但页面重复代码多 |
| 维护成本 | 相对容易 | 相对复杂 |
为下一期关于路由 vue-router 相关的内容做基础！
