vue引⽤js⽂件的多种⽅式（推荐）
1、vue-cli webpack全局引⼊jquery
(1) ⾸先 npm install jquery --save (--save 的意思是将模块安装到项⽬⽬录下，并在package⽂件的dependencies节点写⼊依赖。)
(2)在f.js⾥加⼊
var webpack = require("webpack")
(3)在ports的最后加⼊
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节点写⼊依赖。)jquery在项目里是干啥的
(2) 在需要引⽤的vue页⾯import引⼊$，然后使⽤即可
这个图中有黄⾊的警告，如果把console.log($)改成这样:
export default{
mounted: function(){
console.log($)
}
}
就不会有了，原因可能是得符合vue中js的写法吧
总结
以上所述是⼩编给⼤家介绍的vue引⽤js⽂件的多种⽅式，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。