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

一个公共方法,在.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.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.vuedata中添加一行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.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文件里面都可以调用
<script>
export default{

created(){
    getId(selector);
}

}
</script>

巴扎黑

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

为情所困

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

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