javascript - vue中怎么使用原生js插件

问题描述

一个公共方法，在.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中添加如下配置（部分配置省略）：

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

另外注意在此配置的头部添加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里面：

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>回答6：

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

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

})(window);

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

3.在任何.vue文件里面都可以调用<script>export default{

created(){ getId(selector);}

}</script>

就像@rehapun 回答的那样做的方式挺好的，我平时就是这样用的，另外我在补充下，不用担心重复引用导致打包体积变大，在webpack打包时可以使用CommonsChunkPlugin抽取一个公共的 vendor.js。

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

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