vuejs引用js的方法:1、透過vue-cli webpack全域引入jquery;2、透過「import {myfun} from '../js/test.js'」方法引用外部js;3、在單vue頁引用內部js即可。
本文操作環境:Windows7系統、vue2.9.6版,DELL G3電腦。
vuejs 如何引用js?
vue引用js檔案的多種方式(推薦)
#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的方法
專案結構如圖: #content元件程式碼:<template> <p> <input ref='test' id="test"> <button @click='diyfun'>Click</button> </p> </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的寫法吧
推薦:《最新的5個vue.js影片教學精選》
#
以上是vuejs 如何引用js的詳細內容。更多資訊請關注PHP中文網其他相關文章!