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的写法吧
总结
以上所述是小编给大家介绍的vue引用js文件的多种方式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持！
-
本文向大家介绍Vue单页应用引用单独的样式文件的两种方式，包括了Vue单页应用引用单独的样式文件的两种方式的使用技巧和注意事项，需要的朋友参考一下 问题描述 对于.vue的文件来说，也是由结构、行为、样式三部分组成，在样式部分有个scoped的属性，也就是当前页面有效，当style标签内样式比较多时或者.vue文件之间有重复的时候，总感觉看起来不够整洁，所以就需要引入一些公共样式。下面就先说下如何
-
本文向大家介绍详解VUE中常用的几种import（模块、文件）引入方式，包括了详解VUE中常用的几种import（模块、文件）引入方式的使用技巧和注意事项，需要的朋友参考一下 1 引入第三方插件 2 引入工具类 第一种是引入单个方法 下面是写法，需要export导出 第二种 导入成组的方法 其中tools.js中有多个export方法,把tools里所有export的方法导入 vue中怎么用呢？
-
本文向大家介绍在js文件中引入（调用）另一个js文件的三种方法，包括了在js文件中引入（调用）另一个js文件的三种方法的使用技巧和注意事项，需要的朋友参考一下 比如我写了一个JS文件，这个文件需要调用另外一个JS文件，该如何实现呢？下面就总结下在js文件中引入另一个js文件的实现 方法一，在调用文件的顶部加入下例代码 注：有时你引用的文件还可能需要引用其他的js,我们需要将需要的那个js文件也以同
-
本文向大家介绍js在HTML的三种引用方式详解，包括了js在HTML的三种引用方式详解的使用技巧和注意事项，需要的朋友参考一下 1.内联样式 内联样式分为两种，一是直接写入元素的标签内部 二是写入到<script></script>标签中 给元素添加id 通过getElementById('XX');方法定位到该元素，给该元素添加触发事件 注意：<script></script>标签应该放在</b
-
本文向大家介绍详解vue文件中使用echarts.js的两种方式，包括了详解vue文件中使用echarts.js的两种方式的使用技巧和注意事项，需要的朋友参考一下 最近工作中需要用到echarts，由于项目是用的vue-cli开发的。在网上搜到vue中合成了vue-echarts，但是不想使用vue中规定好的数据格式，于是就自己做了一个vue项目引用原生echarts的简单demo，实现过程如下：
-
本文向大家介绍js改变css样式的三种方法推荐，包括了js改变css样式的三种方法推荐的使用技巧和注意事项，需要的朋友参考一下 共用代码： <div id="div"> this is a div </div> var div=document.getElementById('div'); 第一种：用cssText div.style.cssText='width:250px;height:250