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 :
83f0
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
}