2020年9月7日
一、前言
- vue3.0-beta版已經(jīng)發(fā)布幾個月了，最近在網(wǎng)上找了找相關(guān)文章怎么使用webpack4配置vue3.0，但網(wǎng)上千篇一律的都是使用vue/cli3、vue/cli4或Vite官網(wǎng)的腳手架寫的例子，官網(wǎng)腳手架固然好用，但不乏有對技術(shù)的追求者，偏愛webpack自己動手。
- 雖說2020是一個不平凡的一年，不過沒關(guān)系，咱們該學(xué)的還是要學(xué)，永遠(yuǎn)要保持一顆學(xué)習(xí)的心態(tài)。
- 對于前端開發(fā)者來說，技術(shù)革新太快，有點跟不上社會的腳步...，想想也是，譬如nodejs之父又發(fā)布了deno，我表示真的學(xué)不動啊；又譬如我在項目中一直在用的css-loader@3以下版本，最近升級到4，居然一直報錯（此時真想給他幾句花的麻的），沒時間研究這些不影響大局的東西。
- 接下來咱們一起來看看vue3在webpack4中怎么使用，這次這篇文章只會講到vue3的配置，如需了解其他的配置可到官網(wǎng)查看，又或者參考這篇vue2.x的配置。
二、準(zhǔn)備
- 安裝nodejs
- 確保npm可用，當(dāng)讓你喜歡yarn也闊以
- 安裝webpack等相關(guān)npm包
- 安裝vue3，這里注意了：
npm i -S vue@next vue-router@next vuex@next
npm i -D vue-loader@next @vue/compiler-sfc
- 其中
@vue/compiler-sfc是針對vue3使用的，在2.x版本中的vue-template-complier不適用于vue3 -
安裝完成后的截圖
image.png
image.png
image.png
- 我這里使用的其他關(guān)鍵包版本：
babel-loader@8core-js@3
三、項目搭建
1.新建一個文件夾webpack-vue3，進(jìn)入目錄打開cmd或者shell，安裝以上相關(guān)依賴包
2.在webpack-vue3目錄下新建src文件夾，在src下分別新建assets、router、views等文件夾，再新建App.vue、index.html、main.js等文件
- assets存放圖片、css靜態(tài)資源
- router存放路由
- views存放.vue頁面文件
-
App.vue
App.vue.png -
index.html
index.html.png -
main.js
main.js.png
3.在webpack-vue3根目錄下新建webpack.config.js，并配置開發(fā)相關(guān)依賴，其中這里要注意了，再解析vue文件的時候在vue2.x中需要引入const VueLoaderPlugin = require('vue-loader/lib/plugin')并在plugin中添加new VueLoaderPlugin()，若此時再這樣用，vue-loader是不會理你的，他會很友好的送你一些紅色的文字；那么，此時咱們打開vue-loader包看看
vue-loader.png
你會發(fā)現(xiàn)，你會訝異，他丫并沒有l(wèi)ib文件夾，于是乎我就打開dist文件夾看看
vue-loader-dist.png
dist下這么多js，不知道是用來干嘛的，再于是乎，我就挨個試試到底是哪個文件可用，因為以前（vue2.x）使用的是vue-loader/lib/plugin，所以我也就只有找vue-loader/dist/plugin，不過在我啟動webpack dev的時候，他也確實給我反饋了
npm run dev.png
哎呀呀~
TypeError: VueLoaderPlugin is not a constructor哦嚯~
再打開plugin.js
plugin.js.png
這里明明配置了導(dǎo)出default，沒事，既然不成功我就在webpack.config.js中添加個.default
VueLoaderPlugin.png
再次啟動，就這樣成功了
successfully.png
至此，vue3配置踩坑記圓滿完成
四、寫個demo試試
-
在view文件夾下新建 Home.vue
Home.vue.png
vue3的語法在這里就不做解釋，有時間咱們咱一起學(xué)習(xí)一下vue3的語法
-
頁面預(yù)覽
localhost.png
五、最后
- 想看源碼的歡迎咨詢
- 待vue3正式版發(fā)版之后，我會做一個補(bǔ)充，會配置一套完成的開發(fā)環(huán)境，歡迎大家指正。
