一年翻倍-CSDN博客

原创开发业务组件库踩坑记录

1、打包完业务组件库特别大，由于依赖了很多包如axios，echarts都会被打包进来；chainWebpack: config => { config.module .rule('js') .include .add('/packages') .end() .use('babel') .loader('babel-loader') .

2021-09-15 16:13:06 356

一、前言什么是微前端Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently. -- Micro Frontends微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。更多关于微前端的相关介绍，推荐大家可以去看这几篇文章：Micro Frontends Mi

2021-07-23 18:33:29 290

原创微前端初探

每日优先：https://juejin.cn/post/6844903943873675271最全的微前端解决方案https://zhuanlan.zhihu.com/p/783620281、微前端框架需求与目的新旧子项目混合的大型项目，控制台类型大型项目平滑升级，独立开发，独立部署增量升级：渐进式重构无技术栈限制工程治理独立运行。。。。微前端架构旨在解决单体应用在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，从一个普通应用演变成一个巨石应用后，随..

2021-07-23 18:14:19 339

转载微前端架构调研

一、什么是微前端？微前端应用于浏览器端,主要是对web应用进行拆解,最后将不同子系统(模块)聚合成一个完整的应用. 微前端主要目的是聚合,即将不同子系统聚合成一个大系统,而微服务架构目前更多是解耦,即解耦不同服务间的依赖. 二、什么情况适合使用微前端？当我们的系统中有多个不同的子模块,并且子模块之间有相对独立且完整的功能体系时,一旦子模块变得越来越多, 那么整个应用将变得非常庞大且臃肿,开发和维护成本大大提高.如果在这种场景下我们采用SPA模式开发,那么项目后期将变得不可想象,..

2021-07-09 17:13:51 318

原创封装Vue组件并发布到npm

前言：公司最近想组件化开发，我负责的项目比较多，但是每个项目当中都有一些公共的模块，希望可以复用，把这些公共的模块提取出来写在一个项目包中，然后下载之后，别的项目直接使用就行不需要开发。知识储备：vue 的基础知识 Vue.extend 构造器 $mount 手动挂载实例 vue 组件的传值传参理解 Vue 构造函数及 prototype webpack 打包 npm 基础知识达到效果：从 npm 下载依赖包，直接调用1、使用 this.$test({msg: 'hell..

2021-07-01 18:51:52 577 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 414

原创 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 795

原创实现粘连布局

如何实现粘连布局：什么是粘连布局（css sticky footer）当main的高度足够长的时候，紧跟在<\main>后面的元素<\footer>会跟在其后面;当<\main>元素比较短的时候（比如小于屏幕的高度），我们期望这个<\footer>元素能够“粘连”在屏幕的底部。方法一：footer 上用负的 margin-top在内容外面需要额外包一层元素(wrap)来让它产生对应的 padding-bottom。是为了防止负 margin 导致 f

2021-04-07 17:00:17 197

原创使用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 1926

原创 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 2746

原创 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 303

原创移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能

转：https://www.jb51.net/article/162760.htm

2021-02-23 15:39:56 1286 1

原创 vue调试工具Devtools不出现的解决方式

文章引用：https://blog.csdn.net/przlovecsdn/article/details/82256558在使用vuex时，想直观的查看数据state的变动，用Devtools可实现，但是在Google浏览器中开发调试的时候，右上角出现vue的图标，但是在开发者工具中没有出现vue调试（已在扩展程序中安装 Vue Devtools）vue图标：开发者工具：扩展程序：没显示调试工具的原因是：1.用了生产环境的版本2.压缩的vue版本3.或是没有勾选：允许访问文件网址

2021-02-18 16:55:03 2882

原创 position：sticky 粘性定位

position：sticky 粘性定位是结合了position:relative和position:fixed两个功能为一体的组合定位，不再用监听scroll事件，即可实现导航栏滚动绝对定位的效果。使用该属性有几个必要条件：1、父级元素不能有任何overflow:visible以外的overflow设置，否则没有粘滞效果。因为改变了滚动容器（即使没有出现滚动条）。因此，如果你的position:sticky无效，看看是不是某一个祖先元素设置了overflow:hidden，移除之即可。2、父级元素

2021-02-04 16:45:26 208

原创前端开发中正在踩得坑

vant 使用：vant-radio 中的name是字符串，回显的时候要让它选中，必须从后端获取到的接口数据用toString()也转换成字符串写样式 style 中有 scoped:如果是要强制修改全局中的样式属性，不能在scoped 中写；直接在style中修改。...

2021-01-28 19:57:00 756

原创 vue 开发环境前端服务器代理，proxyTable使用

以下是我转发的，博主正文在此：https://www.cnblogs.com/wasbg/p/12659610.html我们在使用 vue-cli 工具生成 vue 项目时vue init webpack my-project-vue在生成的项目结构里,会有一个 index.js 文件.在这个 index.js 文件里,会有一个 proxyTable 的空节点.理解这个节点的作用需要有两个前置知识前端跨域利用代理服务器进行跨域.proxyTableproxyTable 是 vue-cl

2021-01-26 13:09:37 1099

原创前端环境安装

安装前端开发环境：1.node.js 安装https://blog.csdn.net/weixin_39854011/article/details/105904343下载安装包： https://nodejs.org/en/download/傻瓜安装配置环境变量重启ide

2021-01-25 16:34:28 323

原创安装PHP报错：‘php‘ 不是内部或外部命令，也不是可运行的程序

1、在全局环境变量：配置php.exe2、phpStorm 中配置php.exe1.点击setting设置：2.输入"php"搜索；找到如图相关目录：3.选择当前php环境版本：.4.点击Interpreter:5.如图点击PHP executable找到php.exe文件在php环境中的路径：6.最后点击Apply->ok;退出phpstorm重新开启即可。...

2021-01-11 22:13:50 808

原创记录：vue.config.js 中eslint配置错误导致的问题 Child compilation failed:

Error: Child compilation failed: Module parse failed: Unexpected token (1:0) File was processed with these loaders: * ./node_modules/html-webpack-plugin/lib/loader.js * ./node_modules/eslint-loader/index.js You may need an additional loader to handl

2021-01-10 22:31:14 2097

原创初始化一个vant H5项目

1.首先初始化一个 cli的项目：https://blog.csdn.net/weixin_39854011/article/details/1093646952、npm i vant3、自动按需引入组件：npm i babel-plugin-import -D在babel.config.js 中新增配置： module.exports = { plugins: [ ['import', { libraryName: 'vant', libraryDirect

2021-01-10 22:25:13 610

原创服务器安装lnmp环境

进入bhx用户，自己的目录下安装lnmp 压缩包cd /home/bhx/wget http://soft.vpser.net/lnmp/lnmp1.7.tar.gz -cO lnmp1.7.tar.gz && tar zxf lnmp1.7.tar.gz && cd lnmp1.7 && ./install.sh lnmp2.su 切换到root用户./install.sh 安装环境安装完之后，将PHP、mysql、nginx 安装到：usr.

2020-12-31 18:05:00 339

原创前端开发性能优化

前端性能优化 – 资源预加载当提到前端性能优化时，我们首先会联想到文件的合并、压缩，文件缓存和开启服务器端的 gzip 压缩等，这使得页面加载更快，用户可以尽快使用我们的 Web 应用来达到他们的目标。资源预加载是另一个性能优化技术，我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。引用 Patrick Hamann 的解释：预加载是浏览器对将来可能被使用资源的一种暗示，一些资源可以在当前页面使用到，一些可能在将来的某些页面中被使用。作为开发人员，我们比浏览器更加了解我们的应用，所以我

2020-12-27 21:55:28 145

原创前端优化首屏加载速度

执行npm run build，将打包代码部署上线后访问项目,会发现表现很糟糕，页面会出现长时间的空白等待，这是无法忍受的性能问题，迫切需要解决。1、路由懒加载。原来的路由引入组件import Index from @/views/index.vue;{ path: '/' name: 'index' component: Index}现在引入路由(vue异步组件)import Vue from 'vue';import Router from 'vue-router';Vue.u

2020-12-27 21:48:07 1813

原创前端开发中history 路由和hash路由的选择

1.为什么要有前端路由：对于 Vue 这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。2.浏览器目前提供了两种路由：hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。比如这个URL：http://www.abc.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL中，但

2020-12-27 15:57:08 1037

原创 SPA 单页面应用优化基于webpack方面

一、前言现在随着前端开发的复杂度和规模越来越大，不能抛开工程化来独立开发，比如：react的jsx代码必须编译后才能在浏览器中使用，比如sass和less代码浏览器是不支持的。如果摒弃这些开发框架，开发效率会大幅下降。在众多前端工程化工具中，webpack脱颖而出成为了当今最流行的前端构建工具。二、webpack的原理1.核心概念：（1）entry：一个可执行模块或者库的入口。（2）chunk：多个文件组成一个代码块。可以将可执行的模块和他所依赖的模块组合成一个chunk，这是打包。（3）lo

2020-12-01 15:36:15 324

原创 Vue中的diff算法

1. 为什么要用Diff算法由于在浏览器中操作DOM的代价是非常“昂贵”的，所以才在Vue引入了Virtual DOM，Virtual DOM是对真实DOM的一种抽象描述，即使使用了Virtual DOM来进行真实DOM的渲染，在页面更新的时候，也不能全量地将整颗Virtual DOM进行渲染，而是去渲染改变的部分，这时候就需要一个计算Virtual DOM树改变部分的算法了，这个算法就是Diff算法。2. 传统的Diff算法传统的Diff算法通过循环递归对节点进行比较，然后判断每个节点的状态以及要做

2020-11-24 23:01:08 997

原创 vue的生命周期

Vue生命周期四个阶段什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！生命周期钩子：就是生命周期事件的别名而已；生命周期钩子 = 生命周期函数 = 生命周期事件意义:给了用户在不同阶段添加自己的代码的机会。初始化 (create)— 组件挂载(mount)-----组件更新 (update)— 销毁(destroy)生命周期发生了什么beforeCreate初始化界面前 : 在当前阶段data、methods、co

2020-11-19 10:19:07 302 2

原创 vue 路由懒加载（延时加载、按需加载）

import和require的区别node编程中最重要的思想就是模块化，import和require都是被模块化所使用。遵循规范require 是 AMD规范引入方式import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法调用时间require是运行时调用，所以require理论上可以运用在代码的任何地方import是编译时调用，所以必须放在文件开头本质require是赋值过程，其实require的结果就是对象、数字、字符串、函数等，再把require的结果赋值给某个

2020-11-16 23:04:09 1697

原创 vue-cli创建项目

常用命令通过命令行查询可用的包的版本号npm view vue-cli versions --json查看vue-cli 最新版本vue --version 或 vue -V卸载之前版本npm uninstall vue-cli -g 或 yarn global remove vue-cli（通过 npm install -g vue-cli 下载的版本）npm uninstall -g @vue/cli （通过 npm install -g @vue/cli 下载的版本）vue脚手架初始化

2020-10-29 17:43:38 474

原创面试汇总

精友科技：1.自我介绍2.vue 父传子（props）子组件中定义 props属性，在父组件中使用；可以是动态的也可以是静态的；子传父($emit)子组件中定义;子组件可以使用 $emit 触发父组件的自定义事件,并传参；emit/emit/emit/onvm.emit(event,arg)//触发当前实例上的事件vm.emit( event, arg ) //触发当前实例上的事件vm.emit(event,arg)//触发当前实例上的事件vm.on( event, fn ); //

2020-10-22 17:35:50 1218 1

原创从登陆鉴权到sso（单点登录）

session 知识点http协议是无状态的，所以我们连续访问100次和1次没有区别，都是没有记忆的。所以我们不能让用户每次访问网站都登陆一次，session 方案就被提出来了。通过cookie和session为用户建立一次会话，在用户授权成功时给他一个cookie，是唯一的会话id。比如PHP就会为建立会话的用户默认设置一个名为phpsessid，cookie中存有phpsessid,返回给客户端，下次用户在请求的的时候带这个cookie,服务端就知道刚刚请求过了，不需要再登录了。那么如何展示用户.

2020-10-09 15:59:00 1885

原创 2020前端面试题总结一

2020前端面试题总结一、CSS1.css的重绘与回流重绘：指当前节点更改外观，不会影响布局。浏览器不需要重新计算元素的集合属性，跳过回流，直接为元素绘制成更改后的样式。回流：DOM结构的修改导致几何尺寸发生改变时，发生回流。发生回流就是浏览器将已渲染好的受到影响的部分失效，重新构造这部分，完成reflow 后，浏览器会重新绘制这部分内容。但有时一个元素的回流可能会导致了其所有子元素以及DOM中紧随其后的节点、祖先节点元素的随后的回流，所以一个节点的回流会引起页面某个部分甚至整个页面的回流常见

2020-10-09 15:54:17 347

原创如何理解虚拟DOM树提高效率

前面是官方解释官网概念：Vue通过建立一个虚拟DOM树对真实DOM发生的变化保持追踪。一棵真实DOM树的渲染需要先解析CSS样式和DOM树，然后将其整合成一棵渲染树，再通过布局算法去计算每个节点在浏览器中的位置，最终输出到显示器上，这些步骤在浏览器的渲染过程及页面加载的优化方案一文中有详细的说明。而虚拟DOM则可以理解为保存了一棵DOM树被渲染之前所包含的所有信息，而这些信息可以通过对象的形式一直保存在内存中，并通过JavaScript的操作进行维护。什么是虚拟 dom虚拟DOM是对应于浏览器渲染

2020-09-07 15:59:58 568

空空如也

空空如也