主题化管理经常能在网站上看到,一般的思路都是将主题相关的CSS样式独立出来,在用户选择主题的时候加载相应的CSS样式文件。现在大部分浏览器都能很好的兼容CSS变量,主题化样式更容易管理了。最近,使用CSS变量在Vue项目中做了一个主题化实践,下面来看看整个过程。
Vue前端项目性能优化建议
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。得益于 Vue 的响应式系统和虚拟 DOM 系统,性能足够的优秀,因此,Vue 应用的开发者一般不需要做额外的优化工作。但在实践中仍然有可能遇到性能问题,下面介绍一些关于 Vue 前端项目性能优化的建议。
Vue CLI 3配置svg-sprite-loader与svgo-loader
随着高清屏幕的普及,相比使用png等位图而言,使用SVG等矢量图形是一种全新的设计方式。更重要的是相比位图而言,SVG有着无可比拟的优势。其中,使用SVG中的Symbol元素制作Icon图标变得越来越流行,这种技术被称为SVG Sprite。这里所说的Sprite技术,类似于CSS中的Sprite技术。图标图形整合在一起,实际呈现的时候准确显示特定图标。
而Vue CLI已经更新到了3.0版本,那么Vue CLI 3.0 如何修改Webpack设置来配置svg-sprite-loader与svgo-loader实现SVG Sprite?
数据结构与开发应用之队列
队列是遵循FIFO(First In First Out,先进先出,也称为先来先服务)原则的一组有序的项。队列的数据元素又称为队列元素。在队列中插入一个队列元素称为入队,从队列中删除一个队列元素称为出队。因为队列只允许在一端插入,在另一端删除,所以只有最早进入队列的元素才能最先从队列中删除,故队列又称为先进先出线性表。
使用Vue Styleguidist编写组件文档
在日常 Vue 项目开发中,我们难免需要写一些基础公共组件,在大型项目中,我们难免会遇到下面的痛点:
- 组件 API,对于 Vue 组件,有 props、event、slot 等接口,在团队内需要一定的沟通成本
- 对于 UI 组件,还需要提供预览,方便团队内快速选择合适的组件
如果使用 Markdown 撰写,虽然能写 API 文档,但是无法提供组件预览,并且手动写文档的成本也很大好在有一个这样的库,可以提供自动化文档的生成,并提供组件预览,这个库叫做 Vue Styleguidist。
数据结构与开发应用之栈
栈(stack)又名堆栈,是一种遵从后进先出(LIFO)原则的有序集合。新添加的元素都保存在栈的末尾,称作栈顶,另一端就叫栈底。在栈里,新元素都靠近栈顶,旧元素都接近栈底。向一个栈插入新元素又称作进栈、入栈或压栈,它是把新元素放到栈顶元素的上面,使之成为新的栈顶元素;从一个栈删除元素又称作出栈或退栈,它是把栈顶元素删除掉,使其相邻的元素成为新的栈顶元素。
CSS计数器及其应用
假设您有一个未知数量的 div 元素,并且(出于某种原因)您想要计算它们的数量,并自动为它们彼此编号——您将如何做到这一点?您的第一个想法可能是使用Javascript来处理DOM。其实你完全可以用CSS来做。
深入理解new运算符
在 JavaScript 中,new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。创建一个对象很简单,为什么我们还要多此一举使用 new 运算符呢?它到底有什么样的魔力?
浅谈if...else...的优化方式
if…else…语句是我们平时写代码时经常用到的,而且使用起来也没啥问题。问题是当业务逻辑比较复杂时,一堆条件判断就看的让人头大了,而且功能迭代时,还有可能在上面进行增量修改,内容越来越长,嵌套越来越深,可读性就变得越来越差。