Webpack 5 走起! - Vue(10) - vue-loader
前言
學會基本的 Webpack 之後其實我們也可以自己來試著手動設定 vue。
Vue
基本上這邊就不再多介紹什麼是 Vue 了,在以往我們使用 Vue Cli 的時候,都會看到檔案是 .vue
官方文件上,而這個檔案名稱其實是必須透過 vue-loader 來編譯的,因此在官方文件上會要求你安裝以下套件
1 | npm install -D vue-loader vue-template-compiler |
至於其他設定呢?其實官方給的滿詳細的,因此以下擷取官方文件設定
1 | // webpack.config.js |
接下來你可以試著在 template 中新增一個 *.vue 檔案,內容如下:
1 | <template> |
接下來開啟 main.js 注入該檔案後 import './template/App.vue';
直接輸入 npm run dev
。
基本上不意外你會發生一個錯誤就是「Module not found: Error: Can't resolve 'Vue'
」,這個問題其實是因為我前面少安裝了 Vue,因此這邊除了安裝前面 loader 之外也要記得安裝 Vue
1 | npm install -save vue |
接下來你在輸入 npm run dev
就不會出現錯誤了,但是你應該會覺得很奇怪為什麼 .vue 中的東西沒有出現,因為這邊我們要稍微調整一下 main.js 內容才可以。
當若我們對於如何起手架設一個自己的 Vue Webpack 時,其實有一個很好的參考檔案,也就是 Vue Cli 的注入方式,所以這邊我直接列出應該寫在 main.js 中的重點,並調整後依據我們自己專案後如下:
1 | import Vue from 'vue'; |
接下來當你輸入 npm run dev
開啟瀏覽器時,就可以發現 vue 已經成功渲染到畫面上了囉~