javascript - How to use native js plug-in in vue

Question

How to use a public method in a .vue file? Currently, I have tried not to call it directly through the method name

For example:

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

I have two questions:
1. Where should the method be written? Should it be written in main.js or create another file common.js and import it into main.js?
2. How do I call it in the Login.vue file? Direct getId() will not work, and an error will be reported getId is not defined

Answer 1

There are generally several loading methods, depending on the structure of the plug-in package, but basically the loading code is added in main.js or App.vue.

• If the plug-in package is a pure JS or CSS file and exposes global plug-in variables, you only need to import 'xxxxxx', where xxxxxx is the path to JS or CSS. Such plugins include jQuery and Bootstrap.

• However, it should be noted that the jQuery JS file cannot be used directly after being loaded through import '....'. You need to add the following configuration to the packaging script configuration webpack.base.conf.js (part of the configuration is omitted):

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

Also pay attention to adding var webpack = require('webpack') to the header of this configuration to prevent errors webpackis not defined.

• If the plug-in has been modularized and exposed objects or methods, but cannot be used across modules (such as the bootbox plug-in installed into the project through npm), I add it to the framework App.vue import bootbox from 'bootbox/bootbox.js', then add a line bootbox: bootbox in data of App.vue, and call the bootbox plugin through this.$root.bootbox in other Vue pages .

• There is also a plug-in that cannot be loaded through the import method. It needs to be loaded using var xxx = require('xxx'). This kind of plug-in is generally used as a plug-in for the Vue framework, such as Vue-filter. This is usually done by adding var vueFilter = require('vue-filter') to main.js, and then using Vue.use(vueFilter) to register vue-filter in the Vue application.

• According to your description, there is no difference between writing another file in this method and writing it directly in main.js. It is recommended to write this method in App.vue, then add it to methods, and use this.$root.getId() where it needs to be called (see the third case above)

Answer 2

Just enter import directly in main.js.

Answer 3

It is recommended to learn ES6 modules, write your common methods as modules, and call them in the modules that need to be called. You can also write them in main.js:

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

Then call window.util.xxx globally.

Answer 4

This is how I handle it, create a new js common.js and define your global variables

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

export default{
    commonUrl
}

Then you introduce common.js into main.js

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

Then you can use this global variable like this in your login.vue file

this.url.commonUrl`

Answer 5

Written in another file, as a tool class, it can be imported anywhere else, not limited to .vue files.
(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. Create a new common.js and write it as follows:
(function(win, undefined) {

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

})(window);

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

3. Can be called in any .vue file
<script>
export default{

created(){
    getId(selector);
}

}
</script>

Answer 7

Just like @rehapun's answer, the way of doing it is very good. I usually use it this way. In addition, I would like to add that you don't have to worry about repeated references causing the packaging volume to increase. You can use CommonsChunkPlugin to extract a public vendor when packaging in webpack. .js.

Answer 8

First quote the js file you definedimport 'location of the file',

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