单页面应用程序（Single Page Application）,简称 SPA
指的是
一个Web网站中只有唯一的一个HTML页面，所有的功能与交互都在这唯一的一个页面内完成
vue-cli的作用是可以帮助我们一键生成工程化的 Vue 项目。中文官网： https://cli.vuejs.org/zh/
① 全局安装 vue-cli
npm install -g @vue/cli
使用 vue-V 命令检查是否安装成功
② 基于 vue-cli 快速生成工程化的 Vue 项目
vue create 项目的名称 （如：vue create demo-1）
①：index.html 单页面应用的唯一的一个html页面
- 预留了一个 el 区域
- 引入了一个打包后的脚本文件
②：main.js webpack 打包的入口文件
- 把 App.vue 渲染到了 index.html 所预留的 el 区域
③ ：App.vue
- 它包含了所有将来要在页面中渲染的 UI 结构
组件化开发指的是：根据封装的思想，把页面上可重用的 UI 结构封装为组件，提高页面 UI 结构的复用性，从而方便项目的开发维护
Vue是一个
支持组件化开发的前端框架Vue中规定：
组件的后缀名是.vue
每个 Vue 组件都由 3 部分组成：
template=> 组件的模板结构script=> 组件的JavaScript行为style=> 组件的样式注意：
每个组件中必须包含 template 模板结构，template是必须存在的，而script 行为和style 样式是可选的组成部分
Vue规定：每个组件对应的
模板结构，需要定义到节点中
<template>
\
<div>
<h1>这是 App.vue 组件h1>
div>
template>
注意：
- template是一个虚拟元素，不会被渲染为任何实际的 DOM 元素，只起到
包裹的作用- template中
只能包含唯一的根元素
Vue规定：开发者可以在 style 节点中
编写样式美化当前组件的UI结构，组件内的 style 节点是可选的。
style 节点的基本结构如下：
<style>
h1{
color:red;
}
style>
less 语法在 style 标签上添加
lang='less'属性，即可使用 less 语法编写组件的方式：前提：需要安装less：
npm install less less-loader@7.3.0 -D① -D 是
--save-dev的简写② -S 是
--save的简写安装 less 完成后，重新启动项目
npm run serve
less语法的
<style lang="less">
h1{
color:red;
span:{
color:blue;
}
}
style>
Vue 规定：开发者可以在 script 节点中
封装组件的 JavaScript 业务逻辑
script 节点的基本结构如下：
<script>
// 今后，组件相关的 data数据、methods方法等
// 都需要定义到 export default 所导出的对象中
export default{}
script>
Vue 规定：vue 组件中的 data
必须是一个函数，不能直接指向一个数据对象
<script>
export default{
// 组件中，data 必须是一个函数，不能直接指向一个数据对象
data(){
return{
username:'zhangsan'
}
}
}
script>
Vue 程序默认会渲染 App.vue 组件的内容，它是整个项目最顶层的组件】
要想在页面中
渲染其他组件的内容，需要将其嵌套在 App.vue中
三个步骤 ：导入需要的组件
import Left from '@/components/Left.vue'
components 节点注册组件<script>
export default{
components:{
// 组件的注册名称 : 导入的组件名称
Left:Left // 可简写为 Left
}
}
script>
以标签形式 使用刚才注册的组件<div class="box">
<Left>Left>
div>
通过 components 注册的是
私有组件，它只能在注册它的组件中使用，不能在其他组件使用
在项目的入口文件
main.js中，注册全局组件
<script>
// 1,在main.js的头部，使用 import 导入需要全局注册的组件
import Count from '@/components/Count.vue'
// 2.全局注册
// 在main.js中，new Vue()构造函数之前，进行全局组件注册
// 使用 Vue.component('组件注册名称','导入的全局组件的名称')
Vue.component('Count',Count)
script>
prop 是组件的
自定义属性。在封装通用组件的时候，合理地使用 prop 可以极大的提高组件的复用性！可以理解为 prop 是在使用组件的时候，
从外面传递给组件的一个参数
<p>count的值是：{{count}}p>
<button @click="count += 1">+1button>
<script>
data(){
return{
count:0
}
}
script>
props:['n']
<Count :n="1">Count>
<Count :n="2">Count>
在声明 prop 时，可以通过
type来规定prop 的数据类型如果传递过来的数据不符合type设置的数据类型，vue会在控制台中给出
报错信息、
<script>
// 使用对象格式，给 prop 设置配置选项
props:{
n:{
// type 可以规定传递过来的 prop 的数据类型
// 常见的数据类型：String、Number、Boolean、Object、Array
type:Number
}
}
script>
在声明 prop 时，可以通过
default来设置prop 的默认值当外界在使用组件的时候，
没有传递自定义属性，prop就使用这个默认值
<script>
// 使用对象格式，给 prop 设置配置选项
props:{
n:{
// default 用来给 prop 设置默认值
// 当外界在使用组件的时候，没有传递自定义属性，prop就使用这个默认值
default:1
}
}
script>
在声明 prop 时，可以通过
required选项，将该 prop 设置为必填项，强制外界使用组件的时候必须传递自定义属性
<script>
// 使用对象格式，给 prop 设置配置选项
props:{
n:{
// required：true 规定该 prop 是必填项
// 强制使用组件的时候必须传递自定义属性，否则会报错
required:true
}
}
script>
required 和 default 是互斥的选项，不会同时设置。如果同时设置，
required 的优先级比 default 高
vue 规定：组件中封装的自定义属性是
只读的，我们不能直接修改prop 的值。否则会直接报错
<p>count的值是：{{init}}p>
<button @click="init += n">+{{n}}button>
<script>
props:{
init:{
type:Number,
default:0
}
}
script>
要想修改 prop 传进来的
初始值，可以把 prop 的值转存到 data 中，然后修改 data，因为 data 中的数据都 是可读可写的！
<p>count的值是：{{init}}p>
<button @click="init += n">+{{n}}button>
<script>
data(){
return{
// 如果想修改 prop 传进来的初始值，可以将 prop 的值转存到 data 中，然后修改 data
count: this.init
}
}
script>
默认情况下，
写在 vue 组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题
基于唯一的 index.html 页面 进行呈现的影响整个 index.html 页面 中的 DOM 元素vue 为
style 节点提供了scoped属性，从而防止组件之间的样式冲突问题：代码示例：Left.vue
<style scoped> h3{ color:orange } style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
实现原理：
- style 标签中添加 scoped 属性后，vue就会为当前组件中的DOM 元素添加唯一的一个自定义属性
v-data-xxx- 然后 css 选择器会通过这个自定义属性去选中元素，从而解决样式冲突的问题
注意：实际开发中，建议在每个组件的 style 身上都加上 scoped 属性
在给当前组件的 style 添加了 scoped 属性后，如果想
在父组件中修改子组件的样式，就需要使用深度选择器
在 css 中使用
>>>,代码示例如下：<style scoped> div >>> h5{ color:pink; } style>
- 1
- 2
- 3
- 4
- 5
- 6
在 less 中使用
/deep/,代码示例如下：<style scoped lang="less"> div /deep/ h5{ color:pink; } style>
- 1
- 2
- 3
- 4
- 5
- 6
应用场景：需要
修改第三方组件库中组件的原有样式的时候