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


Posted in Javascript onMay 17, 2018

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的方法

项目结构如图:

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引入$,然后使用即可

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

这个图中有黄色的警告,如果把console.log($)改成这样:

export default{
  mounted: function(){
    console.log($)
  }
}

就不会有了,原因可能是得符合vue中js的写法吧

总结

以上所述是小编给大家介绍的vue引用js文件的多种方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js跑步算法的实现代码
Dec 04 Javascript
在JavaScript中处理时间之getHours()方法的使用
Jun 10 Javascript
js实现正则匹配中文标点符号的方法
Dec 23 Javascript
Javascript实现前端简单的路由实例
Sep 11 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
Nov 03 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
Apr 01 Javascript
JavaScript中重名的函数与对象示例详析
Sep 28 Javascript
React Native中NavigatorIOS组件的简单使用详解
Jan 27 Javascript
小程序实现左滑删除功能
Oct 30 Javascript
从组件封装看Vue的作用域插槽的实现
Feb 12 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
Jul 05 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
Jan 26 Javascript
vue router+vuex实现首页登录验证判断逻辑
May 17 #Javascript
浅谈webpack-dev-server的配置和使用
May 17 #Javascript
Node.js模块全局安装路径配置方法
May 17 #Javascript
create-react-app修改为多页面支持的方法
May 17 #Javascript
vue 不使用select实现下拉框功能(推荐)
May 17 #Javascript
微信小程序自定义多选事件的实现代码
May 17 #Javascript
vue 标签属性数据绑定和拼接的实现方法
May 17 #Javascript
You might like
浅析PHP的ASCII码转换类
2013/07/05 PHP
php获取网页中图片、DIV内容的简单方法
2014/06/19 PHP
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
用js实现预览待上传的本地图片
2007/03/15 Javascript
JavaScript Date对象 日期获取函数
2010/12/19 Javascript
ajax中get和post的说明及使用与区别
2012/12/23 Javascript
javascript通过class来获取元素实现代码
2013/02/20 Javascript
js string 转 int 注意的问题小结
2013/08/15 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
2015/08/28 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
js控制文本框禁止输入特殊字符详解
2017/04/07 Javascript
微信小程序中的swiper组件详解
2017/04/14 Javascript
详解Angular.js中$http拦截器的介绍及使用
2017/07/04 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
2017/08/17 Javascript
基于vue组件实现猜数字游戏
2020/05/28 Javascript
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
使用jQuery实现掷骰子游戏
2019/10/24 jQuery
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
2020/06/11 Javascript
Python的Bottle框架的一些使用技巧介绍
2015/04/08 Python
python常用函数详解
2016/09/13 Python
python使用threading获取线程函数返回值的实现方法
2017/11/15 Python
django中ORM模型常用的字段的使用方法
2019/03/05 Python
在Python中append以及extend返回None的例子
2019/07/20 Python
PyTorch中Tensor的维度变换实现
2019/08/18 Python
Python HTMLTestRunner可视化报告实现过程解析
2020/04/10 Python
在主流系统之上安装Pygame的方法
2020/05/20 Python
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
德国内衣、泳装和睡衣网上商店:Bigsize Dessous
2018/07/09 全球购物
澳大利亚领先的在线药房:Pharmacy Online(有中文站)
2020/02/22 全球购物
《黄河颂》教学反思
2014/02/07 职场文书
学校消防演习方案
2014/02/19 职场文书
安全生产标语
2014/06/06 职场文书
商场消防安全责任书
2014/07/29 职场文书
2014年防汛工作总结
2014/12/08 职场文书
个人年终总结范文
2015/03/09 职场文书
Java elasticsearch安装以及部署教程
2021/06/28 Java/Android