一、Vue-cli

1. vue-cli介绍

vue-cli 是 Vue.js 开发的标准工具。它简化了程序员基于 webpack 创建工程化的 Vue 项目的过程。

引用自 vue-cli 官网上的一句话：
程序员可以专注在撰写应用上，而不必花好几天去纠结 webpack 配置的问题。

中文官网：https://cli.vuejs.org/zh/

2. vue-cli安装

vue-cli 是 npm 上的一个全局包，使用 npm install 命令，即可方便的把它安装到自己的电脑上：

npm install -g @vue/cli

基于 vue-cli 快速生成工程化的 Vue 项目：

vue create demo

二、组件

1. 什么是组件化开发

组件化开发指的是：根据封装的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护。

2. vue 中的组件化开发

vue 是一个支持组件化开发的前端框架。
vue 中规定：组件的后缀名是 .vue 。

3. vue 组件的三个组成部分

每个 .vue 组件都由 3 部分构成，分别是：

1. template -> 组件的模板结构
2. script -> 组件的 JavaScript 行为
3. style -> 组件的样式

其中，每个组件中必须包含 template 模板结构，而 script 行为和 style 样式是可选的组成部分。

3.1 template

vue 规定：每个组件对应的模板结构，需要定义到 < template> 节点中。

注意：

1. template 是 vue 提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的 DOM 元素

注: Vue2中template中只能包含唯一的根节点，在Vue3中不受限制

3.2 .vue 组件中的 data 必须是函数

vue 规定：.vue 组件中的 data 必须是一个函数，不能直接指向一个数据对象。
因此在组件中定义 data 数据节点时，下面的方式是错误的：

  data:{
        username:'小小孩子们的博客 www.xxhzm.cn'
    },

需要定义成这种：

data(){
    return{
        username:'小小孩子们的博客 Www.xxhzm.cn'
    }
},

3.3 组件之间的父子关系

组件在被封装好之后，彼此之间是相互独立的，不存在父子关系 在使用组件的时候，根据彼此的嵌套关系，形成了父子关系、兄弟关系

3.4 使用组件的三个步骤

1. 使用 import 语法导入需要的组件

   import Right from "@/components/right.vue";

2. 使用 components 节点注册组件

   components: {
   Right
   },
   

3. 以标签形式使用刚才注册的组件

3.5 通过 components 注册的是私有子组件

例如：
在组件 A 的 components 节点下，注册了组件 F。
则组件 F 只能用在组件 A 中；不能被用在组件 C 中。

注册全局组件
在 vue 项目的 main.js 入口文件中，通过 Vue.component() 方法，可以注册全局组件。示例代码如下：

import Count from '@/components/count.vue'
Vue.component('MyCount', Count)

参数1：字符串格式，表示组件的注册名称
参数2：需要被全局注册的那个组件

3.6 props的使用

props 是组件的自定义属性，在封装通用组件的时候，合理地使用 props 可以极大的提高组件的复用性！
它的语法格式如下：

props:['init'],

在使用组件处传入init

3.6.1 props是只读的

vue 规定：组件中封装的自定义属性是只读的，程序员不能直接修改 props 的值。否则会直接报错
要想修改 props 的值，可以把 props 的值转存到 data 中，因为 data 中的数据都是可读可写的！

  data() {
    return {
      count: this.init,
    };
  },

3.6.2 props 的 default 默认值
在声明自定义属性时，可以通过 default 来定义属性的默认值。示例代码如下：

  props:{
      init:{
        //   如果外界在使用Count组件时候，没有传递init的值，则默认值生效
          default:0
      }
  },

3.6.3 props 的 type 值类型

在声明自定义属性时，可以通过 type 来定义属性的值类型。示例代码如下：

  props:{
      init:{
        //   如果外界在使用Count组件时候，没有传递init的值，则默认值生效
          default:0,
          
          type:Number
      }
  },

3.6.4 props 的 required 必填项
在声明自定义属性时，可以通过 required 选项，将属性设置为必填项，强制用户必须传递属性的值。示例代
码如下：

  props:{
      init:{
          type:Number,
          required:true,
      }
  },

三、 组件之间的样式冲突问题

默认情况下，写在 .vue 组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。
原理：
为每个组件分配唯一的自定义属性，在编写组件样式时，通过属性选择器来控制样式的作用域：

实际使用
为了提高开发效率和开发体验，vue 为 style 节点提供了 scoped 属性，从而防止组件之间的样式冲突问题：

1.2样式穿透

如果给当前组件的 style 节点添加了 scoped 属性，则当前组件的样式对其子组件是不生效的。如果想让某些样
式对子组件生效，可以使用 /deep/ 深度选择器。

/deep/ h2{
    color:pink
}

加了deep生成的选择器格式为

[data-v-19cd203c] h2 {}

注：当使用第三方组件的时候，如果有修改第三方组件的样式的需求，可以使用/deep/