概述
在.vue 后缀名的文件，和.js 后缀名的文件里，使用全局变量的语法是不一样的。.vue 模板文件可以直接访问挂载在 Vue 实例上的全局对象，而普通的.js 文件访问不到
window 对象
window 对象是浏览器下的默认对象，也就是全局对象，在没有明确指向的时候 this 指向 window。
——即使切换路由，window 对象里面的属性和方法依旧会保留
——可以在控制栏直接输入 this、window、self 都可以直接打印 window 对象
——一切全局变量和方法都是 window 的属性和方法，也就是只要没有指定作用域就会赋值给 window
<script type="text/javascript">
var name = "chunlynn";
this.sex = "man"; // 这里的this就是隐式的window对象，相当于 sex = "man";
age = 27;
</script>Prototype(原型属性)
在 Vue 在 main.js 中创建
Vue.prototype.a = 1; 这个全局的变量后；在组件 a 中使用
console.log(this.a); // => 1
this.a = 2;然后从 a 跳到 b 后
console.log(this.a); // => 1this调用属性
Windows(全局变量)
在 Vue 在 main.js 中创建
window.a = 1;在组件 a 中使用
console.log(a) // => 1a = 2;然后从 a 跳到 b 后
console.log(a) // => 2直接调用变量
Data(全局属性)
在 Vue 在 main.js 中创建
new Vue({
...
data() {
return {
...,
a: 1
...
};
},
...
});在组件 a 中使用
console.log($root.a) // => 1
$root.a = 2;然后从 a 跳到 b 后
console.log($root.a) // => 2root调用属性
Vue 文件
定义全局变量
在任意路径下创建一个.vue 文件。这里在 src/config 路径下，创建 Global.vue
Global.vue
<script>
/**
* 统一认证服务器地址
*/
// const ssoServer = "https://iamtest.by.gov.cn:8083/idp"; // 测试环境
const ssoServer = "https://iam.by.gov.cn/idp"; // 生产环境
/**
* 统一认证登出地址
*/
// const ssoServerLogout = "https://iamtest.by.gov.cn:8083/apphub/logout"; // 测试环境
const ssoServerLogout = "https://iam.by.gov.cn/apphub/logout"; // 生产环境
export default
{
ssoServer,
ssoServerLogout
}
</script>xport default 后面必须把所有全局变量名又写一遍，属于 boilerplate 代码，没办法。
main.js
import global_ from './config/Global' // 这个路径是相对于main.js的相对路径
Vue.prototype.GLOBAL = global_访问方式
通过 Vue.prototype 对象访问
import Vue from 'vue'
let a = Vue.prototype.GLOBAL.ssoServer这种写法在.vue 文件和.js 文件中都可以使用。
通过 this 关键字访问
let a = this.GLOBAL.ssoServer这种写法只能在.vue 文件中使用。.vue 模板文件中，this 关键字可以访问到 Vue.prototype 上挂载的所有对象，所以写 this 就相当于写 Vue.prototype
JS 文件
在任意.js 文件里使用 export function 语法，即可让这个方法变成全局方法
common.js
export function 个人号码加密 (号码) {
let length = 号码.length
if (length < 8) return 号码
let 开始加密位 = length / 2 - length / 5
let 结束加密位 = 开始加密位 + length / 3
let 加密位数 = 结束加密位 - 开始加密位 + 1
let 加密结果 = 号码.substring(0, 开始加密位)
for (let i = 0; i < 加密位数; i++) {
加密结果 += '*'
}
加密结果 += 号码.substring(结束加密位, length)
return 加密结果
}这样定义完了，在别的.js 和.vue 文件里面都可以调用到。调用语法是一样的。
import * as common from '@/utils/common'
// @/utils为路径， common为js文件名
let 身份证号码 = "44132319960617502X"
let 身份证号码加密 = common.个人号码加密(身份证号码)全局方法不需要挂载在 Vue 实例上，直接 import JS 文件就可以访问
vue.use
参数可以是对象（插件）或者函数
插件
首先检查插件是否已经安装，安装了就不再安装
如果没有安装，则调用插件的 install 方法，然后在 vue 的原型上注册一些插件内部的方法
如 element-ui 就会注册 $alert, $confirm 等方法，而 vue-router 则会注册 $router，$route 属性和 router-link、router-view 等组件
// element-ui
Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message; // 这样就实现了，每一个Vue组件都有$router、$route属性
Object.defineProperty(Vue.prototype, '$router', {
get () { return this._routerRoot._router }
})
// 同理，这样就是把自身的$route，代理到根组件传入的route
Object.defineProperty(Vue.prototype, '$route', {
get () { return this._routerRoot._route }
})
// 注册 <router-view>组件
Vue.component('RouterView', View)
// 注册<router-link>组件
Vue.component('RouterLink', Link)为什么 axios 不用安装
因为 axios 是一个独立于 vue 的库，不需要挂载在 vue 上也能实现发送请
参考
vue里dom节点和window对象
Vue定义全局变量、全局方法，在.vue文件和.js文件里使用
贡献者
jiechen