javascript - vue中怎麼使用原生js插件
迷茫
迷茫 2017-06-26 10:57:23
0
8
1775

一個公共方法,在.vue檔案中怎麼使用呢,目前試過不能直接透過方法名稱呼叫

舉個例子比如:

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

有兩個疑問:
1.方法應該寫在哪裡,是寫在main.js中還是另外建一個檔案common.js ,import到main.js中?
2.我在Login.vue檔案中要怎麼呼叫它,直接getId()是不行的,會報錯 getId is not defined

迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

全部回覆(8)
学习ing

這個一般有幾種載入方法,具體看插件包的結構而定,但基本上都是在main.jsApp.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裡添加插件),我是透過在框架App.vue裡添加插件),我是透過在框架App.vue裡添加插件),我是透過在框架App.vue裡添加外掛import bootbox from 'bootbox/bootbox.js'

    ,然後在
  • App.vue
  • data中加入一行bootbox: bootbox,在其他Vue頁面中透過.$root.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()🎜呼叫(請參閱上面第三種情況)🎜🎜 🎜
某草草

直接在main.jsimport進去就行了。

过去多啦不再A梦

建議學習ES6的module,將你的共用的方法寫成模組,在需要調用的模組調用,也可以寫在main.js裡面:

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

然後全域呼叫window.util.xxx

淡淡烟草味

我是這樣處理的,新建一個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`

世界只因有你

寫在另外一個文件, 作為工具類, 在別的任何地方, 不限於.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>
世界只因有你

1.新建一個common.js寫如下:
(function(win, undefined) {

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

})(window);

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

3.在任何.vue檔案裡面都可以呼叫

created(){
    getId(selector);
}

}

巴扎黑

就像@rehapun 回答的那樣做的方式挺好的,我平時就是這樣用的,另外我在補充下,不用擔心重複引用導致打包體積變大,在webpack打包時可以使用CommonsChunkPlugin抽取一個公共的vendor .js。

为情所困

先引用你定義的js檔案import '檔案的位置'

<script>
    export default {
        data() { // 这里面是存放数据的
            return{}
        },
        methods:{ // 这里就是使用你定义的方法
            getId("参数");
        }
    }
</script>
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板