vue添加全局变量

vue添加全局变量分为3个步骤

1 建立js的util文件并输出带方法属性的对象

export default {

  // 初始化分页

  gMember() {

    console.log('gMember')

}

}

2 在main.js文件将带方法属性的对象挂载在vue中

import util from '../static/js/util.js'

Vue.prototype.$util = util

本节我们将介绍 Vue 的插件。包括什么是插件、如何使用插件、如何编写一个简单的插件。其中，编写和使用插件是本节的重点。本节我们将带领大家写一个简单的插件示例，同学们在学完本节后可以尝试编写其他的插件来加深学习。

Vue 插件是对 Vue 全局功能的扩展，他可以给 Vue 添加全局方法、属性、组件、过滤器、指令等等。

通过全局方法 Vue.use () 使用插件。它需要在你调用 new Vue () 启动应用之前完成：

也可以传入一个可选的选项对象：

Vue.use 会自动阻止多次注册相同插件，即使多次调用也只会注册一次该插件。 Vue.js 官方提供的一些插件 (例如 vue-router) 在检测到 Vue 是可访问的全局变量时会自动调用 Vue.use ()。然而在像 CommonJS 这样的模块环境中，你应该始终显式地调用 Vue.use ()：

awesome-vue 集合了大量由社区贡献的插件和库。

Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：

接下来，我们写一个具体的插件示例：

实例演示

"运行案例" 可查看在线运行效果

代码解释： JS 代码第 3-20 行，我们定义了插件 MyPlugin，该插件中包含一个全局组件 MyButton。 JS 代码第 22 行，通过 Vue.use 使用 MyPlugin。 HTML 代码第 2、4、6、8、10 行，使用 MyPlugin 插件中的 MyButton 组件。

本节，我们带大家学习了 Vue 插件的使用方式。主要知识点有以下几点：

全局的请求进度条，我们可以使用nprogress来实现，效果如下：

首先需要安装插件：

npm i nprogress -S

然后使用的时候主要有两种方式，第一种是切换页面的时候，第二种则是请求接口的时候。

切换页面可以在入口文件添加如下代码：

import NProgress from 'nprogress' // 引入nprogress插件

import 'nprogress/nprogress.css' // 这个nprogress样式必须引入

router.beforeEach((to, from, next) =>{

NProgress.start()

next()

})

router.afterEach(() =>{

NProgress.done()

})

接口请求的时候，则是在axios拦截器处进行处理，直接上代码：

// axios请求拦截器

axios.interceptors.request.use(

config =>{

NProgress.start() // 设置加载进度条(开始..)

return config

},

error =>{

return Promise.reject(error)

}

)

// axios响应拦截器

axios.interceptors.response.use(

function(response) {

NProgress.done() // 设置加载进度条(结束..)

return response

},

function(error) {

return Promise.reject(error)

}

)

当然也可以对进度条进行样式自定义

#nprogress .bar {

background: red !important//自定义颜色

}

。。。。。。。。。。。。。

作者：MonkeySoft

篇幅有限更多请见扩展链接：http://www.mark-to-win.com/tutorial/50674.html

---