Vue3（四）從jQuery 轉到 Vue工程化 的捷徑
阿新 • • 發佈：2021-02-15
# 不會 webpack 還想學 vue 工程化開發 的福音
熟悉jQuery開發的，學習vue的簡單使用是沒用啥問題的，但是學習vue的工程化開發方式，往往會遇到各種問題，比如：
webpack、node、npm、cnpm、yarn、腳手架、開發環境、測試環境、生產環境、各種安裝、各種建立。
好在 vue3 不容易報錯了，想當初 vue2.x 的時候各種報錯，看到錯誤就只能乾瞪眼，這都是啥？好像是webpack的報錯。
當初學 vue2 就卡在了建立專案上，各種嘗試居然一個專案都沒跑起來。
如果能像jQuery那樣，直接開魯那多好呀！
各種陰差陽錯+機緣巧合的情況下，弄出來了這種在 CND 模式下仿工程化開發的方式。一開始只是想方便我做線上演示，後來各種完善，發現還是應該有點搞頭了。再加上大神在弄vite，似乎也是對webpack比較頭疼。。。
好了不墨跡了，開始說我的做法。
# vue全家桶和UI庫的載入方式
這個很傳統了，官方也支援。
```js
```
瀏覽器會對js檔案做快取，第一次有點慢，後快取後就快了。
某網站有時候會卡一下，不卡的話還是很快的。
# js程式碼的載入方式
```js
```
聽說vite也是這麼載入的。好吧就是從vite建立的專案裡copy來的。
要加上 type="module" 否則載入不了。
# 資料夾結構和程式碼編寫風格
資料夾當然是把工程化的拿過來之間用了，挺簡潔明瞭的。
因為瀏覽器也支援 import 的方式載入js，那麼也就是說，CDN方式下也可以用import載入。那麼js程式碼方面也不會有太大的差別。
我們來對比一下：
左面是CND的專案，右面是工程化的專案。
* 資料夾結構完全一致，
* js檔案都能對應上
* vue檔案拆分成 html + js 兩個檔案（app.vue除外）
## main.js
```js
/*
import store from './store/index.js?v=1'
import router from './router/index.js?v=1'
import App from './app.js?v=1'
// 建立vue3的例項
const app = Vue.createApp(App)
.use(store)
.use(router)
.use(ElementPlus)
.mount('#app')
*/
const ver = window.__ver || ''
Promise.all([
import('./store/index.js' + ver),
import('./router/index.js' + ver),
import('./app.js' + ver),
]).then((res) =>