1、vue-cli webpack全局引入jquery
(1) 首先 npm install jquery --save (--save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。)
(2)在webpack.base.conf.js里加入
var webpack = require("webpack")
(3)在mole.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的方法
项目结构如图:
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引入静态文件
vue-cli3静态资源配置静态资源可以通过两种方式进行处理：
在JavaScript被导入或在template/CSS中通过相对路径被引用。这类引用会被webpack处理。
放置在public目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过webpack的处理。
使用相对路径引入的静态资源文件，会被webpack处理解析为模块依赖。例如，在imgsrc="./logo.png"和background:url(./logo.png)，以及CSS@import"./logo.png"是相对的资源路径。在vue2.x版本类似assets文件夹。
2.public文件夹
public文件夹下的文件并不会被Webpack处理：它们会直接被复制到最终的打包目录（文件名需指定）下。必须使用绝对路径引用这些文件，简单说就是用来存放万年不变的文件。
在vue2.x版本类似static/文件夹。
/public/logo.png
参考：
public/index.html文件是一个会被html-webpack-plugin处理的模板。构建中，各种资源路径会被注入解析。可以使用lodashtemplate语法插入内容。
除了被html-webpack-plugin暴露的默认值之外，所有客户端环境变量也可以直接使用。例如，BASE_URL的用法：
vue-cli3pubic静态资源引入
静态资源文件放入public文件夹下（类似cli2里面的static文件夹），打包时不会被wenpack处理，输出文件在dist文件夹下。
在index.html中通过
scriptsrc="%=BASE_URL%clipboard.min.js"/script
参考
linkrel="icon"href="%=BASE_URL%favicon.ico"
可以看到项目中ico图标就是通过这种方式引入！！
public文件夹下文件是不被处理的，所以我们可以创建一个config.js文件
config.js
在index.html中引入
使用
遇到的问题，修改打包后的config.js文件，值不更新
排查方式：
1.先确认config.js文件是否更新，浏览器的缓存可能会影响
2.可以修改js文件名，比如加上hash值，config.hashxxx.js，在index.html引入的地方也要对应修改
综上
本地测试ok
vue怎么使用工具类中的static方法vue怎么使用工具类中的static方法
在Vue项目中使用工具类中的静态方法，需要先引入该工具类文件，然后通过工具类名称来调用静态方法。
例如，有一个工具类文件utils.js，其中包含一个静态方法formatDate：
```
exportdefaultclassUtils{
staticformatDate(date){
//somecodehere
}
}
```
在Vue组件中引入该工具类文件，并调用静态方法formatDate：
```
template
div
p{{formattedDate}}/p
/div
/template
script
importUtilsfrom'@/utils.js'
exportdefault{
data(){
return{
date:newDate()
}
},
computed:{
formattedDate(){
returnUtils.formatDate(this.date)
}
}
}
/script
```
在该Vue组件中，我们首先引入了utils.js文件，并在computed属性中定义了一个formattedDate计算属性，该计算属性调用了工具类Utils的静态方法formatDate来格式化日期。
㈢ vue组件中引入js文件并使用
VUE引用外部js，并使用其中的变量/方法目前项目有个需求就是，在vue页面中枝乎塌引入额外的config.js。常规引入有以下几种方法：
1.main.js直接引用
2.index.html中标签引用
3.import引入
以上不符合我们业务需求，所以整理了第四种方式：通过组猛圆件，定义为script标签引入外部js
4.1-这个写法不太便于理解，我没有使用
4.2-我使用的方法
使用：
能看到已经被加载：
给个点击事件输出一顷漏下看看
完美
vue引用并使用本地js(局部引用,全局引用)
common.js文件
common.js文件
common.js文件
common.js文件
common.js文件
main.js文件
common.js文件卖销绝
main.js文斗改件
common.js文件
main.js文件
common.js文件
main.js文件
vue中引中姿入在线JS(链接型的js、url类型的js)
vue项目中引用并使用本地js
Vue批量全局引入js及对应方法在正确位置创建自己的js文件，比如src下创建一个utils.js文件携链
里面创建多个方法，比如：parseTime、getFileType
在main.js中引入，雀族添加
在需要用到的组件中顷隐弊，果断抽出来遛一遛
letfileType=this.$utils.getFileType(this.fileUrl)