vue-cli项目引用外部js代码

刚接触到vue的单页面应用， 所有的页面采用组件化的拼凑改变。而组件文件中的编码组成结构如下：

<template>
  <div class="hello">
  
  </div>
</template>
<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>
<style scoped>
h1, h2 {
  font-weight: normal;
}

</style>

可以看出包含html模板样式，script ，style ，所以一般的处理操作都可以写在.vue的组件文件中。但是遇到要引用外部定义的公有方法或者变量怎么办？其实我们可以这样：

1.在要被引入方法的js文件底部加上export，将你需要在组件中引入的方法在里面进行定义。可以将这个操作理解为将该方法进行注册，而注册的名字就是该方法的名字。

/**
 * 网络post请求可选择是否带参
 * @param {*} url    请求地址
 * @param {*} data   请求数据
 * @param {*} success 正确的回调方法  
 * @param {*} error   错误的回调方法
 */
function post(url , data , success , error) {
     $.ajax({  
              type : 'post',  
              url : url,
              data : data,
              dataType: "json",
              contentType: "application/json; charset=UTF-8",
              success : function(result) { 
                 if(result.code  !== '001') {
                     //请求的常规错误
                     error(result);
                 }else{
                     //无常规错误，根绝data数据做具体的业务判断显示
                     success(result.data)
                 }
              },
              error : function erryFunction() {
                  //网络请求错误
                 error("");
              }
          });
};
/**
 * 网络get请求，可选择是否带参
 * @param {*} url   请求地址
 * @param {*} data  请求参数
 * @param {*} success 正确的回调方法
 * @param {*} error  错误的回调方法
 */
function get(url , data , success , error) {
     $.ajax({  
              type : 'get',  
              url : url,
              data : data,
              dataType: "json",
              contentType: "application/json; charset=UTF-8",
              success : function(result) { 
                 if(result.code  !== '001') {
                     //请求的常规错误
                     error(result);
                 }else{
                     //无常规错误，根绝data数据做具体的业务判断显示
                     success(result.data)
                 }
              },
              error : function erryFunction() {
                  //网络请求错误
                 error("");
              }
          });
};
export { //很关键
  post,
  get
}

2.在需要引用的组件中import，就可以直接使用如下：

import {post} from '../../assets/util/httpUtils.js'
import {sleep} from '../../assets/util/httpUtils.js'
import {urls} from '../../assets/util/url.js'
export default {
  name: 'ds_top',
  data() {
    return {
        loding : 0,
        result : 0,
    }
  },
  methods:{
      //测试链接
      datatest:function(){
        var curre = this;
        this.loding = 1;
        //发送测试请求
       var data  = JSON.stringify({"dsname":$.trim($("#resouce-name").val()),"dbms":$.trim($("#resouce-type").val()),"driver":$.trim($("#resouce-class").val()),"url":$.trim($("#resouce-url").val()),"username":$.trim($("#resouce-username").val()),"password":$.trim($("#resouce-password").val()) });
     post(urls.dataTestUrl , data , function success(data) {
          curre.loding = 2;
          curre.result = (data.state ==true )?1:2;
        },function error(resut){
          curre.loding = 2;
          curre.result = 2;
        });
      },

3.其中使用urls也是外部js定义，其定义方法如下：

var baseUrl = "http://10.6.10.152:8080/cdm";
var urls ={
    dataTestUrl : baseUrl+"/ds/test",
    dataSaveUrl :baseUrl+"/ds/add",
    dsUrl :baseUrl+"/ds",
    dataInfo:baseUrl+"/ds/",
    tableInfoUrl:baseUrl+"/ds/"

};
export{
    urls
}