混入

Question

main.js有这段代码

window.l = function () { }
try {
  window.l = console.log.bind(console)
} catch (e) { }

适用于非Vue应用。但是，在致电

时

l("test")

来自Vue动作/方法，它抱怨它没有被定义。

这怎么可行？

推理：需要输出一些调试数据，尽可能少打字。

Answer 1

如果要向Vue添加全局级功能，通常应使用 mixins 或插件。

对于下一个示例，我假设您使用 vue-cli 和完整的 webpack 模板。此外，我们将使用App.vue作为实际参考，但您可以将相同的原则应用于其他组件......

混入

使用以下代码创建名为log.js（在mixins文件夹中）的mixin：

export default {
  methods: {
    l (...args) { // rest parameters
      console.log(...args) // spread operator
    }
  }
}

打开App.vue，导入你的mixin并使用它：

<script>
  import log from './mixins/log'

  export default {
    name: 'app',
    mixins: [log],
    created () {
      this.l('Foo', 'Bar') // Foo Bar
    }
  }
</script>

插件

使用以下代码创建名为log.js的插件（在plugins文件夹中）：

export default {
  install (Vue, options) {
    Vue.prototype.$l = console.log.bind(console)
    Vue.l = console.log.bind(console)
  }
}

打开main.js并声明您的全局插件：

import log from './plugins/log'
Vue.use(log)

打开App.vue，导入Vue并使用您的插件：

<script>
  import Vue from 'vue'

  export default {
    name: 'app',
    created () {
      this.$l('Foo') // Foo
      Vue.l('Bar') // Bar
    }
  }
</script>

你可能会说：“嘿，我为什么要写this或Vue？我只想写l，就是这样！”。嗯......这实际上是Vue的设计方式。为了提供全局功能（由所有组件共享），您必须将静态属性添加到Vue对象或原型属性（Vue.prototype ）可以通过this个实例中的Vue访问。

修改

我刚考虑了另一种解决方案......

您可以修改index.html以添加此内容：

<script> var l = console.log.bind(console) </script>

然后，为了避免ESLint错误，您还应编辑.eslintrc.js文件以引用新的全局变量：

globals: { l: true }

该文件如下所示：

// http://eslint.org/docs/user-guide/configuring module.exports = { root: true, parser: 'babel-eslint', parserOptions: { sourceType: 'module' }, globals: { l: true }, env: { browser: true, }, // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style extends: 'standard', // required to lint *.vue files plugins: [ 'html' ], // add your custom rules here 'rules': { // allow paren-less arrow functions 'arrow-parens': 0, // allow async-await 'generator-star-spacing': 0, // allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 } }

重新启动您的开发服务器。现在您应该可以在代码中使用l：

<script>
  export default {
    name: 'app',
    created () {
      l('It works!')
    }
  }
</script>

Answer 2

像这样分配console.log。

window.l=console.log;

如何将console.log绑定到＆＃34; l＆＃34;在vue.js？

2 个答案:

混入

插件