Wie verwende ich eine öffentliche Methode in einer .vue-Datei? Ich habe es bisher versucht und sie kann nicht direkt über den Methodennamen aufgerufen werden
Zum Beispiel:
function getId(selector) {
return document.getElementById(selector);
}
Ich habe zwei Fragen:
1. Wo soll die Methode in main.js geschrieben werden oder soll ich eine separate Datei common.js erstellen und in main.js importieren?
2. Wie rufe ich es in der Datei Login.vue auf? Direktes getId() funktioniert nicht und der Fehler getId ist nicht definiert wird gemeldet
这个一般有几种加载方法,具体看插件包的结构而定,但基本都是在
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
里添加import bootbox from 'bootbox/bootbox.js'
,然后在App.vue
的data
中添加一行bootbox: bootbox
,在其他Vue页面中通过this.$root.bootbox
调用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.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文件里面都可以调用
<script>
export default{
}
</script>
就像@rehapun 回答的那样做的方式挺好的,我平时就是这样用的,另外我在补充下,不用担心重复引用导致打包体积变大,在webpack打包时可以使用CommonsChunkPlugin抽取一个公共的 vendor.js。
首先引用你定义的js文件
import '文件的位置'
,