脚本之家

电脑版
提示:原网页已由神马搜索转码, 内容由www.jb51.net提供.
您的位置：首页→ 网络编程→ JavaScript→ javascript类库→ vue.js→ vue引用js文件

vue引用js文件的多种方式(推荐)

  更新时间：2018年05月17日 15:08:32  作者：Day_by_day93 
这篇文章主要介绍了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 实现element upload上传图片到阿里云
      这篇文章主要介绍了VUE 实现element upload上传图片到阿里云，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
      2020-08-08
    • vue3.0中sass全局的使用过程
      这篇文章主要介绍了vue3.0中sass全局的使用过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
      2022-04-04
    • Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
      这几天在做项目时遇到微信扫描二维码的然后进入公众号网页巴拉巴拉的，然后就很顺利的遇到了在安卓端扫码的时候，顺利的一塌糊涂，然后到了苹果端的时候，就只能出现一个保存图片，然后就写一下记录一下这问题的解决方法
      2020-01-01
    • Vue.Draggable实现拖拽效果
      这篇文章主要介绍了Vue.Draggable实现拖拽效果，使用简单方便 ，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
      2017-06-06
    • Vue2.x和Vue3.x的双向绑定原理详解
      这篇文章主要给大家介绍了关于Vue2.x和Vue3.x的双向绑定原理的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
      2020-11-11
    • vue使用exif获取图片经纬度的示例代码
      这篇文章主要介绍了vue使用exif获取图片经纬度的示例代码，帮助大家更好的利用vue获取图片信息，感兴趣的朋友可以了解下
      2020-12-12
    • vue element实现表格合并行数据
      这篇文章主要为大家详细介绍了vue element实现表格合并行数据，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
      2020-11-11
    • element-ui中的clickoutside点击空白隐藏元素
      这篇文章主要为大家介绍了element-ui中的clickoutside点击空白隐藏元素示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
      2023-03-03
    • 关于Vue中的计算属性和监听属性详解
      这篇文章主要介绍了关于Vue中的计算属性和监听属性详解,Vue.js模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的，在模板内放入过长的或复杂的逻辑时，会让模板过重且难以维护,需要的朋友可以参考下
      2023-05-05
    • VUE配置history路由模式配置详细举例
      这篇文章主要给大家介绍了关于VUE配置history路由模式配置的相关资料,History模式是Vue路由的另一种模式,在History模式下URL中的路径不再使用#符号,而是直接使用正常的路径形式,需要的朋友可以参考下
      2023-12-12

    最新评论