Vue和Material Design开源框架Vuetify发布2.0 release版本

Posted 2023-04-18

参考技术A Vuetify Star 数为 20.5K+，提供了 80 多个 Vue.js 组件，这些组件是根据谷歌 Material Design 指南实现的。开箱即用的项目脚手架，Vuetify已预先制作了8个vue-cli(支持vue-cli3)模板，从简单的html到全面的服务端渲染（SSR）项目，都只需几分钟就能创建完毕。2.0版本于2019年7月23日发布，vuetify 官网截图：

您好，欢迎来到Vuetify v2.0版本，Arcadia。自开发开始已近8个月，我相信我们已经取得了非常特殊的成就。正如我在去年的VueConf TO演讲中所述，我们对框架的各个方面进行了大规模的改革，使其更易于使用和维护。

这只是从生活质量变化到新功能（MD2改进之外）的整体框架改进的一小部分。该文档已经大量更新，包含 250多个 新示例，大量有关如何使用框架内部的更新信息，长期支持的详细信息，扩展的路线图以及更好的组件API显示。我们还设置了一个导出组件api for vetur的过程，以便我们更容易使其保持最新。

如何在本地将 Material Design Iconic Font 托管到 vue 应用中

【中文标题】如何在本地将 Material Design Iconic Font 托管到 vue 应用中

【英文标题】：How host locally Material Design Iconic Font into a vue app

【发布时间】：2021-08-31 13:57:23

【问题描述】：

我使用 Vuetify 和 Material Design Icons 开发了一个 Vue 2.6 SPA，如 here 所述，但 SPA 的某些元素（部分由公共模板派生）也使用“Material Design Iconic Font”。我想在本地托管“zmdi”图标，而不是使用 CDN，并按照here 报告的说明安装了这个额外的图标包：

npm install material-design-iconic-font

我不知道如何在 VUE 应用中正确包含“zmdi”图标。 谁能建议在 VUE SPA 中托管 Material Design Iconic Font 的最简单方法？

【参考方案1】：

我终于解决了

import "material-design-iconic-font/dist/css/material-design-iconic-font.css";

进入“main.js”。

我必须在“vue.config.js”中包含其他内容以指示 webpack 正确处理此 css 文件？