Vue常用外部组件使用

1、Vue使用axios

第一步：npm install axios

第二步:配置文件

//引入vue框架
import Vue from 'vue'
//引入资源请求插件
import axios from 'axios'
import { stringify } from 'querystring';

//axios 配置
axios.defaults.timeout = 5000;   //请求超时
axios.defaults.baseURL = "/api";
axios.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8';
//axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';

// 上面 /api 用户来配置跨域请求的  如果项目没跨域 直接写上请求地址就行
//axios.defaults.baseURL = "请求地址";

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    if (config.method === 'post') {
        //config.data = stringify(config.data);
         var data = {
             data:config.data
         }
         config.data = data;
    }
    return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});


// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});


/** 给Vue函数添加一个原型属性$axios 指向Axios这样做的好处是在vue实例或组件中不用再去重复引用Axios 直接用this.$axios就能执行axios 方法了  */
Vue.prototype.$axios = axios;

//封装GET 
export function Get(url,success,error){
    axios.get(url)
          .then(function(res){
              success(res.data);
          })
          .catch(function(err){
              error(res.data); 
          });
}

//封装POST
export function Post(url,data,success,error){
   axios.post(url,data)
        .then(function(res){
            success(res.data);
        })
        .catch(function(err){
            error(err.data);
        });
}

export default({

})

第三步：main.js使用

2、前端vue配置跨域

3、vue模拟form-data提交数据

使用qs组件库

npm install qs --save

4、解决component: () => import()不能传入变量

webpack的现在的实现方式不能实现完全动态，可以通过字符串模板来提供部分信息给webpack；

5、solt插槽使用记录

6、vue子组件调用父组件的三种方式

（1）his.$parent.方法(参数)来调用父组件的方法

（2）用$emit向父组件触发一个事件

（3）父组件把方法传入子组件中，在子组件里直接调用这个方法

https://www.cnblogs.com/jin-zhe/p/9523782.html

7、父组件直接调用子组件的方法

子组件上定义ref="refName",  父组件的方法中用 this.$refs.refName.method 去调用子组件方法

子组件中定义此方法

8、 refs 给dom添加样式

9、:style 绑定背景图

10、vue使用echarts

参考文档： 

https://www.cnblogs.com/Smiled/p/7686316.html

https://github.com/apache/incubator-echarts/blob/master/index.js

11、vue使用window.onresize事件

https://www.cnblogs.com/aidixie/p/10754683.html

12、vue使用style添加行内样式