Vue字体图标不显示的设置
elementUI字体图标不显示 完美解决方案使用vue init webpack-simple xxx 创建的项目
在使用ElementUI的时候使用 字体图标时提示
根据报错提示可以看出时无法处理element-icons.ttf文件
原因时什么呢?
相信大家都能够知道,这是因为webpack不知道怎么去处理.ttf的文件
这个时候我们就需要url-loader来帮助我们处理.ttf字体文件
12//这个时候需要我们去执行npm命令去下载url-loadernpm/cnpm install url-loader --save
下载完成后 去过你尝试去npm run dev 你会发现还是报和上面相同的错误,这是为什么呢?
答案当然是因为你没有使用这个加载器(url-loader)
现在就需要你在**webpack.config.js**中去配置
这个配置说句实在的让小编好为难,因为一开始的时候咱也不知道该怎么配置啊,怎么办呢?
这个时候度娘就显现出来了强大的威力,我开始了百度,看到别人的博客,知道了在**rules**下配置如下信息
1234{ test ...
css 负外边距的巧妙运用
1、前言
本人水平有限,文章内容难免会出现问题,如果有问题欢迎指出,谢谢
2、说明
本文所有的元素均为block(块级元素),inline-block和inline的margin某些方向上都是无效的,所以这里不予讨论。
3、margin-left或者margin-right为负数
当块元素width:auto时,margin-left和margin-right会增加元素的宽度当有具体width时,margin-left向左移动,margin-right 减少css的读取宽度 如下图 (也就是后面的元素会挤进来)
https://www.cnblogs.com/chenlei987/p/10410428.html
注意:部分文章可能会在不就的将来更新
如果能够帮助到你,是小编最大的荣幸
当然 有 不好的地方 请大家帮忙指出 学习永无止境
小编一直认为 人外有人 天外有天 一起学习 共同进步
让我们共同加油吧!!!
那些不常见,但却非常实用的 css 属性
前言
本文是本人在网络上看到的好的文章,好的 博客等等一切好的东西的地址。
如有侵犯作者权益的任何行为,请及时与本人沟通,本人将及时处理。
本人做这篇收集博客的主要初衷是为了自己和小伙伴能够更好的学习复习了解掌握更多的知识。
如有带来不便,请见谅!
原文链接 如若想看原文。请点击
常见实用的css属性1、-webkit-line-clamp
作用: 可以把 块容器 中的内容限制为指定的行数。并且在超过行数后,在最后一行显示”…”
使用场景: 在文本内容多少不确定,但显示区域确定的时候,一般使用这个属性做限定
代码:
1234display: -webkit-box; /*值必须为-webkit-box或者-webkit-inline-box*/-webkit-box-orient: vertical; /*值必须为vertical*/-webkit-line-clamp: 2; /*值为数字,表示一共显示几行*/overflow: hidden; /*超出隐藏。必须设置*/
查看MDN 请点击
2、all
作用:将除却 unicode-bidi 与 direction 之 ...
css 中间文字 两端横线
前言
本人水平有限,文章内容难免会出现问题,如果有问题欢迎指出,谢谢
方式一 为元素加定位的方式
dome链接地址 http://www.example.geyunjie.com/css/line
html 代码
123<body> <div class="dome1">测试一下</div></body>
css 代码
12345678910111213141516171819202122232425262728<style> .dome1{ text-align: center; position: relative; } .dome1::after{ position: absolute; content: ""; display: block; width: 40%; height: 0; border: 1 ...
好的文章 好的博客 好的语录等等
前言
本文是本人在网络上看到的好的文章,好的 博客等等一切好的东西的地址。
如有侵犯作者权益的任何行为,请及时与本人沟通,本人将及时处理。
本人做这篇收集博客的主要初衷是为了自己和小伙伴能够更好的学习复习了解掌握更多的知识。
如有带来不便,请见谅!
html篇css篇js篇nodejs篇vue篇1.vue.js 组件复用和扩展之道2.你可能不知道的一些Vue实战技巧代码整洁之道1.编写自文档化JavaScript的15种方法MAC 篇1、Mac 键盘快捷键性能优化1.第51期 网易云音乐前端性能监控实践 & 那些不常见却非常实用的css属性 & 携程RN渲染性能优化实践
注意:部分文章可能会在不就的将来更新
如果能够帮助到你,是小编最大的荣幸
当然 有 不好的地方 请大家帮忙指出 学习永无止境
小编一直认为 人外有人 天外有天 一起学习 共同进步
让我们共同加油吧!!!
CommonJS, AMD, CMD的区别
CommonJS, AMD, CMD都是JS模块化的规范。CommonJS是服务器端js模块化的规范,NodeJS是这种规范的实现。AMD(异步模块定义)和CMD(通用模块定义)都是浏览器端js模块化的规范。RequireJS 遵循的是 AMD,SeaJS 遵循的是 CMD
CommonJS(同步模块定义)一个单独的文件就是一个模块加载模块使用require方法,该方法读取一个文件并执行,最后返回文件内部的exports对象所以,定义一个模块就是写一个新的js文件,但是最后要将文件的内容exports出来
如何定义模块和加载模块?
123456789101112131415161718192021222324252627282930//定义一个module.js文件var A = function() { console.log('我是定义的模块');}/* * 导出这个模块 * 1.第一种返回方式 module.exports = A; * 2.第二种返回方式 module.exports.test = A * 3.第三种返回方式 ...
vue基础 一 之 指令
vue基础指令以及案例v-html与v-text
v-html 可以渲染标签 但存在隐患 在敏感的地方使用可能会造成 跨站脚本攻击
v-text 会直接把标签当成文本渲染
v-cloak
v-cloak 的作用是阻止页面在mounted之前渲染标签内的数据 也就是说在插值表达式没有被替换之前,不渲染页面
v-bind 与 v-on
v-bind 绑定属性 缩写为 :
v-on 绑定事件 缩写为 @
跑马灯例子
事件修饰符
.stop 阻止事件冒泡
.prevent 阻止默认事件(阻止默认行为)
.capture 实现捕获触发事件
.self 只有点击自己的时候才会触发
.once 只触发一次
.stop 和 .self 的区别
相同点:都能阻止冒泡
不同点:stop阻止所有的事件冒泡 self只阻止了自己的事件冒泡(其他组件还是会冒泡)
v-model实现表单元素 和model 中的数据双向绑定 只能使用在 表单元素中
是v-on 和 v-bind 在表单上同时使用时的 语法糖
简易计算器
样式绑定使用class绑定样式
数组:这是一个可爱 ...
布局
布局,是每个前端工程师的基本功。结合自己的学习,总结一下自己所了解的一些比较重要的关于布局的一些知识
比如:两栏布局,三栏布局(统称为多栏布局),等高布局等等
两栏布局定宽做法css代码
123456789101112131415161718.container{ background-color: #008c8c;}.aside{ float: left; background-color: brown; width: 300px;}.main{ float: right; background-color: blueviolet; width: 1000px;}.clearfix::after{ content: ''; display: block; clear: both;}
html代码
1234<div class="container clearfix"> <aside class="aside&q ...
获取url的各个参数的值
思路由于下面的代码用的是简写的方式 为了所有人都能看得懂 或者说即使看不懂 看到思路 根据思路也能实现、所以写了以下的个人思路 有不好的 请私信我 对于私信的人 感激不尽 因为的你私信会让小编更上一层楼
定义一个url地址(就是确定要 解析的url地址)
定义一个方法用来解析参数
方法:先创建一个对象,用于存放参数的键值对
方法:先判断传入的参数是否为空 为空 直接返回一个空对象,不为空 进行解析
方法:使用split方法把 ? 符号之前的数据剔除
方法:使用split方法把数据以 & 作为切割点 切割成数组
方法:使用forEach对切割好的数组进行遍历
方法:再次使用split方法 把遍历的每一项 以 = 进行分割 分割成的数组的第一项作为 key 属性 第二项作为 value 属性 存放到之前定义好的 空对象中
方法:返回这个对象
具体实现代码123456789101112131415161718// 定义一个需要传递的URL const url = 'https://www.baidu.com ...
前端规范
前端规范
命名规则
头 : header
内容 : content/container
尾部 : footer
导航 : nav
侧栏 : sidebar
栏目 : column
外围盒子控制整体布局 : wrapper
左 右 中 : left / center / right
登录条 : loginbar
标志 : logo
广告 : banner
页面主题 : main
热点 : hot
新闻 : news
下载 : download
子导航 : subnav
菜单 : menu
子菜单 : submenu
搜索 : search
友情链接 : friendlink
页脚 : footer
版权 : copyright
滚动 : scroll
内容 : content
标签页 : tab
文章列表 : list
提示信息 : msg
小技巧 : tips
栏目标题 : title
加入 : joinus
指南 : guild
服务 : service
注册 : regsiter
状态 : status
投票 : vote
合作伙伴 : partner
注释的写法
123 ...