javascript - Cara menggunakan pemalam js asli dalam vue

Question

Bagaimana untuk menggunakan kaedah awam dalam fail .vue? Saya telah mencuba setakat ini dan ia tidak boleh dipanggil terus melalui nama kaedah

Contohnya:

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

Saya ada dua soalan:
1 Di manakah kaedah itu harus ditulis dalam main.js atau patutkah saya mencipta fail common.js yang berasingan dan mengimportnya ke main.js?
2. Bagaimanakah cara saya memanggilnya dalam fail Login.vue Direct getId() tidak akan berfungsi, dan ralat getId tidak ditakrifkan akan dilaporkan

Answer 1

Secara amnya terdapat beberapa kaedah pemuatan, bergantung pada struktur pakej pemalam, tetapi pada asasnya kod pemuatan ditambah dalam main.js或者App.vue.

• Jika pakej pemalam ialah fail JS atau CSS tulen dan mendedahkan pembolehubah pemalam global, maka selagi import 'xxxxxx'就可以了，其中xxxxxx ialah laluan ke JS atau CSS. Pemalam tersebut termasuk jQuery dan Bootstrap.

• Tetapi perlu diingatkan bahawa konfigurasi berikut ditambahkan pada fail jQuery JS melalui import '....'加载之后不能直接使用，需要在打包脚本配置webpack.base.conf.js (sebahagian daripada konfigurasi ditinggalkan):

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

Juga perhatikan penambahan var webpack = require('webpack')，防止报错webpacktidak ditentukan dalam pengepala konfigurasi ini.

• Jika pemalam telah dimodulasi dan terdedah kepada objek atau kaedah, tetapi tidak boleh digunakan merentas modul (seperti memanggil pemalam peti but melalui npm安装到项目的bootbox插件），我是通过在框架App.vue里添加import bootbox from 'bootbox/bootbox.js'，然后在App.vue的data中添加一行bootbox: bootbox，在其他Vue页面中通过this.$root.bootbox.

• Terdapat juga plug-in yang tidak boleh didaftarkan dalam aplikasi Vue melalui import的方法加载，需要使用var xxx = require('xxx')的方式加载。这种插件一般是作为Vue框架的插件来用的，比如Vue-filter。这种一般是在main.js里添加var vueFilter = require('vue-filter')加载，然后用Vue.use(vueFilter)使vue-filter.

• Menurut penerangan anda, kaedah ini menulis fail lain dan menulis main.js里实现起来是没有区别的。建议在App.vue里写这个方法，然后加到methods里去，在需要调用的地方使用this.$root.getId()panggil terus (lihat kes ketiga di atas)

Answer 2

Hanya masuk terus di main.js中import.

Answer 3

Adalah disyorkan untuk mempelajari modul ES6, menulis kaedah biasa anda sebagai modul, dan memanggilnya dalam modul yang perlu dipanggil Anda juga boleh menulisnya dalam main.js:

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

Kemudian hubungi window.util.xxx secara global.

Answer 4

Beginilah cara saya mengendalikannya, mencipta js common.js baharu dan tentukan pembolehubah global anda

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

export default{
    commonUrl
}

Kemudian anda memperkenalkan common.js ke dalam main.js

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

Kemudian anda boleh menggunakan pembolehubah global ini dalam fail login.vue anda seperti ini

this.url.commonUrl`

Answer 5

Ditulis dalam fail lain, sebagai kelas alat, ia boleh diimport di tempat lain, tidak terhad kepada .vue fail.
(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. Cipta common.js baharu dan tulis seperti berikut:
(function(win, undefined) {

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

})(tingkap);

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

3 Boleh dipanggil dalam mana-mana fail .vue
<skrip>
eksport lalai{

created(){
    getId(selector);
}

}
</skrip>

Answer 7

Sama seperti jawapan @rehapun, cara melakukannya saya biasanya menggunakan cara ini, selain itu, saya ingin menambah bahawa anda tidak perlu risau tentang rujukan berulang menyebabkan jumlah pembungkusan anda boleh menggunakan CommonsChunkPlugin untuk mengekstrak vendor awam apabila membungkus dalam webpack .js.

Answer 8

Pertama petikan fail js yang anda takrifkanimport '文件的位置',

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