javascript – So verwenden Sie das native JS-Plug-In in Vue

Question

Wie verwende ich eine öffentliche Methode in einer .vue-Datei? Ich habe es bisher versucht und sie kann nicht direkt über den Methodennamen aufgerufen werden

Zum Beispiel:

function getId(selector) {
    return document.getElementById(selector);
}

Ich habe zwei Fragen:
1. Wo soll die Methode in main.js geschrieben werden oder soll ich eine separate Datei common.js erstellen und in main.js importieren?
2. Wie rufe ich es in der Datei Login.vue auf? Direktes getId() funktioniert nicht und der Fehler getId ist nicht definiert wird gemeldet

Answer 1

这个一般有几种加载方法，具体看插件包的结构而定，但基本都是在main.js或者App.vue里添加加载代码。

• 如果插件包是纯粹的JS、CSS文件，并且暴露了全局插件变量，则只要import 'xxxxxx'就可以了，其中xxxxxx是JS或者CSS的路径。此类插件如jQuery和Bootstrap。

• 但是需要注意，jQuery的JS文件经过import '....'加载之后不能直接使用，需要在打包脚本配置webpack.base.conf.js中添加如下配置（部分配置省略）：

module.exports = {
    entry: { ... },
    output: { ... },
    resolve: { ... },
    ...
    plugins: [
        new webpack.ProvidePlugin({
          jQuery: "jquery",
          $: "jquery"
        })
    ]
};

另外注意在此配置的头部添加var webpack = require('webpack')，防止报错webpack未定义。

• 如果是插件已经模块化了，暴露了对象或者方法，但是无法跨模块使用（比如通过npm安装到项目的bootbox插件），我是通过在框架App.vue里添加import bootbox from 'bootbox/bootbox.js'，然后在App.vue的data中添加一行bootbox: bootbox，在其他Vue页面中通过this.$root.bootbox调用bootbox插件的。

• 还有一种插件，不能通过import的方法加载，需要使用var xxx = require('xxx')的方式加载。这种插件一般是作为Vue框架的插件来用的，比如Vue-filter。这种一般是在main.js里添加var vueFilter = require('vue-filter')加载，然后用Vue.use(vueFilter)使vue-filter在Vue应用中注册。

• 按照你的描述，这个方法另写一个文件和直接写main.js里实现起来是没有区别的。建议在App.vue里写这个方法，然后加到methods里去，在需要调用的地方使用this.$root.getId()调用（参见上面第三种情况）

Answer 2

直接在main.js中import进去就行了。

Answer 3

建议学习一下ES6的module，将你的共用的方法写成模块，在需要调用的模块调用，也可以写在main.js里面：

import util from './util.js';
window.util = util;

然后全局调用window.util.xxx。

Answer 4

我是这样处理的，新建一个js common.js，定义你的全局变量

const commonUrl = 'http://你最帅'

export default{
    commonUrl
}

然后你在main.js里面引入common.js

import common from 'common.js'
Vue.prototype.url = common

然后你就可以在你的login.vue文件中这样使用这个全局变量

this.url.commonUrl`

Answer 5

写在另外一个文件, 作为工具类, 在别的任何地方, 不限于.vue文件都可以引入.
(util.js)

export const getId = (selector) {
    return document.getElementById(selector)
}
export const getTag = (tagName) {
    // 其他的工具类
    return document.getElementsByTagName(tagName)
}

(login.vue)

<style></style>
<template></template>
<script>
import { getId } from "./util.js"
export default {
    mounted () {
        getId("targetId"))
    }
}
</script>

Answer 6

1.新建一个common.js写如下：
(function(win, undefined) {

 var getId=  function(selector) {
      return document.getElementById(selector);
 }

})(window);

2.引入main.js
import "./common.js"

3.在任何.vue文件里面都可以调用
<script>
export default{

created(){
    getId(selector);
}

}
</script>

Answer 7

就像@rehapun 回答的那样做的方式挺好的，我平时就是这样用的，另外我在补充下，不用担心重复引用导致打包体积变大，在webpack打包时可以使用CommonsChunkPlugin抽取一个公共的 vendor.js。

Answer 8

首先引用你定义的js文件import '文件的位置'，

<script>
    export default {
        data() { // 这里面是存放数据的
            return{}
        },
        methods:{ // 这里就是使用你定义的方法
            getId("参数");
        }
    }
</script>