不爱掘金的小C
前端切图崽
开心快乐的切图
获得徽章 0
- 前段时间，对部门的个别项目进行Vue3.0+ts框架的迁移，刚开始研究的时候也是踩坑特别多，尤其我们的项目还有些特殊的webpack配置，所以，研究vue.config.js的配置的时候也是查阅了各种资料文档，最终，完成了项目webpack的特殊配置。
今天分享一下，我们项目当中的一些webpack配置，希望能给大家有所启发；只要配置多了，你就会发现其实所有的配置的都是相似的，尤其像插件的配置，都是十分相似的。
我们现在开始进入今天的主题啦~~
1 介绍
之前，我有提到过，当然大家肯定也都知道，Vue3.0不在有webpack.config.js的配置；但是不可避免,在项目开发中我们肯定会存在一些特殊的需求需要调整webpack, 这个时候，在Vue3.0的项目当中，我们就需要在根目录创建vue.config.js去完成webpack的一些特殊配置,默认它会被 @vue/cli-service 自动加载。
此刻，你需要创建vue.config.js文件。展开评论点赞 - 相信用过vue的小伙伴，肯定被面试官问过这样一个问题：在vue中动态的引入图片为什么要使用require
有些小伙伴，可能会轻蔑一笑：呵，就这，因为动态添加src被当做静态资源处理了，没有进行编译，所以要加上require， 我倒着都能背出来......
emmm... 乍一看好像说的很有道理啊，但是仔细一看，这句话说的到底是个啥？针对上面的回答，我不禁有如下几个疑问：
什么是静态资源？
为什么动态添加的src会被当做的静态的资源？
没有进行编译，是指为是什么没有被编译？
加上require为什么能正确的引入资源，是因为加上require就能编译了？
当我产生最后一个疑问的时候，发现上面的答案看似说了些啥，但好像又什么都没说...... 如果各位看官老爷也有如上几个疑问，那就让我给大家一一解惑展开赞过 评论1 - localStorage 是前端本地存储的一种，其容量一般在 5M-10M 左右，用来缓存一些简单的数据基本够用，毕竟定位也不是大数据量的存储。
在某些场景下 localStorage 的容量就会有点捉襟见肘，其实浏览器是有提供大数据量的本地存储的如 IndexedDB 存储数据大小一般在 250M 以上。
弥补了localStorage容量的缺陷，但是使用要比localStorage复杂一些 mdn IndexedDB
不过已经有大佬造了轮子封装了一些调用过程使其使用相对简单，下面我们一起来看一下
localforage
localforage 拥有类似 localStorage API，它能存储多种类型的数据如 Array ArrayBuffer Blob Number Object String，而不仅仅是字符串。
这意味着我们可以直接存 对象、数组类型的数据避免了 JSON.stringify 转换数据的一些问题。
存储其他数据类型时需要转换成上边对应的类型，比如vue3中使用 reactive 定义的数据需要使用toRaw 转换成原始数据进行保存， ref 则直接保存 xxx.value 数据即可。展开赞过 评论1 - 在一个风和日丽的早晨，我正悠闲地喝着Coffe，突然领导向我走来，我赶紧熟练地切出VSCode，淡定自若地问：领导，什么事？领导拍了拍我的肩膀：你上次封装的方法同事跟我反馈使用起来很不错啊，你不如做成JS插件给大家用吧。我放下了手中的掘金马克杯，甩了一下眼前仅剩的几根刘海，眼神坚定地回道：没问题啊领导，保证完成任务！
原型链写法
要开始编写插件就得先了解JS模块化，早期的模块化是利用了函数自执行来实现的，在单独的函数作用域中执行代码可以避免插件中定义的变量污染到全局变量，举个栗子🌰，以下代码实现了一个简单随机数生成的插件：展开评论点赞 - 梯形与平行四边形
接下来，基于矩形的变形，经常会出现梯形与平行四边形的按钮。
实现它们主要使用 transform 即可，但是要注意一点，使用了 transform 之后，标签内的文字也会同样的变形，所以，我们通常使用元素的伪元素去实现造型，这样可以做到不影响按钮内的文字。
平行四边形
使用 transform: skewX() 即可，注意上述说的，利用元素的伪元素实现平行四边形，做到不影响内部的文字。
<div class='btn parallelogram'>Parallelogram</div>
.parallelogram {
position: relative;
width: 160px;
height: 64px;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #03f463;
transform: skewX(15deg);
}
}
如果不想使用伪元素，除了 transform: skewX()，平行四边形使用渐变也是可以实现的。
大概就是这样：
{
background: linear-gradient(45deg, transparent 22%, #04e6fb 22%, #9006fb 78%, transparent 0);
}展开评论点赞 - 除了网页的内容外，所有的东西都应该用英文，而不是拼音。
原因有如下几点：
编程不是一个人的活动，是群体活动。我们使用的编程语言、框架和库，几乎全部都是英文。使用中文，你的协作者会难以理解你的代码。而且中英混搭会让代码阅读困难。
使用拼音和使用汉字基本上没有什么区别，甚至还不如汉字直观。
拼音很难加音标，而且即使能加音标，也很难表达真正的意思，因为同音词太多，它存在多义性，比如 heshui，你不知道它到底是在表达喝水还是河水。
使用拼音会让你显得非常不专业。
坚持使用英文编程，有利于提高英语水平。
如果英语不好，刚开始可能会难以忍受，但是一旦熬过去开始这段时间，坚持下来，将会是长期的回报。展开1点赞 - 经常的，我们在日常工作中，会使用第三方UI组件库，比如：element-ui、vant-ui、iview、ant-design等等。不管是为了业务考虑还是单纯的为了提高效率，我们会把一些经常用到的组件抽离、封装成公共组件，这样方便我们在不同的地方使用这个组件，减少重复代码的编写。
我们把对于第三方组件库的封装称为组件的二次封装，那么这带来有个思考，当我们在二次封装时，我们在封装什么？展开评论点赞 - #新人报道# 在微前端这个概念出现之前，我们或多或少都能够联想到另一个词性上有些相似的概念微服务，它从出现后便一直都很火热，并不断催生着后端架构体系的演进，而此刻我们如果细品一下这微字头的两兄弟，探究他们的诞生原因，会有很多有意思的点。评论点赞