[筆記] Vuetify + Babel + Vue.config.js 最佳化實踐

章節連結

Vue 搭配 Vuetify 建立專案,在最後打包 Build 的過程中,會有一系列的調教設定過程。這其中包含了 Babel (瀏覽器向下相容) 、Tree-Shaking (按需載入) 和打包細項 ( Vue-Cli 以 Webpack 為基礎,讓打包編譯變得容易)。這篇會筆記下 package.json 的相依檔案清單、Babel 與 Vuetify 引入的設定註解。vue.js logo vue


整合內容

Vue, Vuetify, Vuex, Google Material Icon Fonts(Roboto-fontface), Babel 7.4 以後版本 (Core-js + regenerator-runtime), Day.js (moment.js 的後繼者)

分類細項

package.json

babel.config.js ( 7.4 以後適用)

main.js

./plugins/vuetify.js

用 npm 安裝 Material Icon 字型時,若為 Vuetify 2.x 系列的版本,須改用 iconfont: ‘mdi’ 並安裝 @mdi/font

Vue.config.js


參考資料

1. Vue项目兼容IE11
2. css-vars-ponyfill
3. @babel/polyfill
4. [JS]使用babel 轉譯 ES7 的 Async function(適用於瀏覽器)–3(完)
5. 如何正確的設置babel(Late 2018)
6. Babel 筆記 (7.7.0 之後)
7. SASS, LESS 退散,原生 CSS 可以使用變數啦!
8. [Vue] 跟著 Vue 闖蕩前端世界 – 15 執行檔案瘦身計畫
9. How to break the js files into chunks in vue cli 3 with webpack performance object?
10. Webpack 4 “size exceeds the recommended limit (244 KiB)”
11. Vuetify icons not showing correctly: they appear as as “$vuetify.icons…”
12. Webfont – Material Design Icons
13. Configuration Reference
14. Vuetify Treeshaking

按讚加入粉絲團

延伸閱讀