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 相关文章推荐
qTip 基于JQuery的Tooltip插件[兼容性好]
Sep 01 Javascript
围观tangram js库
Dec 28 Javascript
实现局部遮罩与关闭原理及代码
Feb 04 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
Jan 22 Javascript
使用jQuery制作基础的Web图片轮播效果
Apr 22 Javascript
详解vue渲染从后台获取的json数据
Jul 06 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
Mar 20 Javascript
详解Vue文档中几个易忽视部分的剖析
Mar 24 Javascript
使用async await 封装 axios的方法
Jul 09 Javascript
create-react-app 修改为多入口编译的方法
Aug 01 Javascript
element-ui组件中input等的change事件中传递自定义参数
May 22 Javascript
Openlayers绘制聚合标注
Sep 28 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
《逃离塔科夫》——“萌新劝退,老手自嗨”的硬核FPS游戏
2020/04/03 其他游戏
PHP 编程请选择正确的文本编辑软件
2006/12/21 PHP
php2html php生成静态页函数
2008/12/08 PHP
PHP在线生成二维码(google api)的实现代码详解
2013/06/04 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(三)
2014/06/23 PHP
PHP+MySQL统计该库中每个表的记录数并按递减顺序排列的方法
2016/02/15 PHP
php arsort 数组降序排序详细介绍
2016/11/17 PHP
如何打开php的gd2库
2017/02/09 PHP
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
JavaScript中URL编码函数代码
2011/01/11 Javascript
JS与C#编码解码
2013/12/03 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
2015/03/03 Javascript
javascript实现Table排序的方法
2015/05/15 Javascript
解析JavaScript的ES6版本中的解构赋值
2015/07/28 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
AngularJS实现的base64编码与解码功能示例
2018/05/17 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
webpack4打包vue前端多页面项目
2018/09/17 Javascript
使用electron将vue-cli项目打包成exe的方法
2018/09/29 Javascript
JS温故而知新之变量提升和时间死区
2019/01/27 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
2019/02/21 Javascript
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
Python实现破解猜数游戏算法示例
2017/09/25 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
Python把图片转化为pdf代码实例
2020/07/28 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
委托书的样本
2015/01/28 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书
Django 实现jwt认证的示例
2021/04/30 Python
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python
解决mysql的int型主键自增问题
2021/07/15 MySQL