問題描述

一個公共方法，在.vue文件中怎么使用呢，目前試過不能直接通過方法名調(diào)用

舉個例子比如：

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

有兩個疑問：1.方法應(yīng)該寫在哪里，是寫在main.js中還是另外建一個文件common.js ，import到main.js中？2.我在Login.vue文件中要怎么調(diào)用它，直接getId()是不行的，會報錯 getId is not defined

問題解答

這個一般有幾種加載方法，具體看插件包的結(jié)構(gòu)而定，但基本都是在main.js或者App.vue里添加加載代碼。

如果插件包是純粹的JS、CSS文件，并且暴露了全局插件變量，則只要import ’xxxxxx’就可以了，其中xxxxxx是JS或者CSS的路徑。此類插件如jQuery和Bootstrap。

但是需要注意，jQuery的JS文件經(jīng)過import ’....’加載之后不能直接使用，需要在打包腳本配置webpack.base.conf.js中添加如下配置（部分配置省略）：

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

另外注意在此配置的頭部添加var webpack = require(’webpack’)，防止報錯webpack未定義。

如果是插件已經(jīng)模塊化了，暴露了對象或者方法，但是無法跨模塊使用（比如通過npm安裝到項目的bootbox插件），我是通過在框架App.vue里添加import bootbox from ’bootbox/bootbox.js’，然后在App.vue的data中添加一行bootbox: bootbox，在其他Vue頁面中通過this.$root.bootbox調(diào)用bootbox插件的。

還有一種插件，不能通過import的方法加載，需要使用var xxx = require(’xxx’)的方式加載。這種插件一般是作為Vue框架的插件來用的，比如Vue-filter。這種一般是在main.js里添加var vueFilter = require(’vue-filter’)加載，然后用Vue.use(vueFilter)使vue-filter在Vue應(yīng)用中注冊。

按照你的描述，這個方法另寫一個文件和直接寫main.js里實現(xiàn)起來是沒有區(qū)別的。建議在App.vue里寫這個方法，然后加到methods里去，在需要調(diào)用的地方使用this.$root.getId()調(diào)用（參見上面第三種情況）

直接在main.js中import進(jìn)去就行了。

建議學(xué)習(xí)一下ES6的module，將你的共用的方法寫成模塊，在需要調(diào)用的模塊調(diào)用，也可以寫在main.js里面：

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

然后全局調(diào)用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>回答6：

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

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

})(window);

2.引入main.jsimport './common.js'

3.在任何.vue文件里面都可以調(diào)用<script>export default{

created(){ getId(selector);}

}</script>

就像@rehapun 回答的那樣做的方式挺好的，我平時就是這樣用的，另外我在補(bǔ)充下，不用擔(dān)心重復(fù)引用導(dǎo)致打包體積變大，在webpack打包時可以使用CommonsChunkPlugin抽取一個公共的 vendor.js。

首先引用你定義的js文件import ’文件的位置’，

<script> export default {data() { // 這里面是存放數(shù)據(jù)的 return{}},methods:{ // 這里就是使用你定義的方法 getId('參數(shù)');} }</script>