VUE版本：2.9.6

一、变量调用

1. config.js(外部JS文件)

//定义变量或常量
var URL_CONFIG = {
    URL : '',
	};
var URL_CONFIG2 = {
   URL : '',
};
//定义方法test
function test () {
	var url="";
	console.log(url);
	return url;
}
//导出设置使得Vue可引入，关键
export{
  URL_CONFIG,
  URL_CONFIG2,
  test
}

2.Vuetest.vue(Vue文件)

<template>
  <div>
    <p>url:{{url}}</p>
    <button v-on:click="testvue ">显示URL</button>
    <p>url2:{{url2}}</p>
  </div>
</template>
<script>
  import { URL_CONFIG,URL_CONFIG2,test } from './js/config.js'  //引入
export default {
  name: 'Vuetest',
  data: function () {
    return {
      url: URL_CONFIG.URL,
      url2:""
    }
  },
  methods: {
    testvue () {
      this.url2=test()
    }
  }
}
</script>

<style scoped>

</style>

3.注册全局变量（可选择）

Vue文件在src文件目录下，可以import…；如果在静态文件夹static目录下，可以在主页面index.html引入

  • 在main.js中引入
import URL from './js/config.js'  //引入
Vue.prototype.Global=URL;//加载到Vue原型属性
  • 全局变量使用
this.Global.URL_CONFIG.URL

二、结果

  1. 运行初始界面

java vue页面怎么引用样式 vue如何引用js_vue

  1. 点击按钮后

    **

附加

一、ES6模块主要有两个功能：export和import

export：用于对外输出本模块（一个文件可以理解为一个模块）变量的接口
import：用于在一个模块中加载另一个含有export接口的模块。

二、export 和 export default 的区别

1. 相同点：

1）利用export和export default关键字输出自定义独立文件（也成为一个模块）中的所有变量、方法等，
以提供外部使用。模块：即独立的XXX.js文件
2）export与export default均可用于导出常量、函数、文件、模块等

2. 不同点

1）在一个文件或模块中，export、import可以有多个，export default仅有一个
2）通过export方式导出，在导入时要加{ }，export default则不需要
	(1) 输出单个值，使用export default
	(2) 输出多个值，使用export
	(3) export default与普通的export不要同时使用
	出现问题：当使用export default {a, b, c, d} 容易造成嵌套多层；
	结果：{a: {a, b, c, d}, b:{a, b, c, d}, c:{a, b, c, d}, d:{a, b, c, d}} //error

export：

1）export命令对外接口的名称是一定的、不变的；
2）import命令从模块导入的变量名与被导入模块对外接口的名称相同；即大括号里面的变量名，
必须与被导入模块（xxx.js）对外接口的名称相同；
3）如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。
	import { name as newname } from './xxx.js';

export default：

1）export default命令，为模块指定默认输出。即一个模块只能有一个默认输出，也就是一个
模块export default命令只能使用一次，因此export default命令是唯一的，import命令后面
也就不用再加大括号。
2）export default命令对外输出的变量名可以是任意的，即其他模块加载该模块时，
import命令可以为该匿名函数指定任意名字。注意这时import命令后面，不使用大括号。

3.export 和 export default 的本质（转化）
export default 和就是export的一种特殊形式，或者说就是export的一个个例，即输出一个叫做default的变量或方法，然后系统允许为它取任意名字。如下：

function add(x, y) {
  return x + y;
}
export default add;// 等同于  export {add as default};

如下面的import命令，可以用任意名称指向export-default.js输出的方法，这时就不需要知道原模块输出的函数名。需要注意的是，这时import命令后面，不使用大括号。

// export-default.js
export default function () {
  	console.log('我是default函数');
}

// import-default.js
import defaultfun from './export-default';
defaultfun(); // 我是default函数

正是因为export default命令其实只是输出一个叫做default的变量，所以它后面不能跟变量声明语句。

// export-default.js
import { default as defaultfun } from './export-default';
// 等同于
import defaultfun from './export-default';