Vue基础Day04组件与cli脚手架

一.核心内容

1.任务1：天知道

任务1：天知道

2.什么叫组件

把某个界面或者说某个小功能，封装起来就叫组件（就是对html css js的一个综合封装），组件也是Vue的实例，所以它也有自己的data和methods以及生命周期钩子等

组件开发特点：可复用，同时会简化代码结构，易于维护，同时利于多人协同开发等。

3.安装单文件组件所需要依赖

文档：【快速原型开发】

3.1 安装脚手架

安装vue-cli 脚手架
- 在cmd命令窗口输入（在任意的路径都可以）
```
npm install -g @vue/cli
```

安装成功检测在cmd命令窗口输入：

vue  -V    // 注意 是大写的 V 。如果安装成功会返回：@vue/cli 4.0.5类似这样的版本信息

3.2 安装常见错误

如果 vue -V无法显示版本信息，说明安装失败

解决方案:
- 方案1：更换网络环境：有线，换无线，无线换4G
- 方案2：更换安装的工具
1. cnpm安装 ：
  - 先安装淘宝镜像
```
npm install -g cnpm --registry=https://registry.npm.taobao.org
```
  - cnpm安装vue-cli：
```
 cnpm install -g @vue/cli
```
2. yarn安装 :
  - 先安装yarn
```
 npm install -g yarn 
```
  - yarn安装vue-cli
```
 yarn global add @vue/cli
```

方案3：清除npm缓存，重新安装

npm cache clean -f      //清除npm缓存

重新执行安装的命令
在用脚手架搭建vue项目时，提示：无法加载文件 C:\Users\电脑用户名\AppData\Roaming\npm\vue.ps1,因为在此系统禁止运行脚本

这是你笔记本禁止运行脚本，解决办法

命令： set-ExecutionPolicy RemoteSigned

无法加载文件 C:\Users\电脑用户名\AppData\Roaming\npm\vue.ps1

3.3 安装单文件组件.依赖包

安装单文件组件依赖包（安装完成vue-cli后进行这一步）

npm安装的用：

npm install @vue/cli-service-global -g

cnpm安装的用：

cnpm install @vue/cli-service-global -g

yarn安装的用：

yarn global add @vue/cli-service-global

注意：如果前面用yarn的人就一直用yarn,不要用yarn装完vue-cli,又用npm装其它插件，这样有可能会出问题，尽量都是同步一个安装，就是以前用npm,后面就一直用npm,以前用yarn 后面就一直用yarn

4.单文件组件使用

4.1 单文件组件结构

把每个组件都放到一个独立的 vue文件.vue 里

文件三大部分： template 、 script 、 style ，快捷键快速生成：

4.2 单文件组件的运行

在cmd窗口该vue文件根目录下输入vue serve 文件名.vue
注意点
- template 里 html 必须用一个标签全包住
- 组件里没有el，组件是无需挂载到哪的，里面已经有template是它的使用的html了
- data在组件里面是一个function,return 一个对象

5.组件中使用其它组件

如何在一个组件中引入其它组件,实现一个组装。

5.1 三步法

如：在组件 Father.vue 中导入组件 Son.vue

6.组件中使用插件

以 axios 为例

6.1 三步法

装包（安装外部插件）

npm i axios //到相应目录下执行该命令

导包（在单文件组件中导入外部插件）

import axios from "axios" // 注意 可以不加后缀

用包（在相应代码位置使用）

使用和以前一样，该怎么用还是怎么用

axios({
 url:"xxx"
}).then(res=>{
})

DEMO

7.组件间的传值

如果A组件中引入了B组件，这样我们称A组件为父组件，B为子组件

7.1 父组件传值给子组件

在子组件标签上定义一个ref属性
```
  <组件名 ref="xxx"> 
```

在需要给子组件传值的地方写入：

this.$refs.xxx   //这就代表了子组件xxx的vue实例
//这里xxx代码标签中定义的ref属性名这里就可访问到子组件里面的data属性与methods方法
//如要修改子组件里面data里的某个值：          this.$refs.xxx.子组件里data属性名
//如果需要调用子组件里面methods里某个方法：   this.$refs.xxx.子组件里面methods里方法名

7.2 子组件传值给父组件

    this.$parent    //这就代表父组件的vue实例
    //如要修改父组件里面data里的某个值：         this.$parent.父组件里data属性名
    //如果需要调用父组件里面methods里某个方法：   this.$parent.父组件里面methods里方法名

注意：ref获取到的dom信息在这里与document.getElementById是有本质区别的

//两个组件，这个是father.vue

//son.vue

二.核心案例

1.播放器-simple

image.png

接口：

http://183.237.67.218:3000/

http://183.237.67.218:3000/search?keywords= 神话搜索歌曲时接口获取音乐列表

http://183.237.67.218:3000/song/url?id=310574 获取音乐url id来自于上一接口详情

分析

搜索功能
1. input框：v-model @keyup.enter="搜索事件"
2. 搜索按钮 @click ="搜索事件"
3. 搜索事件
  1. 使用axios
    1. npm i axios 安装 axios
    2. 导入axios import axios from 'axios'
    3. 使用axios
  2. 使用axios调用接口获取歌曲列表数据
  3. 将获取到的数据渲染出来
    1. v-for
  4. 点击歌曲列表
    1. 在li上绑定点击事件
      1. @click="播放功能（传递歌曲id）"
    2. 通过点击事件查找歌曲的url
      1. axios调用接口获取歌曲url
  5. 播放歌曲
    1. 将获取到的歌曲url绑定到相应audio的src上：src

源码：

二.扩展内容

1.关于事件中的$event

每个点击事件里面都有一个事件对象，在vue中如何去使用该事件对象呢？