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 相关文章推荐
greybox——不开新窗口看新的网页
Feb 20 Javascript
jquery HotKeys轻松搞定键盘事件代码
Aug 30 Javascript
jqPlot Option配置对象详解
Jul 25 Javascript
使用Sticker.js实现贴纸效果
Jan 28 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
Mar 14 Javascript
TypeScript Type Innference(类型判断)
Mar 10 Javascript
JS实现title标题栏文字不间断滚动显示效果
Sep 07 Javascript
canvas实现手机端用来上传用户头像的代码
Oct 20 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
Angular2+如何去除url中的#号详解
Dec 20 Javascript
利用Node.js批量抓取高清妹子图片实例教程
Aug 02 Javascript
微信小程序收货地址API兼容低版本解决方法
May 18 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的配置文件php.ini
2006/10/09 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
解决laravel 5.1报错:No supported encrypter found的办法
2017/06/07 PHP
phpstorm 配置xdebug的示例代码
2019/03/31 PHP
PHP生成随机码的思路与方法实例探索
2019/04/11 PHP
PHP 文件上传限制问题
2019/09/01 PHP
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
jQuery使用技巧简单汇总
2013/04/18 Javascript
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
javascript实现颜色渐变的方法
2013/10/30 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
2016/05/05 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
vue通过点击事件读取音频文件的方法
2018/05/30 Javascript
详解用async/await来处理异步
2019/08/28 Javascript
python读文件逐行处理的示例代码分享
2013/12/27 Python
PyCharm代码整体缩进,反向缩进的方法
2018/06/25 Python
详解pandas使用drop_duplicates去除DataFrame重复项参数
2019/08/01 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
Python 合并拼接字符串的方法
2020/07/28 Python
python实现企业微信定时发送文本消息的实例代码
2020/11/25 Python
VSCode 自定义html5模板的实现
2019/12/05 HTML / CSS
美国班级戒指、帽子和礼服、毕业产品、年鉴:Balfour
2018/11/01 全球购物
施华洛世奇新加坡官网:SWAROVSKI新加坡
2020/10/06 全球购物
如何通过jdbc调用存储过程
2012/04/19 面试题
专科应届生求职信
2013/11/24 职场文书
俞敏洪一分钟演讲稿
2014/08/26 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
军人离婚协议书样本
2014/10/21 职场文书
暂住证明怎么写
2015/06/19 职场文书
Python 数据可视化之Bokeh详解
2021/11/02 Python
Golang MatrixOne使用介绍和汇编语法
2022/04/19 Golang
MySQL中的全表扫描和索引树扫描
2022/05/15 MySQL
nginx静态资源的服务器配置方法
2022/07/07 Servers