共计 1072 个字符，预计需要花费 3 分钟才能阅读完成。
| 导读 | 本文主要介绍了 vue 引用 js 文件的多种方式, 本文大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下 |
1、vue-cli webpack 全局引入 jquery
(1) 首先 npm install jquery –save (–save 的意思是将模块安装到项目目录下，并在 package 文件的 dependencies 节点写入依赖。)
(2) 在 webpack.base.conf.js 里加入
var webpack = require("webpack")(3) 在 module.exports 的最后加入
plugins: [new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
](4) 在 main.js 引入就 ok 了 (测试这一步不用也可以)
import $ from 'jquery'(5) 然后 npm run dev 就可以在页面中直接用 $ 了.
2、vue 组件引用外部 js 的方法
项目结构如图:
content 组件代码：
<template>
<div>
<input ref='test' id="test">
<button @click='diyfun'>Click</button>
</div>
</template>
<script>
import {myfun} from '../js/test.js' // 注意路径
export default {data () {
return {testvalue: ''}
},
methods:{diyfun:function(){myfun();
}
}
}
</script>test.js 代码：
function myfun() {console.log('Success')
}
export { // 很关键
myfun
}用到了 es6 的语法。
3、单 vue 页面引用内部 js 方法
(1) 首先 npm install jquery –save (–save 的意思是将模块安装到项目目录下，并在 package 文件的 dependencies 节点写入依赖。)
(2) 在需要引用的 vue 页面 import 引入 $, 然后使用即可
这个图中有黄色的警告，如果把 console.log($) 改成这样:
export default{mounted: function(){console.log($)
}
}就不会有了，原因可能是得符合 vue 中 js 的写法吧
正文完
星哥玩云-微信公众号
