一個公共方法,在.vue檔案中怎麼使用呢,目前試過不能直接透過方法名稱呼叫
舉個例子比如:
function getId(selector) {
return document.getElementById(selector);
}
有兩個疑問:
1.方法應該寫在哪裡,是寫在main.js中還是另外建一個檔案common.js ,import到main.js中?
2.我在Login.vue檔案中要怎麼呼叫它,直接getId()是不行的,會報錯 getId is not defined
這個一般有幾種載入方法,具體看插件包的結構而定,但基本上都是在
main.js
或App.vue
裡加入載入程式碼。如果插件包是純粹的JS、CSS文件,並且暴露了全局插件變量,則只要
import 'xxxxxx'
就可以了,其中xxxxxx
是JS或者CSS的路徑。此類插件如jQuery和Bootstrap。但是需要注意,jQuery的JS檔案經過
import '....'
載入之後不能直接使用,需要在打包腳本配置webpack.base.conf.js
中加入以下設定(部分設定省略):另外注意在此配置的頭部添加
var webpack = require('webpack')
,防止報錯webpack
未定義。如果是插件已經模組化了,暴露了物件或方法,但是無法跨模組使用(例如透過
,然後在npm
安裝到專案的bootbox
插件),我是透過在框架App.vue
裡添加插件),我是透過在框架
App.vue裡添加
插件),我是透過在框架App.vue
裡添加插件),我是透過在框架
App.vue裡添加
外掛import bootbox from 'bootbox/bootbox.js'data
main.js中加入一行
bootbox: bootbox,在其他Vue頁面中透過
.$root.bootbox 。還有一種插件,不能透過
import
的方法加載,需要使用var xxx = require('xxx')
的方式加載。這種插件一般是作為Vue框架的插件來用的,例如Vue-filter
。這種一般是在加載,然後用
main.jsVue.use(vueFilter)
使vue-filter
在Vue應用中註冊。依照你的描述,這個方法另寫一個檔案和直接寫
直接在
main.js
中import
進去就行了。建議學習ES6的module,將你的共用的方法寫成模組,在需要調用的模組調用,也可以寫在main.js裡面:
然後全域呼叫
window.util.xxx
。this.url.commonUrl
`寫在另外一個文件, 作為工具類, 在別的任何地方, 不限於
.vue
文件都可以引入.(util.js)
(login.vue)
1.新建一個common.js寫如下:
(function(win, undefined) {
})(window);
2.引入main.js
import "./common.js"
3.在任何.vue檔案裡面都可以呼叫
}
就像@rehapun 回答的那樣做的方式挺好的,我平時就是這樣用的,另外我在補充下,不用擔心重複引用導致打包體積變大,在webpack打包時可以使用CommonsChunkPlugin抽取一個公共的vendor .js。
先引用你定義的js檔案
import '檔案的位置'
,