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)