[笔记] 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


按赞加入粉丝团

延伸阅读