[TOC]

一脚手架配置

1.1 安装vue/cli

需要先确定环境中安装了：node
1、执行npm命令安装 vue-cli，CLI（command line interface）
如果安装失败，可以先安装 cnpm 命令，或者将 npm 仓库地址修改为阿里云镜像地址

npm install -g @vue/cli

2、创建vue项目

vue create vue-test

注意：npm的镜像仓库需要配置成国内的源，如阿里云的源

npm config set registry http://registry.npm.taobao.org/

1.2 分析脚手架目录

/vue-cli-demo
    --.getignore               配置git忽略的目录文件
    --babel.config.js        一般不需要动
    --package.json            
    --package-lock.json        配置项目的基本信息，如版本名称等
    --vue.config.js            可以对脚手架进行定制个性化
    --src
        --main.js            项目的入口文件
        --App.vue            
        --components
        --assets
    --public
        --index.html        首页
        --favicon.ico        网站的图标

main.js ```javascript /**
- 该文件是整个项目的入口 */

// 引入vue import Vue from ‘vue’ // 引入app组件，它是所有组件的父组件 import App from ‘./App.vue’

// 关闭vue的生产提示 Vue.config.productionTip = false

/**

创建vue实例对象 — vm */ new Vue({ // 这行代码的作用：将App组件放入到了容器当中 render: h => h(App), }).$mount(‘#app’) ```
二常见的用法
2.1 ref属性
1、ref属性被用来给元素或者子组件上注册引用信息（id的替代者）
2、应用在html标签上获取到的是真实DOM元素，应用在组件标签上是组件实例对象（VC）
3、使用方式
标识：
或者
获取：this.$refs.xxx ```vue

<a name="eJPjc"></a>
## 2.2 props配置
props可以让组件接收到外部传进来的信息<br />注意：props是只读的，Vue底层会检测对props的修改，如果进行了修改，会发出警告，若是业务种确实需要修改，那么建议先复制一份数据到data当中，然后去修改data种的数据<br />（1）传递数据
```vue
<School  name="xxx"/>

（2）接收数据
第一种方式：简答接收

props: ['name', 'age']

第二种方式：接受数据的同时对类型进行限制

props: {
    name: String,
    age: Number
}

第三种方式：更详细的写法

props: {
  name: {
    type: String, // 类型
    required: true, // 是否是必须的
  },
  age: {
    type: String,
    required: false,
    default: 99 // 默认值
  }
}

2.3 mixin混入

功能：可以将多个组件公用的配置提取成为一个混入对象
使用方式：
（1）第一混入，用一个JS文件来抽取

export const a = {
  data() {
    return {
      x: 10,
      y: 'I am y'
    }
  }
}

（２）使用混入
局部混入，只在当前组件对象有效

<script>
  // 混合JS对象的引入方式，需要使用大括号
  import {a} from '@/mixin'

  export default {
    name: "School",
    data() {
      return {}
    },
    mixins: [a]
  }
</script>

全局混入，在每个组件对象都会插入这些公用配置

Vue.mixin(a)

2.4 插件

本质：vue中的插件本质是一个对象，包含install方法，install方法的第一个参数是Vue，第二个以后的参数是插件的使用者传递的参数。
功能：用于增强Vue

export default {
    install(Vue) {
        console.log('-----plugins-----')

        // 全局过滤器
        Vue.filter('mySlice', function (val) {

        })

        // 定义全局指令
        Vue.directive('fbind', {})

        // 定义混入
        Vue.mixin({})

        // 给vue原型上添加一个方法（vm和vc都可以使用了）
        Vue.prototype.halo = () => {
            alter('你好！！！')
        }
    }
}

在main.js中使用插件，先引入再进行使用

import plugins from "./plugins";
Vue.use(plugins)

2.5 浏览器本地存储

window.localStorage：这个是JavaScript提供的本地存储对象，可以在浏览器中存储一些需要的数据，localStorage存储的数据需要手动清除才会消失。注意：这里的键值对只能存储字符串，数值会被转换为字符串，对象会自动调用 toString 方法
window.sessionStorage：会话存储，和 localStorage 使用的 API 是一样的，但是这个存储的数据会随着浏览器的关闭而消失 ```html

<a name="mATeU"></a>
## 2.6 自定义事件
绑定：

- 给组件绑定一个事件，这个事件可以自己定义
```vue
<template>
  <div id="app">
    <!-- 通过父组件给子组件传递函数类型的props实现：子组件给父组件传递数据 -->
    <School :getSchoolName="getSchoolName"></School>

    <!-- 绑定了 cyan 事件, 父组件给子组件绑定一个自定义事件实现：
                子组件给父组件传递数据（第一种写法：v-on，@） -->
    <Student v-on:cyan="getStudentName"></Student>

    <!-- 绑定了 cyan 事件, 父组件给子组件绑定一个自定义事件实现：
                子组件给父组件传递数据（第二种写法，使用ref属性） -->
    <Student ref="student"></Student>
  </div>
</template>

<script>
import School from "@/components/School";
import Student from "@/components/Student";

export default {
  name: 'App',
  // 注册组件
  components: {
    Student,School
  },
  data() {
    return {}
  },
  methods: {
    getSchoolName(name) {
      console.log('app收到学校的名称：', name)
    },
    getStudentName(name) {
      console.log('app收到了学生姓名：', name)
    }
  },
  mounted() {
    // 可以实现延迟将事件挂载在组件上
    setTimeout(() => {
      // console.log('开始将事件绑定到Student组件')
      this.$refs.student.$on('cyan', this.getStudentName) // 给组件绑定自定义事件
      // this.$refs.student.$once('cyan', this.getStudentName) // 绑定事件，只生效一次
    }, 3000)
  }
}
</script>

触发绑定的事件

由于自定义的事件不像JS的原生事件一样，可以通过外设触发，这里可以在方法中，对其如果这个方法被调用了，就顺便触发这个事件

<template>
  <div>
    <h3>学生姓名：{{ name }}</h3>
    <h3>学生年龄：{{ age }}</h3>
    <button @click="sendName">获取学生姓名</button>
    <button @click="unbind">解绑cyan事件</button>
    <button @click="death">销毁当前组件的VC实例</button>
  </div>
</template>

<script>
export default {
  name: "Student",
  data() {
    return {
      name: '小红',
      age: 19
    }
  },
  methods: {
    sendName() {
      // 触发绑定在Student组件身上的 cyan 事件，其他组件引用时给Student组件绑定的
      this.$emit('cyan', this.name)
    },
    unbind() {
      // this.$off('cyan') // 解绑一个自定义事件
      // this.$off(['cyan', 'cyan2']) // 解绑多个自定义事件
      this.$off() // 解绑所有自定义事件
    },
    death() {
      console.log('销毁student组件实例')
      this.$destroy() // 销毁了当前组件的VC实例
    }
  }
}
</script>

2.7 全局事件总线

这是一种组件间通信的方式，可以任意组件间进行通信，不用再考虑组件之间的关系

安装全局事件总线

new Vue({
  el: '#app',
  // 这行代码的作用：将App组件放入到了容器当中
  render: h => h(App),
  beforeCreate() {
      Vue.prototype.$bus = this // 安装全局事件总线
  }
})

使用全局事件总线，即向其他组件发送消息 ```vue

```vue
<script>
export default {
  name: "Student",
  methods: {
    sendStudentName() {
      // 触发事件，向其他组件发送消息
      this.$bus.$emit('halo', 'Ozds')
    }
  }
}
</script>

2.8 订阅发布

这个目前有很多实现的库，这里选择使用 pubsub-js 这个库，使用前需要提前安装【npm i pubsub-js】

订阅消息，回调函数的第一个参数是【消息名】，第二个参数是【接受到的数据】

同样的，最好也在组件销毁前取消订阅，需要根据订阅Id来取消

<script>
import pubsub from 'pubsub-js'

export default {
  name: "School",
  mounted() {
    this.subId = pubsub.subscribe('halo', (msgName, msg) => {
      console.log('有人发布了消息，执行回调函数', msgName, msg)
    })
  },
  beforeDestroy() {
    // 取消订阅
    pubsub.unsubscribe(this.subId)
  }
}
</script>

发布消息 ```vue
```
<a name="I4maU"></a>
## 2.9 $nextTick
语法:
```json
this.$nextTick(()=>{console.log('I am a function')})
```
作用：在下一次 DOM 更新结束时候执行它里面的回调函数
什么时候使用：当改变数据后，要基于更新后的DOM进行某些操作的时候，要在nextTick中的函数执行

2.10 配置代理
方法一：
在 vue.config.js 中添加配置
但是这个的只是个简写，配置简单，请求资源的时候，直接发给自己就好。
缺点：就是不能配置多个代理，不能灵活的控制请求是否走代理。
工作方式：这个会优先匹配 public 目录下的，如果找到则不会再走代理
```
devServer: {
    proxy: 'http://localhost:5000'
}
```
方式二：
```
devServer: {
  proxy: {
    // 表示这个前缀的请求会被代理转发
    '/api': {
                target: 'http://locahost:5000',
                pathRewrite: {'^/api': ''}, // 表示会将/api/替换成空格，即删减
                ws: true, // 支持webSocket
        changeOrigin: true // 控制更改请求头的host值
    }
  }
}
```
2.11 插槽
在使用组件的时候，自定义的标签里面可以使用子标签定义内容，然后在组件定义的时候，使用来指定子标签的内容放置的位置。

三 Vuex
vuex是专门在 vuex 中实现集中式管理状态（数据）的一个vue插件，对于vue应用中的多个组件的共享数据进行集中式的管理（读写），也是组件间的一种通信方式，且适用于任意组件之间的通信

前端开发

03丶Vue脚手架

一脚手架配置

1.1 安装vue/cli

1.2 分析脚手架目录

二常见的用法

2.1 ref属性

2.3 mixin混入

2.4 插件

2.5 浏览器本地存储

2.7 全局事件总线

2.8 订阅发布

2.10 配置代理

2.11 插槽

三 Vuex

03丶Vue脚手架

一 脚手架配置

1.1 安装vue/cli

1.2 分析脚手架目录

二 常见的用法

2.1 ref属性

2.3 mixin混入

2.4 插件

2.5 浏览器本地存储

2.7 全局事件总线

2.8 订阅发布

2.10 配置代理

2.11 插槽

三 Vuex

一脚手架配置

二常见的用法