大家使用vue已經(jīng)習(xí)慣了vue全家桶上，其實(shí)vue還是可以跟傳統(tǒng)的模式進(jìn)行整合，沒有webpack，沒有vite。下面來簡要介紹一下：

1、建立VueAsset資源文件，讓頁面自動(dòng)加載vue資源

這里自動(dòng)引入了elmentUI和axios。vue使用vue2和vue3均可。

2、建立對(duì)應(yīng)的view頁面。筆者這里是擴(kuò)展一個(gè)form頁面的異步上傳圖片功能。

要點(diǎn)講解：

- vue已經(jīng)全局注冊(cè)，直接new可以使用。如果是vue3請(qǐng)使用create的方法創(chuàng)建。

- new新建vue的時(shí)候，使用el指定對(duì)應(yīng)的div進(jìn)行vue實(shí)例化。這時(shí)div的內(nèi)容相當(dāng)于變成模板內(nèi)容。同時(shí)vue此時(shí)只是用于處理一個(gè)div的內(nèi)容，原則上一個(gè)頁面可以有多個(gè)vue實(shí)例（對(duì)應(yīng)多個(gè)div）。這種方法相對(duì)于把vue變成一個(gè)當(dāng)頁面應(yīng)用來說，可以jq和vue混合使用。

- ElementUI使用script的方式引入，或者cdn的方式引入時(shí)，屬于全局引用，不需要使用vue.use進(jìn)行組件注冊(cè)。

結(jié)語：對(duì)于活躍于JQ世代的老前端來說，單頁面應(yīng)用并不是唯一的方式，還有傳統(tǒng)的網(wǎng)頁方式（結(jié)合JQ或者直接操作DOM）。僅僅記錄一下，相信大部分人也不會(huì)這么使用。畢竟現(xiàn)在vue3的工具越來越簡單而強(qiáng)大。