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 判断 enter 事件
Feb 12 Javascript
js 面向对象的技术创建高级 Web 应用程序
Feb 25 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
May 22 Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 Javascript
搞定immutable.js详细说明
May 02 Javascript
jquery.Callbacks的实现详解
Nov 30 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
Dec 14 Javascript
ES6新特性四:变量的解构赋值实例
Apr 21 Javascript
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
原生js代码能实现call和bind吗
Jul 31 Javascript
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
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如何通过传引用的思想实现无限分类(代码简单)
2015/10/13 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
PHP并发查询MySQL的实例代码
2017/08/09 PHP
微信公众号实现扫码获取微信用户信息(网页授权)
2019/04/09 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
jQuery EasyUI API 中文文档 - DataGrid数据表格
2011/11/17 Javascript
JQuery中DOM加载与事件执行实例分析
2015/06/13 Javascript
jquery实现鼠标悬浮停止轮播特效
2020/08/20 Javascript
JavaScript lodash常见用法系列小结
2016/08/24 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
2017/03/24 jQuery
详解vue-cli中的ESlint配置文件eslintrc.js
2017/09/25 Javascript
vue-cli3.0 环境变量与模式配置方法
2018/11/08 Javascript
Vue实现点击导航栏当前标签后变色功能
2020/08/19 Javascript
详解ES6中class的实现原理
2020/10/03 Javascript
Python的Bottle框架的一些使用技巧介绍
2015/04/08 Python
详解Python中的各种函数的使用
2015/05/24 Python
python实现线程池的方法
2015/06/30 Python
解决Python安装后pip不能用的问题
2018/06/12 Python
Flask之请求钩子的实现
2018/12/23 Python
PyQt5实现简单数据标注工具
2019/03/18 Python
python 多进程并行编程 ProcessPoolExecutor的实现
2019/10/11 Python
Python 中使用 PyMySQL模块操作数据库的方法
2019/11/10 Python
详解Python Opencv和PIL读取图像文件的差别
2019/12/27 Python
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
技校生自我鉴定
2013/12/08 职场文书
高一化学教学反思
2014/02/05 职场文书
上班玩手机检讨书
2014/02/17 职场文书
保护水资源的标语
2014/06/17 职场文书
三严三实对照检查材料思想汇报
2014/09/28 职场文书
2014年旅游局法制宣传日活动总结
2014/11/01 职场文书
入股协议书范本
2014/11/01 职场文书
2014小学数学教研组工作总结
2014/12/06 职场文书
幼儿园园长安全责任书
2015/05/08 职场文书
五年级语文教学反思
2016/03/03 职场文书
2019年最新借条范本!
2019/07/08 职场文书