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)