vue 学习总结（一）[Vue-Cli脚手架、插槽、axios、代理、全局事件总线]_app

Vue-Cli脚手架

环境搭建

脚手架创建项目结构分析

插槽

默认插槽

具名插槽

作用域插槽

vue中的ajax

axios

案例：访问github用户接口

代理

什么是跨域

怎么解决跨域

什么是代理

代理配置

全局事件总线

Vue-Cli脚手架环境搭建首先安装Node.js环境，Node.js环境搭建完毕即可使用npm命令打开cmd命令行窗口，接下来所有 *** 作在cmd里执行，以下红色字体为指令如果下载缓慢请配置 npm 淘宝镜像：npm config set registry http://registry.npm.taobao.org全局安装@vue/cli：npm install -g @vue/cli切换到你要创建项目的目录：cd vue-projects/使用命令创建项目：vue create demo上下方向键选择使用vue的版本，回车确定，开始自动创建项目（demo）创建完毕，进入到demo目录，cd demo启动项目：npm run serve暂停项目：快捷键Ctrl+C

Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpakc 配置，请执行：vue inspect > output.js

脚手架创建项目结构分析

.文件目录
├── node_modules 
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   └── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
└── package-lock.json: 包版本控制文件

插槽默认插槽插槽相当于在组件中占一个位置，当使用者调用组件时，组件标签内的值会解析到插槽所在的位置

比如：使用者App.vue，子组件Category.vue

在App.vue中使用Category组件


    我是将被解析到插槽中的元素
    我也同样会放置到插槽中

在Category组件中，需要放置上面元素的位置写个slot标签


    我是默认值，如果调用本组件的标签中没有设置元素，我将显示

结果

具名插槽给slot标签设置name属性需要放置到slot里的内容，在自身标签中设置slot属性

在App.vue中使用Category组件


    我会被放置到name为top的slot的位置
    我也同样会放置到name为top的slot的位置
    我会放置到name为bottom的slot的位置

在Category组件中，需要放置上面元素的位置写个slot标签


    我是默认值，如果没有使用者制动top调用我，我将显示


    我是默认值，如果没有使用者指定bottom调用我，我将显示

结果

tips

如果使用者的标签是标签，设置的slot=“xxx”属性可替换为 v-slot: xxx

作用域插槽使用者可以在使用slot的时候，使用slot所在组件的数据（子传父）；slot标签上增加绑定数据属性，如 : userList="users"，其中users是组件中的数据名称；userList是传递到使用者时的变量名称；使用者必须使用标签，在标签上使用scope或者slot-scope属性；如 scope=“slotData”，slotData是接收slot传递过来的所有属性的对象，userList=slotData.userList

在App.vue中使用Category组件

在Category组件中，需要放置上面元素的位置写个slot标签

结果

vue中的ajax axios axios使用需要安装axios库，命令：npm install axios使用前引入库 import axios from "axios"调用代码结构如下

import axios from "axios"

//get请求
axios.get("http://xxx:xx/xx/xx").then(
    response => {
        ...
    },
    error => {
        ...
    }
);

//post请求
axios.post("http://xxx:xx/xx/xx").then(
    response => {
        ...
    },
    error => {
        ...
    }
);

案例：访问github用户接口

结果

代理什么是跨域不在一个域：访问协议、IP、端口这3个有一个不一致，就不在一个域，就会产生跨域问题；在调用接口获取数据时，如果调用的数据接口和调取方不在一个域，会产生跨域问题，数据访问就是失败；怎么解决跨域前端使用代理解决后端人员设置允许跨域访问什么是代理代理就是一个中转站，发起方发起请求给代理，代理根据你配置的接口地址，将请求发送给接口，拿到数据后再返回给发起方；代理简单的实现前端解决跨域问题；代理配置

配置代理是在vue.config.js里进行配置

方式一：简单配置

devServer: {
    proxy: "http://127.0.0.1:5000"
}

优点：配置简单，请求资源时直接发送给前端即可缺点：不能配置多个代理，不能灵活指定请求是否走代理工作方式：如果请求了前端不存在的资源时，会将请求转发给服务器（优先匹配前端资源）

方式二：多代理配置

devServer: {
    proxy: {
        //匹配所有以api1开头的接口
        '/api1': {
            //代理目标基础路径
            target: 'http://127.0.0.1:5000',
            changeOrigin: true,
            //发出请求时，正则匹配去掉开头的/api1
            pathRewrite: {'^/api1': ''}
        }
    },
    proxy: {
        '/api2': {
            target: 'http://127.0.0.1:5001',
            changeOrigin: true,
            pathRewrite: {'^/api2': ''}
        }
    },
}

// changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000（服务器host）
// changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080（请求方host）

优点：可以配置多个代理，可以灵活控制请求是否走代理缺点：配置略微繁琐，每个需要走代理的请求必须加上前缀全局事件总线在Vue层面声明一个变量，改变量可以供任何组件使用适用于兄弟组件间的通信

main.js 安装全局事件总线

//在main.js中，声明Vue的时候，安装全局事件总线
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),

  //这里安装事件总线，beforeCreate方法里，$bus
  beforeCreate(){
    Vue.prototype.$bus = this;
  }
}).$mount('#app')