如何在vue專案中引入js相關的庫和樣式外掛

2019-12-11 21:11:09

之前在寫前端專案時，都是用的jquery和bootstrap框架。現在，專案使用vue.js，那麼之前的東西是否可以用上呢？下面利用一個具體的範例說明，如何在vue.js專案中使用js相關的庫和框架，操作如下：

第一步，在vue.js專案中，要使用到Bootstrap，需要安裝這個依賴包，如下圖所示：

第二步，在使用Bootstrap之前，可能會涉及到jQuery，所以jQuery也要安裝，如下圖所示：

第三步，在新建的vue檔案中的<script></script>中，匯入相關的js和css，如下圖所示：

第四步，在模板標籤中，插入相關的DOM元素，這裡使用一個table，如下圖所示：

第五步，儲存程式碼然後使用npm工具命令執行專案，在瀏覽器中檢視效果，如下圖所示：

第六步，為了使表格的奇數行和偶數行顯示不一樣，利用jQuery中的方法設定行背景色，如下圖所示：