如何在没有验证的情况下将@mdi/font导入到我的vue3项目？
在没有验证的情况下将@mdi/font导入到Vue 3项目中，您可以按照以下步骤进行操作：
- 安装@mdi/font：在终端或命令提示符中，使用以下命令安装@mdi/font依赖：
- 安装@mdi/font：在终端或命令提示符中，使用以下命令安装@mdi/font依赖：
- 导入@mdi/font：在您的Vue 3项目中，找到需要使用@mdi/font的组件文件。在该文件的顶部，使用以下代码导入@mdi/font的CSS样式：
- 导入@mdi/font：在您的Vue 3项目中，找到需要使用@mdi/font的组件文件。在该文件的顶部，使用以下代码导入@mdi/font的CSS样式：
- 使用@mdi/font图标：在需要使用@mdi/font图标的地方，您可以直接使用对应的CSS类名来引用图标。例如，在模板中的某个元素上添加以下代码：
- 使用@mdi/font图标：在需要使用@mdi/font图标的地方，您可以直接使用对应的CSS类名来引用图标。例如，在模板中的某个元素上添加以下代码：
- 这将在页面上显示一个账户图标。
请注意，以上步骤假设您已经在Vue 3项目中正确配置了构建工具（例如Webpack）和相关的CSS加载器。如果您的项目中没有正确配置这些工具，您可能需要进行额外的配置。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）
- 产品介绍链接地址：https://cloud.tencent.com/product/cvm
腾讯云云服务器（CVM）是一种弹性计算服务，提供了可扩展的云计算能力。您可以在腾讯云上创建和管理虚拟机实例，用于托管您的应用程序、网站、数据库等。CVM提供了多种配置和规格的实例供您选择，并且支持弹性伸缩，可以根据您的需求灵活调整计算资源。
注意：本答案中没有提及其他云计算品牌商，如有需要可以自行查询相关内容。
相关·内容
1回答
不正确显示的图标:它们以“$vuetify.icons.”的形式出现
vuejs2、vuetify.js、material-design-icons
我正面临一个问题，在武帝的图标没有正确显示，例如，下面是。我已经在这个问题上尝试过的解决方案，但它们对我不起作用。您可以在下面看到雪佛龙向下图标显示为$vuetify.icons.expand。我试过导入@mdi/字体，这对我没有任何帮助.下面是我使用的代码：
import Vue from 'vue'
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css'
// import 'material-design-icons-iconfont/dist/mat
浏览 3提问于2019-10-01得票数 3
回答已采纳
1回答
Vuetify图标根本不渲染
vue.js、vuetify.js
根据that answer的说法，以下代码应该用Vuetify呈现一个图标 <v-icon>
arrow_downward
</v-icon> 它没有，相反，我在一个蓝色矩形的中间看到纯文本中的"alarm_on“。使用Vuetify 2.0.0和Vue 2.6.10时，控制台中没有错误。下面是我如何将Vuetify添加到我的项目中： // Vue从‘Vue’导入vue； // Vuetify
import '@mdi/font/css/materialdesignicons.css';
import Vuetify from 'v
浏览 17提问于2019-09-18得票数 1
回答已采纳
1回答
NativeScript Vue -材料设计图标未显示
javascript、css、material-design、nativescript、nativescript-vue
在资产/字体中，我有materialdesignicons-webfont.ttf，在assets/css中，我有materialdesignicons.css。最后，在main.js中，我有以下内容：
import {TNSFontIcon, fonticon} from 'nativescript-fonticon';
TNSFontIcon.debug = true;
TNSFontIcon.paths = {
'mdi': './assets/css/materialdesignicons.css'
};
TNSFontIcon.l
浏览 0提问于2019-03-10得票数 2
回答已采纳
1回答
武帝的图标没有显示。它交替显示一个空框。
laravel、vue.js、vuetify.js、material-design-icons
我在laravel框架上开发了像Twitter或Instagram这样的SNS应用程序。我在我的项目中添加了Vue.js和Vuetify。当我使用v图标时，它没有显示，而是显示空框，如下所示。
铬：
在Firefox中：
这是什么？这是我的密码。
app.js
require(“./bootstrap”);
window.Vue = require(“vue”);
import Vuetify from “vuetify”;
import “vuetify/dist/vuetify.min.css”;
Vue.use(Vuetify);
import “@mdi/fo
浏览 4提问于2020-03-02得票数 1
2回答
在nuxt.js本地使用vuetify `mdi`图标，并屏蔽`cdn.jsdelivr.net` cdn
javascript、nuxt.js、vuetify.js
我在nuxt.js生态系统中使用vuetify框架，但有一个问题！被我的国家Iran阻止了，每次用户想要加载Vue应用程序时，它都会卡住加载这个URI。因此，我想在我的应用程序中本地使用mdi图标，并以某种方式将它们存储在静态目录或其他地方。
请告诉我如何避免mdi CDN，并通过nuxt.config.js像使用另一个全局CSS一样使用它
Nuxt配置
css: [
'@/assets/main.css',
'@mdi/font/css/materialdesignicons.css'
],
vuetify: {
rtl: true
浏览 94提问于2021-05-19得票数 2
回答已采纳
2回答
当包含在启用类型记录的Vue.js项目中时，Vuetify停止工作。
javascript、typescript、vue.js、vuetify.js、vue-cli-3
我最近尝试创建一个简单的应用程序，它结合了Vue.js、Vuetify.js和类型记录。然而，即使在一开始，Vuetify似乎与类型记录结合使用，但在我最近的应用程序编译中，我得到的只是类型的“未知自定义组件”的错误消息。
下面是我的vuetify.js文件的配置：
import '@mdi/font/css/materialdesignicons.css'
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
export default new V
浏览 3提问于2019-09-20得票数 2
回答已采纳
2回答
如何在Laravel工程中正确安装Vuetify
laravel、vue.js、vuetify.js
我已经挣扎了几个小时，试图在我的laravel项目中安装Vuetify，但我无法让它正常工作，Vuetify组件运行良好，但图标和断点不是，我尝试了所有方法，现在我有点厌倦了，我希望有人能帮助我…
根据证明文档，我在我的app.js中写下了这段代码
require('./bootstrap');
import Vue from 'vue';
import Vuex from 'vuex';
import router from './router'
import vuetify from './plugins/vuet
浏览 4提问于2019-09-22得票数 3
2回答
拒绝加载样式表(元标记不起作用)
html、css、vue.js、frontend、material-design
在我的站点的部署版本上，我看不到任何图标(来自材料设计图标)，这些图标是我通过使用样式表获得的，如下所示
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.css"
浏览 0提问于2021-06-01得票数 0
1回答
无法访问vue 3中导出的createApp实例
vue.js、vuetify.js、vuejs3、vuetifyjs3
我有一个createApp实例，并将其用于vuetify插件中。主文件
import { createApp } from 'vue'
import App from './App.vue'
export const app = createApp(App)
import '@/plugins/vuetify.ts'
vuetify插件
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
import { createVuet
浏览 17提问于2022-09-13得票数 1
回答已采纳
1回答
Vuetify道具未注册(Vue 3.2.13，Vuetify夜3.0.0)
vue.js、vuetify.js
<v-btn
icon
color="white"
>
<v-icon>mdi-account</v-icon>
</v-btn>
package.json
{
"name": "project",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --port
浏览 4提问于2022-04-28得票数 1
1回答
未定义的TypeError:无法读取未定义的属性“安装”
javascript、vue.js、webpack、vuejs2、vuetify.js
当我试图在我的Vuetify项目(与Webpack和阿波罗一起)上加载材料图标时，我根本无法让我的应用程序显示出来。
我遵循了武帝为webpack提供的安装说明，但是我收到了一个错误。
Uncaught TypeError: Cannot read property 'install' of undefined
at Function.Vue.use (vue.runtime.esm.js?2b0e:5106)
at eval (vuetify.js?402c:12)
at Module../src/plugins/vuetify.js (app.js:
浏览 3提问于2021-02-10得票数 0
回答已采纳
1回答
VIcon没有出现在故事书里
vue.js、vuejs2、vuetify.js、storybook
我正在开发一个Vue应用程序和Vuetify，并用Storybook记录组件。
我写得很好，所有组件似乎都出现在童话簿中(就像我的自定义组件& Vuetify组件一样)。除了VIcon。
我有一个组件使用Vuetify的VIcon，我无法让图标显示出来(在真正的应用程序中，这是没有问题的)。
设置：
src/plugins/vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
Vue.use(Vuetify);
export default new Vuetify({
浏览 0提问于2020-09-22得票数 1
1回答
Vue:使用material-design-icons offline / size
vue.js、svg、npm、vuetify.js、material-design-icons
我在我的vue项目中使用了materialdesignicons。 require ('../node_modules/@mdi/font/css/materialdesignicons.min.css);
Vue.use(Vuetify, {iconfont:'mdi'}); 我有几个动态创建的图标： <v-icon>{{ some-mdi-file }}</v-icon> 当我通过(npm run build)为生产环境进行构建时，我得到了以下错误： asset size limit: The following asset(s) exc
浏览 138提问于2019-02-08得票数 3
4回答
怎么买云服务器？
云服务器、5折上云
请描述您的问题
标题：腾讯云云产品新购特惠，五折上云！
地址：https://cloud.tencent.com/act/first_purchase?utm_source=portal&utm_medium=cdb&utm_campaign=firstpurchase&utm_term=0110
浏览器信息
Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36
浏览 482提问于2018-03-12
4回答
未定义Vue - Axios。
laravel、vue.js、axios、vuetify.js
在Laravel+Vue项目中，我试图使用axios来获得API响应。Axios调用Laravel端点并获得控制器响应。
代码看起来
JS
require("./bootstrap");
import Swal from "sweetalert2";
import VueI18n from "vue-i18n";
import VueRouter from "vue-router";
import axios from "axios";
import Vuetify from "vuetify"
浏览 3提问于2020-03-20得票数 0
2回答
请描述您的问题
标题：腾讯云云产品新购特惠，五折上云！
地址：https://cloud.tencent.com/act/first_purchase?utm_source=portal&utm_medium=rightbanner&utm_campaign=firstpurchase&utm_term=0109
浏览器信息
Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36
浏览 346提问于2018-02-03
4回答
之前买的服务器可以退款么？
费用中心、5折上云
之前买的服务器可以退款么？你这活动力度好大啊
标题：腾讯云云产品新购特惠，五折上云！
地址：https://cloud.tencent.com/act/first_purchase?utm_source=portal&utm_medium=banner&utm_campaign=firstpurchase&utm_term=0109
浏览器信息
Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36
浏览 1600提问于2018-01-20
1回答
无法使用vuetify的图标
vue.js、icons、vuetify.js
我尝试了以下文档步骤：
$ yarn add @mdi/font -D
// OR
$ npm install @mdi/font -D
// src/plugins/vuetify.js
import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
export default new Vuet
浏览 1提问于2021-10-01得票数 0
1回答
在从文件系统加载页面时让Vuetify图标工作
javascript、vue.js、vuetify.js
我有一个用vue cli 3创建的vue项目，我使用的是Vuetify v2.0.19。
我的项目要求我能够构建该项目并输出一个html文件，以便可以在phonegap应用程序(Safari v13)中下载并脱机运行。我能够满足所有的要求，并使我的项目显示在phonegap应用程序，但图标不呈现。例如，在我使用<v-icon>info</v-icon>的地方，它会呈现信息，等等。
我遵循了Vuetify快速启动，图标和浏览器支持页面和其他几个堆栈溢出线程的答案，但无法得到我的图标来渲染。
我基本上需要包含在我的单个文件中的字体。当我在phonegap应用程序中加载页面或
浏览 4提问于2019-11-19得票数 0
回答已采纳
2回答
结合Vue 3+vue 3+ vue/test-utils，结果出现“找不到注入的Vuetify布局”错误
components、vuetify.js、vuejs3、vue-test-utils
有人知道如何在@vue/test-utils v2库中进行组件测试，同时使用Vuetify 3 Beta版本吗？我还使用Vue3 composition API来定义组件。我在这里找到的文档不起作用，因为它适用于Vuetify v2和@vue/test-utils v1。
这是我的插件/vuatefy.js
import '@mdi/font/css/materialdesignicons.css';
import 'vuetify/styles';
import { createVuetify } from 'vuetify';
export
浏览 15提问于2022-05-23得票数 4
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
