- 博客(49)
- 收藏
- 关注
原创 浅析微前端框架 single-spa
将一个单体大型应用,转化为多个可以独立运行、独立开发、独立部署、独立维护的应用的聚合。解决的问题:1、随着项目迭代应用越来越庞大,难以维护。2、跨团队或跨部门协作开发项目导致效率低下的问题。以 single-spa 为例,我们一起配置一下改造入口文件 main.js更改试图文件环境配置文件修改路由文件在 package.json 的 script 中添加命令启动应用,此处演示子应用嵌入所以用子应用模式运行项目
2022-11-09 17:47:55
935
原创 vue列表垂直无缝滚动
实现新闻列表的轮播(如下图)上代码封装的so-marquee.vue<template> <div class="marquee-wrapper" :style="{ width: realWidth + 'px' }" > <div id="marqueeContainer" class="marquee-container" :.
2021-02-03 17:54:46
1832
1
原创 vue.config.js配置sass-loader
vue.config.js中配置sass的全局变量入口遇到问题“sass-loader”: “^8.0.0”sass-loader如上版本号时,配置如下:module.exports = { css: { loaderOptions: { sass: { // 全局sass变量 //sass-loader 8.0.0以前版本(包含) prependDat
2021-02-02 10:44:01
9657
6
原创 css命名规范记录
一、常用 CSS 样式名称这里引用一下掘金作者 冷石Boy 的 css 样式名称包裹类: container, wrapper, outer, inner, box, header, footer, main, content, aside, page, section, block状态类: primary, secondary, success, danger, warning, info, error, Link, light, dark, disabled, active, checked,
2021-01-28 10:01:04
139
原创 收集文件功能的系列软件
前言:收集多人提交的文件,汇总后下载压缩包。可以实现此功能的软件收集如下。(此处比较的是各软件免费版,vip金主请忽略)软件网址优缺点坚果云收件箱https://workspace.jianguoyun.com/inbox/home优点:页面清爽,可以设置收取文件的简介和一些规则;可分享外链收集,且上传人不用注册账号;单个上传文件大小无限制缺点:有流量限制,当月上传的流量不超过1G,通过你分享链接未注册用户上传文件消耗你的流量。下载流量限制当月3G快速创建收件夹ht.
2020-12-23 10:51:38
1476
原创 vue3.x篇四——vue router和vuex的使用
vue3.x搭载的是vue-router 4 和 vuex 4本节代码demo地址:demo项目链接1、demo图2、vue-router的用法首先要引入vue-router暴露的apiimport { useRoute, useRouter } from "vue-router";然后在setup()函数中做相应操作setup(){ const route = useRoute(); const router = useRouter(); const curRout.
2020-12-22 17:19:25
610
1
原创 vue3.x篇三:v-model用法
注意:v-mode在vue2.x和vue3.x中的使用方法有异同。本节代码demo地址:demo项目链接1、比较vue2.x和 vue3.xvue2.x:允许组件自定义用于 v-model 的 prop 和事件。但是,这仍然只允许在组件上使用一个 model。vue3.x:双向数据绑定的 API 已经标准化。(一个组件上允许使用多个model)具体的vue升级变动,请阅读官方vue3中文文档: vue3.x中文文档2、demo图3、代码Model.vue文件(父组件)<te.
2020-12-21 15:01:11
3803
1
原创 vue3.x篇二:生命周期
vue3.0的生命周期<template> <div>生命周期</div> <button @click="update">版本号{{version}}</button></template><script>//按需引入import {ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted
2020-12-17 10:51:44
183
4
原创 vue3.x篇一:搭建项目
利用vue-cli3以上版本脚手架搭建vue3.0项目首先确保你的vue-cli脚手架版本号在3以上,我这里用的v4.5.9。升级vue-cli请参考:升级vue-clivue -V查看脚手架版本号项目创建步骤如下:1、初始化一个vue3-demovue create vue3-demo2、直接选择Default (Vue 3 Preview)也可,只是生成的项目结构单一。我此处选择自定义3、按需添加你想要的插件(vue3.0搭载的Vuex和Router均为4.0版本的)4、选
2020-12-17 09:50:46
573
原创 用dart-sass(sass)代替node-sass
问题需求:node-sass在npm安装的时候大概率的会安装出错,或下载时间过长,因此考虑用dart-sass来替换1、如果安装了node-sass首先需要卸载npm uninstall node-sass2、安装dart-sassnpm install sass sass-loader -D3、如果项目之前用到/deep/需要替换为::v-deep,否则会报错...
2020-11-30 14:19:15
4454
原创 git用户名密码记忆命令
问题描述:git用户名密码想要重置,然后利用了命令行重置,之后每次都要进行用户名密码输入,相关命令行如下git config --system --unset credential.helper //重置用户名密码git config --global credential.helper store //用户名密码记忆...
2020-10-12 14:25:42
177
原创 gitignore
在项目中有些配置文件不需要提交,但是有同学在后面开发中发现在.igonore文件中无论如何都无法忽略某些文件的提交。原因在这里:已经维护起来的文件,即使加上了gitignore,也无济于事。----那么如何解决呢?方式如下git update-index --assume-unchanged 要忽略的文件夹/文件夹下文件名比如我要忽略项目下.idea文件夹下所有xml文件,idea下都是xml文件(我用的webstorm):git update-index --assume-unchanged
2020-08-20 14:58:38
172
2
原创 git 命令
git add -A //添加要提交的文件git commit -m xxx //git的提交描述git pull //拉取远程代码git push //提交commit的本地代码//修改最近一次的git commit git commit --amend //进行vim修改
2020-08-03 10:47:27
95
原创 element-ui组件中的事件传参+自定义传参
问题描述:vue中利用第三方组件,组件中的事件有时会返回参数,在保留原来的参数基础上增加自定义参数实现:(此处以element-ui中的checkbox为例)<el-checkbox :label="d_itm.id" @change="(flag,$event)=>_deptItemChange(flag,$event,d_itm)">{{d_itm.orgName}}</el-checkbox><!--flag 和 $event 是组件原始参数-.
2020-07-10 15:15:52
1849
原创 2020.6面试经记录
一、css集合1、margin合并(兄弟元素)和塌陷(父子元素)解决方法:(1)position:absolute/fixed(2)display:inline-block;(3)float:left/right(4)overflow:hidden2、flex布局a、设置在容器上面flex-direction:row | row-reverse | column | column-reverse;flex-wrap:nowrap | wrap | wrap-reverse;flex-f
2020-07-09 10:33:01
228
原创 el-tree Scoped Slot自定义内容
问题描述element-ui中的el-tree组件自定义内容实现。依靠Scoped Slot<el-tree :expand-on-click-node="false" :props="{label:'orgName',isLeaf: 'leaf',children:'childList'}" node-key="id" :data="treeData" ref="tree" highlight-current show-overflow-tooltip @node-click.
2020-07-07 17:36:17
4758
原创 vue $router 打开空白页
默认是替换当前页this.$router.push('/index')可以用如下方法进行空白页打开let xtbl = this.$router.resolve('/host/wait')window.open(xtbl.href, '_blank');
2020-07-02 15:49:41
1365
原创 js判断object为空
js判断object为空1、es6判断let data = {}let lengh = Object.keys(data).length //将data中的key值取出,lengh === 0 表示data为空2、利用JSONJSON.stringify(data) == '{}'此文章是自己学习时的笔记,只供参考,如有问题欢迎赐教!...
2020-04-07 11:22:06
170
原创 升级vue-cli3(爬坑记录)
emmm,突然想升级下vue的版本,然后要升级node和npm,在此做下笔记1、升级vue首先查看版本号,然后要把旧的版本卸载掉,重新安装新的版本# 查看版本号vue --version# ORvue -V# 卸载(1.x 或 2.x)npm uninstall vue-cli -g# OR vue-cli是 (1.x 或 2.x)yarn global remo...
2019-11-29 17:49:01
488
原创 Js根据数值的大小来编辑颜色色值
&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt
2019-02-18 11:20:58
7361
7
原创 git命令笔记
1、克隆代码到本地 git clone <链接地址>2、克隆指定分支代码到本地 git clone -b <分支名称> <链接地址>3、查看分支 git branch //查看本地分支 git branch -a //查看仓库所有分支4、切换分支 git checkout -b <分支名称>...
2019-01-04 14:05:05
112
原创 vue开发微信H5——动态改变页面
需求说明动态的修改微信的title,vue2.0开发,基于微信安装插件 npm install vue-wechat-title --save在项目中引入(main.js) Vue.use(require('vue-wechat-title'))进行路由配置(index.js) routes: [ { path: '/', n...
2018-11-22 16:59:36
622
原创 vue笔记记录(二)——发起请求
开发过程中和后台进行数据的交互,需要用到axios 1、安装axios和qs$ npm install axios -s //安装axios$ npm install qs -s //安装qs2、在main.js中引入import axios from 'axios'import qs fr...
2018-07-27 15:18:59
382
原创 vue笔记记录(一) —— 搭建项目
利用webpack脚手架搭建vue项目npm install -g vue-clivue init webpack my-projectcd my-projectnpm installnpm run dev至此,一个简单的vue项目就搭建好了。大致目录结构如下:.├── build/ # webpack config fi...
2018-07-18 15:53:16
214
转载 assets与static的区别
assets与static的区别 相同点:资源在html中使用,都是可以的。不同点:使用assets下面的资源,在js中使用的话,路径要经过webpack中file-loader编译,路径不能直接写。assets中的文件会经过webpack打包,重新编译,推荐该方式。而static中的文件,不会经过编译。项目在经过打包后,会生成dist文件夹,static中的文件只是复制一遍而已。简单来...
2018-07-17 09:22:58
434
转载 Webstorm最新破解
在打开的License Activation窗口中选择“License server”,在输入框输入下面的网址:http://idea.wrbugtest.tk/点击Activate2018.6.25 亲测。 转载:(参考链接)(https://blog.csdn.net/daniel_tzq/article/details/80675638)...
2018-06-25 09:37:16
698
翻译 返回上一级页面
需求重现 页面跳转时,点击返回有时会陷入循环,无法逐级向上返回解决办法 js文件var historyUtils = { add : function (url) { var historyArray = historyUtils.getLocal(); if (!historyArray) { history...
2018-06-11 16:18:50
4251
原创 手机验证码倒计时
需求重现 绑定手机号,或者手机号注册账户时,需要验证码,验证码点击后60s内禁止操作解决办法 html文件<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport"
2018-06-11 15:50:53
368
原创 微信公众号开发(1)——微信H5图片点击放大预览
微信公众号开发踩了很多坑,在此处以作笔记。需求重现 微信公众号H5网页,图片点击放大实现预览,这是微信自己的接口,Android可以完美的自己实现,可是ios却不能实现。解决办法html文件var imgObj = $("#packageDetailBox img"); //这里改成相应的对象js文件/*此方法用来解决,微信H5图片点击放大*//...
2018-06-09 11:50:46
8506
原创 js获取地址栏传递的参数
//公共获取地址栏信息——传参数,结果是单独的参数内容function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r !...
2018-04-11 13:53:33
201
原创 移动端弹窗禁止页面滚动
我们要阻止页面滚动,那么何不将其固定在视窗(即position: fixed),这样它就无法滚动了,当蒙层关闭时再释放。 position: fixed应该不用对大家过多介绍了吧, 当然还有一些细节要考虑,将页面固定视窗后,内容会回头最顶端,这里我们需要记录一下,同步top值。let bodyEl = document.bodylet laytop = 0function stop...
2018-04-09 15:01:34
628
原创 图片预览
考虑到用户体验, 网页的图片上传数据库前,先预览是很有必要的一个步骤,第一可以给用户带来安全感,第二防止图片文件有问题而提交到数据库,占用存储资源。那么要实现预览有两种方式:一种是用window.URL.createObjectURl方法对选择的图片数据(图片数据可以勉强理解为input的value)生成一个blob对象路径,第二种是用获取 FileReader读取器。那么无论那种方法,首...
2018-04-08 09:28:18
151
转载 export,import ,export default分别是什么
首先要知道export,import ,export default是什么ES6模块主要有两个功能:export和import export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口 import用于在一个模块中加载另一个含有export接口的模块。 也就是说使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文件)。这几个都...
2018-03-15 13:02:47
457
原创 css实现手风琴动画效果
利用css写手风琴样式,简简单单5步实现 下面贴代码<style> .accordion-box{ width: 100%; height: 500px; margin:0 auto; overflow: hidden;} .accordion-box div{ width: 25%; float: left; transition: all 1s...
2018-03-09 11:59:07
2035
转载 微信小程序如何引用外部icon
首先在阿里巴巴矢量图标库添加需要的icon,点击下载至本地 然后在下载的东西里找到这个文件iconfont.css 在自己的小程序里建一个iconfont.wxss的页面,建议放在公共样式里,自己可以找到路径就行,把之前iconfont.css的内容放到iconfont.wxss里面。 使用 import导入,或者放在app.wxss里面全局,反正得导入它。 页面用的时...
2018-03-08 10:01:04
5152
2
转载 输入一个URL到页面呈现其中发生的过程-------http过程详解
在我们点击一个网址,到它能够呈现在浏览器中,展示在我们面前,这个过程中,电脑里,网络上,究竟发生了什么事情。服务器启动监听模式 那我们就开始了,故事其实并不是从在浏览器的地址栏输入一个网址,或者我们抓着鼠标点击一个链接开始,事情的开端要追溯到服务器启动监听服务的时候,在某个未知的时刻,一台机房里普普通通的刀片服务器,加上电,启动了操作系统,随着操作系统的就绪,服务器启动了 http 服务进程...
2018-03-05 10:07:37
392
原创 jquery的hover事件(闪烁)bug
在前端开发中用的较多的是jquery,之前遇到一个问题,一个下拉的jquery下拉菜单效果,hover上去,一直闪动,用mouseovermouseout好好的,当时没搞定,今天逛论坛看到一个方法,可以行.只怪自己之前看jquery api的时候不是很仔细。解决闪动 可以使用Stop()stop([clearQueue],[jumpToEnd])概述停止所有在指定元素上正在...
2018-03-01 11:45:59
3122
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人