Vue组件

1. nanoid生成唯一id（uuid的精简版）

1. 安装
npm i nanoid 


2. 使用
import {nanoid} from nanoid
nanoid()

 

2. 消息订阅与发布（pubsub-js）——一般使用Vue中的全局事件总线

1. 安装
npm i pubsub-js


2. 使用
import pubsub from 'pubsub-js'
// 接送消息文件
//订阅 subscribe
this.pubId = pubsub.subscribe('hello', (msgName,data)=>{
  cosole.log(masName, data)
})
// 结束订阅
pubsub.unsubscribe(this.pubId)

//发送消息文件
pubsub.publish('hello',数据)

 

3. axios

　　3.1 不能配置多个代理 代理服务器已有students，将不会发送给5000服务器请求

1. 安装
npm i axios


2. 使用
import axios from 'axios'

3.发送数据
getStudents(){
  axios.get('http://localhost:8000/students').then(
    response =>{
      console.log('请求成功了', response.data)
    },
    error =>{
       console.log('请求失败了', error.message)
    }
  )
}

4.跨域处理
//在vue.config.js开启代理服务器（在vue cli中查找devServer.proxy）
 devServer: {
    proxy: 'http://localhost:5000' 
  }

 

　　3.2 代理方法2

1.发送数据
getStudents(){
  axios.get('http://localhost:8000/api/students').then(
    response =>{
      console.log('请求成功了', response.data)
    },
    error =>{
       console.log('请求失败了', error.message)
    }
  )
}

// 代理服务器方式二  ws和changeOrigin默认开启  

devServer: {
    proxy: {
      '/api': {
        target: '<url>',
        pathRewrite:{'^/api':''},//将/api/students 转化为 /students
        ws: true,//用于支持websocket
        changeOrigin: true //你问我是什么端口 我就是什么端口 
      },
      '/foo': {
        target: '<other_url>',

　　　　  pathRewrite:{'^/api':''},//将/api/students 转化为 /students

      }
    }
  }

 

4. vue-resource

1. 安装
npm i vue-resource


2. 引用
//在main.js中引入
import vueResource from 'vue-resource'
Vue.use(vueResource)

3.使用
将axios换成this.$html

 

5. Vuex

5.1  创建文件：src/store/index.js

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}

//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

5.2 在main.js中创建vm时传入store配置项

......
//引入store
import store from './store'
......

//创建vm
new Vue({
    el:'#app',
    render: h => h(App),
    store
})

 

6. 路由(vue-router)