2020年9月7日
一某筐、前言
- vue3.0-beta版已經(jīng)發(fā)布幾個(gè)月了武契，最近在網(wǎng)上找了找相關(guān)文章怎么使用webpack4配置vue3.0祭往，但網(wǎng)上千篇一律的都是使用vue/cli3、vue/cli4或Vite官網(wǎng)的腳手架寫(xiě)的例子姆泻，官網(wǎng)腳手架固然好用零酪，但不乏有對(duì)技術(shù)的追求者，偏愛(ài)webpack自己動(dòng)手拇勃。
- 雖說(shuō)2020是一個(gè)不平凡的一年四苇，不過(guò)沒(méi)關(guān)系，咱們?cè)搶W(xué)的還是要學(xué)方咆，永遠(yuǎn)要保持一顆學(xué)習(xí)的心態(tài)月腋。
- 對(duì)于前端開(kāi)發(fā)者來(lái)說(shuō)，技術(shù)革新太快瓣赂，有點(diǎn)跟不上社會(huì)的腳步...榆骚，想想也是，譬如nodejs之父又發(fā)布了deno煌集，我表示真的學(xué)不動(dòng)凹酥；又譬如我在項(xiàng)目中一直在用的css-loader@3以下版本苫纤，最近升級(jí)到4碉钠，居然一直報(bào)錯(cuò)（此時(shí)真想給他幾句花的麻的），沒(méi)時(shí)間研究這些不影響大局的東西卷拘。
- 接下來(lái)咱們一起來(lái)看看vue3在webpack4中怎么使用喊废，這次這篇文章只會(huì)講到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是針對(duì)vue3使用的，在2.x版本中的vue-template-complier不適用于vue3 -
安裝完成后的截圖
image.png
image.png
- 我這里使用的其他關(guān)鍵包版本：
babel-loader@8core-js@3
三耿焊、項(xiàng)目搭建
1.新建一個(gè)文件夾webpack-vue3，進(jìn)入目錄打開(kāi)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頁(yè)面文件
-
App.vue
App.vue.png -
index.html
index.html.png -
main.js
main.js.png
3.在webpack-vue3根目錄下新建webpack.config.js措左，并配置開(kāi)發(fā)相關(guān)依賴，其中這里要注意了避除，再解析vue文件的時(shí)候在vue2.x中需要引入const VueLoaderPlugin = require('vue-loader/lib/plugin')并在plugin中添加new VueLoaderPlugin()怎披，若此時(shí)再這樣用，vue-loader是不會(huì)理你的瓶摆，他會(huì)很友好的送你一些紅色的文字凉逛；那么，此時(shí)咱們打開(kāi)vue-loader包看看
你會(huì)發(fā)現(xiàn)群井，你會(huì)訝異状飞，他丫并沒(méi)有l(wèi)ib文件夾，于是乎我就打開(kāi)dist文件夾看看
dist下這么多js书斜，不知道是用來(lái)干嘛的，再于是乎荐吉，我就挨個(gè)試試到底是哪個(gè)文件可用酬荞，因?yàn)橐郧埃╲ue2.x）使用的是vue-loader/lib/plugin，所以我也就只有找vue-loader/dist/plugin咧党，不過(guò)在我啟動(dòng)webpack dev的時(shí)候，他也確實(shí)給我反饋了
哎呀呀~
TypeError: VueLoaderPlugin is not a constructor哦嚯~
再打開(kāi)plugin.js
這里明明配置了導(dǎo)出default遮糖，沒(méi)事，既然不成功我就在webpack.config.js中添加個(gè).default
再次啟動(dòng)，就這樣成功了
至此文黎，vue3配置踩坑記圓滿完成
四鸽粉、寫(xiě)個(gè)demo試試
-
在view文件夾下新建 Home.vue
Home.vue.png
vue3的語(yǔ)法在這里就不做解釋玷或，有時(shí)間咱們?cè)垡黄饘W(xué)習(xí)一下vue3的語(yǔ)法
-
頁(yè)面預(yù)覽
localhost.png
五、最后
- 想看源碼的歡迎咨詢
- 待vue3正式版發(fā)版之后，我會(huì)做一個(gè)補(bǔ)充舞竿，會(huì)配置一套完成的開(kāi)發(fā)環(huán)境骗奖，歡迎大家指正。
