首页 > 其他分享 >Vue&Element-Ui(支技VUE2)&解决ttf, woff 文件报错的问题

Vue&Element-Ui(支技VUE2)&解决ttf, woff 文件报错的问题

时间:2023-04-21 09:57:58浏览次数:38  
标签:Vue woff Element vue ui Ui 报错 element

一、Vue&Element-Ui(支技VUE2)

Vue 是一套用于构建用户界面的渐进式 JavaScript (主张最少)框架 ,开发者只需要关注视图层, 它不仅易于上手,还便于与第三方库或既有项目的整合。是基于MVVM(Model-View-ViewModel 即:视图层-视图模型层-模型层)设计思想。提供MVVM数据双向绑定的库,专注于UI层面。

渐进式框架:就是一开始不需要你完全掌握它的全部功能特性,可以后续逐步增加功能。没有多做职责之外的事情

## Element-Ui简介

element 是基于 vue 实现的一套不依赖业务的 UI 组件库,提供了丰富的PC端组件,减少用户对常用组件的封装,降低了开发的难易程度。

## vue与Element-Ui的关系

1. Element-Ui是基于vue封装的组件库,简化了常用组件的封装,提高了重用性原则;

2. vue是一个渐进式框架,Element-Ui是组件库;

二、(element-ui 下载后本地使用)解决ttf, woff 文件报错的问题

下载地址:

vue: https://cdn.jsdelivr.net/npm/vue/dist/vue.js
element-ui-js: https://unpkg.com/element-ui/lib/index.js
element-ui-css: https://unpkg.com/element-ui/lib/theme-chalk/index.css

注意:要使用 element-ui 中的字体图标,还要下载 ttf, woff 文件,版本要和 js、css的相对应(直接把上面的地址复制到浏览器地址栏,按回车,就会显示相应的版本了),这两个文件下载完成后,放入css文件夹下的fonts文件夹(自己新建)

字体图标地址:https://unpkg.com/browse/[email protected]/theme-chalk/fonts/

 

https://unpkg.com/browse/[email protected]/lib/theme-chalk/fonts/

 

 

(如果项目还用了nginx服务器作为代理,页面一直访问不到这两个文件,而且返回的类型是text,那需要在nginx服务器下的mime.types中配置一下:

1 application/x-font-truetype ttf;
2 application/x-font-woff woff;

配置完成后,需要重启nginx服务器!)

原文链接:https://blog.csdn.net/weixin_58404099/article/details/117746865

 

标签:Vue,woff,Element,vue,ui,Ui,报错,element
From: https://www.cnblogs.com/jiadan/p/17339246.html

相关文章

  • vue3 源码
     这文章写的很好 Compiler模块:编译模板系统。主要职责是将template编译成虚拟节点。Runtime模块:也可以称之为Renderer模块,真正负责渲染的模块。主要职责是将虚拟节点渲染成真实元素,然后显示到浏览器上。Reactivity模块:响应式系统。主要职责是监听响应式的数据,然后通过di......
  • vue全家桶进阶之路47:Vue3 Axios拦截器封装成request文件
    可以将Axios拦截器封装成一个单独的request文件,以便在整个应用程序中重复使用。以下是一个示例,展示如何将Axios拦截器封装成一个request文件:1、创建一个名为request.js的新文件,并导入Axios:importaxiosfrom'axios';2、创建一个名为request的函数,并将其导出:这将创建一个名......
  • vue中的ref 和 reactive--今天学了啥 23/3/12
     这两者都是默认deepreactive,不同的是reactive使用es6的proxy,只能使对象reactive。ref不仅支持对象还支持基本数组,不能说ref是reactive的超集,因为这两者返回的类型就不一样。 Reftype:functionref<T>(value:T):Ref<UnwrapRef<T>>interfaceRef<T>{value:T}如......
  • Tomcat报错严重: Unable to process Jar entry [module-info.class] from Jar
    Tomcat运行时出现UnabletoprocessJarentry[module-info.class]fromJar分析报错可知无法从Jar包中处理Jar条目[module-info.class]报错内容严重:UnabletoprocessJarentry[module-info.class]fromJar[jar:file:/D:/STS/Workspaces/Cloudview/.metadata/.plugins/......
  • 关于vue3中Scope slot实战中使用
    今天学了啥-23/03/28 vue提供slot机制让组件可以接收模板片段,来渲染模板片段。比如最常见的button组件,基本是如下这样使用。<FancyButton>Clickme!<!--插槽内容--></FancyButton>FancyButton组件则是这样:<buttonclass="fancy-btn"><slot></slot><!--插......
  • vue全家桶进阶之路46:Vue3 Axios拦截器和globalProperties全局设置
    在Vue.js3中,使用Axios与Vue.js2.x中类似,但是需要进行一些修改和更新,下面是Vue.js3中Axios的定义和使用方式:首先,你需要安装Axios和Vue.js3.x,可以使用npm或yarn等包管理工具安装:npminstallaxiosvue@next然后,在你的Vue.js3应用程序中,你可以使用以下代码来导入和使用Axio......
  • selenium报错:This version of ChromeDriver only supports Chrome version 109 Curren
    前言:跟GPT交互,让其写一段代码,执行失败。经过排查验证,GPT写的代码没有问题,是本地环境问题。执行报错:selenium.common.exceptions.SessionNotCreatedException:Message:sessionnotcreated:ThisversionofChromeDriveronlysupportsChromeversion109Currentbrowser......
  • Vue3 日历组件的实现
    Vue3日历组件的实现以下是一个基于Vue3实现的简单日历组件的代码示例。这个日历组件包含了前一个月、当前月、下一个月的日期,并且可以支持选择日期、切换月份等功能。<template><divclass="calendar"><divclass="header"><buttonclass="prev"@click="pre......
  • 02-pytest运行报错
    #运行时提示:pytest-Windowsfatalexception:code0x8001010d#解决方法:pytest.ini中加上no:faulthandleraddopts=-vs-pno:faulthandler--html../report/re.html#运行时警告:     DeprecationWarning:invalidescapesequence\d#解决方......
  • Vue3 watch 监听对象数组中对象的特定属性
    Vue3watch监听对象数组中对象的特定属性在Vue3中,可以使用watch函数来监听对象数组中对象的特定属性。可以通过在回调函数中遍历数组来检查对象的特定属性是否发生变化,并在变化发生时执行相应的操作。一、监听对象的特定属性例如,假设有一个名为items的对象数组,其中每个......