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 相关文章推荐
javascript 面向对象编程基础 多态
Aug 21 Javascript
怎么清空javascript数组
May 11 Javascript
Js控制弹窗实现在任意分辨率下居中显示
Aug 01 Javascript
js 遍历json返回的map内容示例代码
Oct 29 Javascript
jQuery 追加元素的方法如append、prepend、before
Jan 16 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
Jun 03 Javascript
js仿淘宝和百度文库的评分功能
May 15 Javascript
JavaScript 数组- Array的方法总结(推荐)
Jul 21 Javascript
vue实现点击展开点击收起效果
Apr 27 Javascript
详解webpack模块加载器兼打包工具
Sep 11 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
Jul 19 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
Jul 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 编写的日历
2006/10/09 PHP
getJSON跨域SyntaxError问题分析
2014/08/07 PHP
跟我学Laravel之安装Laravel
2014/10/15 PHP
PHP产生不重复随机数的5个方法总结
2014/11/12 PHP
php中数组最简单的使用方法
2020/12/27 PHP
window.showModalDialog使用手册
2007/01/11 Javascript
在html页面中包含共享页面的方法
2008/10/24 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
2012/09/14 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
后台获取ZTREE选中节点的方法
2015/02/12 Javascript
JQuery实现鼠标滚轮滑动到页面节点
2015/07/28 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
JavaScript面向对象精要(下部)
2017/09/12 Javascript
详解webpack+ES6+Sass搭建多页面应用
2018/11/05 Javascript
JS为什么说async/await是generator的语法糖详解
2019/07/11 Javascript
教你安装python Django(图文)
2013/11/04 Python
CentOS中使用virtualenv搭建python3环境
2015/06/08 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
python Opencv将图片转为字符画
2021/02/19 Python
基于Python3.6+splinter实现自动抢火车票
2018/09/25 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
python在一个范围内取随机数的简单实例
2020/08/16 Python
python实现梯度下降算法的实例详解
2020/08/17 Python
python使用matplotlib:subplot绘制多个子图的示例
2020/09/24 Python
python中openpyxl和xlsxwriter对Excel的操作方法
2021/03/01 Python
英国豪华文具和皮具配件经典老品牌:Smythson(斯迈森)
2018/04/19 全球购物
坚定理想信念心得体会
2014/03/11 职场文书
加入学生会演讲稿
2014/04/24 职场文书
品牌推广策划方案
2014/05/28 职场文书
工厂采购员岗位职责
2015/04/07 职场文书
2015年度房地产工作总结
2015/04/09 职场文书
中秋节感想
2015/08/10 职场文书
中学政教处工作总结
2015/08/13 职场文书
基于Pygame实现简单的贪吃蛇游戏
2021/12/06 Python