請問如何在vue cli的元件中引入js檔

vue.js vue cli

ofcourse448 2020-01-26 22:28:38 ‧ 7119 瀏覽

分享至

小弟從商科轉跑道
從認識到寫網頁程式經歷:6個月
課程:資策會-智慧人才培育系列(90天)
javascript(有上課30天)>自學vue(35天)

問題開始

如圖片上面是無效的用法
我知道引入css檔只需要在app.vue中import就好
而main.js是引套件的部分
router是引元件來做路由
如果是js的cdn或js檔要怎麼引才會有效呢?

看更多先前的討論...收起先前的討論...

dragonH iT邦超人 5 級 ‧ 2020-01-27 01:32:55 檢舉

cdn 在 index.html 引用

local js 檔可以在 .vue 檔的 script block

用 import ... from ...來引用

然後基本上vue project很少再用 jquery

除非必要

slick 也有人寫成 vue 的 module

https://github.com/staskjs/vue-slick

ofcourse448 iT邦新手 5 級 ‧ 2020-01-27 01:56:14 檢舉

好謝謝

marlin12 iT邦研究生 5 級 ‧ 2020-01-27 11:11:23 檢舉

@dragonH
正解，我選你[最佳解答] ！

dragonH iT邦超人 5 級 ‧ 2020-01-27 14:18:19 檢舉

╰(*°▽°*)╯

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

iT邦好手 1 級 ‧ 2020-01-26 23:36:39

最佳解答

放在index.html中的head試試看,我記得有用

回應 2
分享
檢舉

ofcourse448 iT邦新手 5 級 ‧ 2020-01-27 01:55:32 檢舉

我後來自己有找到也是這個答案不過很謝謝

EN iT邦好手 1 級 ‧ 2020-01-27 21:33:51 檢舉

ofcourse448
有順利解決就好!

登入發表回應

pwallace

iT邦新手 5 級 ‧ 2020-01-28 23:13:02

可以试试在 public/index.html 中引入这两个 js 文件，然后在 vue.config.js 中配置一下 webpack：

module.exports = {
  configureWebpack: {
    externals: {
      jquery: 'jQuery'
    }
  }
}

然后在需要用到的页面 import $ from 'jquery' 或 import jQuery from 'jquery' 就可以使用 jQuery 了，可能需要留意的是 Vue 组件需要 mount 产生 DOM，利用 jQuery 等直接操作 DOM 的库的代码或者方法，要 mounted 里使用

configureWebpack: https://cli.vuejs.org/config/#configurewebpack
webpack externals: https://webpack.js.org/configuration/externals/