![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端开发问题
文章平均质量分 66
一年翻倍
这个作者很懒,什么都没留下…
展开
-
开发业务组件库踩坑记录
1、打包完业务组件库特别大,由于依赖了很多包如axios,echarts都会被打包进来;chainWebpack: config => { config.module .rule('js') .include .add('/packages') .end() .use('babel') .loader('babel-loader') .原创 2021-09-15 16:13:06 · 351 阅读 · 0 评论 -
封装Vue组件并发布到npm
前言:公司最近想组件化开发,我负责的项目比较多,但是每个项目当中都有一些公共的模块,希望可以复用,把这些公共的模块提取出来写在一个项目包中,然后下载之后,别的项目直接使用就行不需要开发。知识储备:vue 的基础知识 Vue.extend 构造器 $mount 手动挂载实例 vue 组件的传值传参 理解 Vue 构造函数及 prototype webpack 打包 npm 基础知识达到效果:从 npm 下载依赖包,直接调用1、使用 this.$test({msg: 'hell..原创 2021-07-01 18:51:52 · 501 阅读 · 1 评论 -
在搭建一个vue-cli项目时,如何配置能够优化加载速度
1、搭建vue-cli 脚手架,查看原文章https://blog.csdn.net/weixin_39854011/article/details/1124328732、配置webpack,借助一些插件来优化:有人疑惑package.json为什么要分devdependencies 和 dependencies?dependencies中的 npm包在线上环境使用,而其余的如各种loader,babel全家桶及各种webpack的插件等,其实在上线之前已经发挥出他的作用,所以不需要被打到包中上线。原创 2021-04-10 16:54:25 · 390 阅读 · 0 评论 -
flex:1 到底代表什么?
今天在做项目的时候遇到一个关于布局的问题, 就是 flex: 1; 我一直以为 flex: 1; 代表的是 flex: aoto; 后来发现结果并不是这样, 所以写一篇博客来讲解一下 flex: 1; 代表什么代码第一版<div class="container"> <div class="div">我是一个div</div> <div class="div">我是一个很多字div</div> <div class="div"原创 2021-04-07 17:28:57 · 790 阅读 · 0 评论 -
实现粘连布局
如何实现粘连布局:什么是粘连布局(css sticky footer)当main的高度足够长的时候,紧跟在<\main>后面的元素<\footer>会跟在其后面;当<\main>元素比较短的时候(比如小于屏幕的高度),我们期望这个<\footer>元素能够“粘连”在屏幕的底部。方法一:footer 上用负的 margin-top在内容外面需要额外包一层元素(wrap)来让它产生对应的 padding-bottom。是为了防止负 margin 导致 f原创 2021-04-07 17:00:17 · 172 阅读 · 0 评论 -
使用Font-Awesome图标字体库
方法一,在vue +Element 的项目中直接安装、使用Font-Awesome图标字体库:1、 安装font-awesome:2、在main.js中引入:import ‘font-awesome/css/font-awesome.css’在组件中使用.<template> <div> 微信:<span class="fa fa-wechat "></span> </div></template>也可以直原创 2021-02-24 17:00:34 · 1895 阅读 · 0 评论 -
Vue.js中引入图片路径的几种方式
vue中静态资源的引入机制Vue.js关于静态资源的请查看:官方文档静态资源可以通过两种方式进行处理:1、在 JavaScript 被导入或在 template/CSS 中通过相对路径(以 . 开头)被引用。这类引用会被 webpack 处理。诸如 <img src="..."、background: url(...) 和 CSS @import 的资源 写在 template 中内联 style 的 background: url(...) 样式, 在当前版本的测试中,即使使用了相对路径原创 2021-02-24 15:30:16 · 2736 阅读 · 0 评论 -
vue实战优化 打包后 vender文件过大问题
1.查看vue、vue-router、axios、vant 版本:2.在index.html 中引入 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.8.1/lib/index.min.css"> <script type="text/javascript" src="./static/lib/vue.min.js"></script> <script type="te原创 2021-02-23 15:48:49 · 299 阅读 · 0 评论 -
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
转:https://www.jb51.net/article/162760.htm原创 2021-02-23 15:39:56 · 1200 阅读 · 1 评论 -
position:sticky 粘性定位
position:sticky 粘性定位是结合了position:relative和position:fixed两个功能为一体的组合定位,不再用监听scroll事件,即可实现导航栏滚动绝对定位的效果。使用该属性有几个必要条件:1、父级元素不能有任何overflow:visible以外的overflow设置,否则没有粘滞效果。因为改变了滚动容器(即使没有出现滚动条)。因此,如果你的position:sticky无效,看看是不是某一个祖先元素设置了overflow:hidden,移除之即可。2、父级元素原创 2021-02-04 16:45:26 · 202 阅读 · 0 评论 -
前端开发中正在踩得坑
vant 使用:vant-radio 中的name是字符串,回显的时候要让它选中,必须从后端获取到的接口数据用toString()也转换成字符串写样式 style 中有 scoped:如果是要强制修改全局中的样式属性,不能在scoped 中写;直接在style中修改。...原创 2021-01-28 19:57:00 · 714 阅读 · 0 评论