vue引用js文件的多种方式(推荐)

Day_by_day93

这篇文章主要介绍了vue引用js文件的多种方式,本文大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下

1、vue-cli webpack全局引入jquery

(1) 首先 npm install jquery --save (--save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。)

(2)在webpack.base.conf.js里加入

1	`var` `webpack = require("webpack")`

(3)在module.exports的最后加入

plugins: [

new webpack.optimize.CommonsChunkPlugin('common.js'),

new webpack.ProvidePlugin({

jQuery: "jquery",

$: "jquery"

})

]

(4) 在main.js 引入就ok了 (测试这一步不用也可以)

1	`import $ from` `'jquery'`

(5)然后 npm run dev 就可以在页面中直接用$ 了.

2、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引入$,然后使用即可

这个图中有黄色的警告，如果把console.log($)改成这样:

export default{

mounted: function(){

console.log($)

}

就不会有了，原因可能是得符合vue中js的写法吧

总结

以上所述是小编给大家介绍的vue引用js文件的多种方式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

vue引用js文件的多种方式(推荐)相关推荐

vue引用js文件的多种方式
本文主要介绍了vue引用js文件的多种方式,本文大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 1.vue-cli webpack全局引入jquery (1) 首先 npm inst ...
Vue通信、传值的多种方式，详解
Vue通信.传值的多种方式,详解转自:https://blog.csdn.net/qq_35430000/article/details/79291287 一.通过路由带参数进行传值 ①两个组件 A ...
ajax js引用,ajax 引用js文件内容
ajax 引用js文件内容内容精选换一换 ConfigMap是一种用于存储应用所需配置信息的资源类型,用于保存配置数据的键值对,可以用来保存单个属性,也可以用来保存配置文件.通过ConfigMap ...
对vue项目js文件打包时进行混淆加密
对vue项目js文件打包时进行混淆加密环境 vue 3 vue cli 4 webpack 4.0.0 https://www.cnblogs.com/dragonir/p/14445767.htm ...
linux删除文件_Linux中删除特殊名称文件的多种方式
今日分享:我们在肉体的疾病方面花了不少钱,精神的病害方面却没有花什么,现在已经到了时候,我们应该有不平凡的学校.--<瓦尔登湖> 前言我们都知道,在linux删除一个文件可以使用rm命令 ...
Vue app.js文件过大，带宽占用过大，优化方案（持续优化）
Vue app.js文件过大,带宽占用过大,优化方案前言最近我的网站在使用的过程中发现加载缓慢问题,在没有缓存的情况下页面打开速度需要五秒,这对于用户体验来说是不友好的.通过查找网上的方案我实验 ...
Java 读取TXT文件的多种方式-行读取，字节读取
Java 读取TXT文件的多种方式 1).按行读取TXT文件 package zc; import java.io.BufferedReader; import java.io.File; impor ...
vue中js文件里获取this（vue实例）
vue中js文件里获取this(vue实例) 1,在main.js中抛出vue实例,在需要用到的地方引入即可 main.js里let vueThis= new Vue({el: '#app',rout ...
vue项目js文件引入第三方库组件
vue项目js文件引入第三方库组件 //首先按需引入第三方库 import { MessageBox } from 'element-ui' 使用: MessageBox.alert(`<di ...

vue引用js文件的多种方式(推荐)

vue引用js文件的多种方式(推荐)

vue引用js文件的多种方式(推荐)相关推荐

最新文章

热门文章