javascript - Comment utiliser le plug-in natif JS dans Vue

Question

Comment utiliser une méthode publique dans un fichier .vue ? J'ai essayé jusqu'à présent et elle ne peut pas être appelée directement via le nom de la méthode

Par exemple :

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

J'ai deux questions :
1. Où doit-on écrire la méthode ? Doit-elle être écrite dans main.js ou dois-je créer un fichier common.js séparé et l'importer dans main.js ?
2. Comment puis-je l'appeler dans le fichier Login.vue ? Direct getId() ne fonctionnera pas et l'erreur getId n'est pas définie sera signalée

Answer 1

Il existe généralement plusieurs méthodes de chargement, selon la structure du package du plug-in, mais en gros, le code de chargement est ajouté dans main.js或者App.vue.

• Si le package du plug-in est un pur fichier JS ou CSS et expose des variables globales du plug-in, alors tant que import 'xxxxxx'就可以了，其中xxxxxx est le chemin vers JS ou CSS. Ces plugins incluent jQuery et Bootstrap.

• Mais il convient de noter que la configuration suivante est ajoutée au fichier jQuery JS via import '....'加载之后不能直接使用，需要在打包脚本配置webpack.base.conf.js (une partie de la configuration est omise) :

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

Notez également l'ajout de var webpack = require('webpack')，防止报错webpackundefined dans l'en-tête de cette configuration.

• Si le plug-in a été modularisé et exposé des objets ou des méthodes, mais ne peut pas être utilisé entre les modules (par exemple, en appelant le plug-in bootbox via npm安装到项目的bootbox插件），我是通过在框架App.vue里添加import bootbox from 'bootbox/bootbox.js'，然后在App.vue的data中添加一行bootbox: bootbox，在其他Vue页面中通过this.$root.bootbox.

• Il existe également un plug-in qui ne peut pas être enregistré dans l'application Vue via import的方法加载，需要使用var xxx = require('xxx')的方式加载。这种插件一般是作为Vue框架的插件来用的，比如Vue-filter。这种一般是在main.js里添加var vueFilter = require('vue-filter')加载，然后用Vue.use(vueFilter)使vue-filter.

• Selon votre description, cette méthode écrit un autre fichier et écrit main.js里实现起来是没有区别的。建议在App.vue里写这个方法，然后加到methods里去，在需要调用的地方使用this.$root.getId()call directement (voir le troisième cas ci-dessus)

Answer 2

Il suffit de rentrer directement sur main.js中import.

Answer 3

Il est recommandé d'apprendre les modules ES6, d'écrire vos méthodes courantes sous forme de modules et de les appeler dans les modules qui doivent être appelés. Vous pouvez également les écrire dans main.js :

.

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

Alors appelez window.util.xxx dans le monde entier.

Answer 4

C'est ainsi que je gère les choses, créer un nouveau js common.js et définir vos variables globales

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

export default{
    commonUrl
}

Ensuite, vous introduisez common.js dans main.js

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

Ensuite, vous pouvez utiliser cette variable globale dans votre fichier login.vue comme ceci

this.url.commonUrl`

Answer 5

Écrit dans un autre fichier, en tant que classe d'outils, il peut être importé n'importe où ailleurs, sans se limiter aux .vue fichiers.
(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. Créez un nouveau common.js et écrivez-le comme suit :
(function(win, undefined) {

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

})(fenêtre);

2.Introduisez main.js
import "./common.js"

3. Peut être appelé dans n'importe quel fichier .vue
<script>
export par défaut{

created(){
    getId(selector);
}

}
</script>

Answer 7

Tout comme la réponse de @rehapun, la façon de procéder est très bonne. Je l'utilise habituellement de cette façon. De plus, je voudrais ajouter que vous n'avez pas à vous soucier des références répétées entraînant une augmentation du volume de l'emballage. peut utiliser CommonsChunkPlugin pour extraire un fournisseur public lors du packaging avec webpack.

Answer 8

Citez d'abord le fichier js que vous avez définiimport '文件的位置',

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