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 去除数组的重复元素
May 04 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
Jul 28 Javascript
纯文字版返回顶端的js代码
Aug 01 Javascript
用JS实现3D球状标签云示例代码
Dec 01 Javascript
jQuery实现强制cookie过期方法汇总
May 22 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
Jun 13 Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
Sep 27 Javascript
JS学习笔记之闭包小案例分析
May 29 Javascript
解决Layui 表格自适应高度的问题
Nov 15 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
Dec 25 Javascript
原生js实现移动小球(碰撞检测)
Dec 17 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
一个MYSQL操作类
2006/11/16 PHP
php过滤输入操作之htmlentities与htmlspecialchars用法分析
2017/02/17 PHP
Laravel 读取 config 下的数据方法
2019/10/13 PHP
理解Javascript_05_原型继承原理
2010/10/13 Javascript
Js+Jq获取URL参数的集中方法示例代码
2014/05/20 Javascript
js实现按一下删除键删除整个单词附demo
2014/09/05 Javascript
jQuery中click事件用法实例
2014/12/26 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
原生JS实现垂直手风琴效果
2017/02/19 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
浅谈Angular文字折叠展开组件的原理分析
2017/11/24 Javascript
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
Node.js学习之内置模块fs用法示例
2020/01/22 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
2020/02/19 Javascript
python使用urllib2提交http post请求的方法
2015/05/26 Python
Ubuntu下安装PyV8
2016/03/13 Python
python爬取淘宝商品详情页数据
2018/02/23 Python
python中实现将多个print输出合成一个数组
2018/04/19 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
关于tf.nn.dynamic_rnn返回值详解
2020/01/20 Python
解决Python paramiko 模块远程执行ssh 命令 nohup 不生效的问题
2020/07/14 Python
美国照明、家居装饰和家具购物网站:Bellacor
2017/09/20 全球购物
泰国演唱会订票网站:StubHub泰国
2018/02/26 全球购物
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/01/13 面试题
护理学毕业生求职信
2013/11/14 职场文书
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
应届毕业生自我鉴定范文
2013/12/27 职场文书
前台文员个人求职信范文
2014/01/05 职场文书
医院信息公开实施方案
2014/05/09 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
诚信承诺书
2015/01/19 职场文书
档案管理员岗位职责
2015/02/12 职场文书
事业单位聘任报告
2015/03/02 职场文书
Java实现简单小画板
2022/06/10 Java/Android