当前位置: 首页 > Web前端 > vue.js

推荐一些奇葩的好东西

时间:2023-03-31 20:30:34 vue.js

","//@importurl($3);importPubliccssclass","$4","DirectoryStructureWheelsbrowsermindmapnprogressvConsoleVScodeDIYcodesnippetsImagePreviewtoolsmarkdown-niceexcalidrawGitHubReadmeStatsgh-pageswheels1.browserStar731在这个前端不兼容的时代,我们开发一些用户会使用谷歌浏览器,但是一些用户没有安装Chrome浏览器,或者安装了其他杂七杂八的浏览器内核可能会使用Chrome,但是有些渲染机制是不同形式的,比如Edge♂等。两个浏览器都用,单独判断内核是没有用的,所以需要判断是不是谷歌原生浏览器。为了宣传用轮子方便使用,不重复造轮子的宗旨,老严找到了浏览器地址:https://github.com/mumuy/browser简单使用import使用constinfo=newBrowserif(info.browser==="Chrome"){...}2.mindmapStar223我们的想象力永远比不上产品经理、甲方、老板。突然有一天甲方说,让你在项目中添加可编辑的思维导图,并保存为笔记。听到这个要求的时候,我正在练习闪电五连鞭。还好老严在轮盘市场找到了——mindmap使用简单,下载npminstall@hellowuxin/mindmap使用地址:https://github.com/hellowexin...3.nprogressStar22.1k提升用户体验的好工具,页面进度条加载,页面时使用NProgressjumps顶部会出现进度条,支持自定义配置颜色大小简单安装npminstallNProgressmain.jsimportNProgressfrom'nprogress';router.beforeEach((to,from,next)=>{NProgress.start();next()});router.afterEach(transition=>{NProgress.done();});地址:https://github.com/rstacruz/n...4.vConsoleStar12.4k移动端调试是一件很棘手的事情,你永远不知道在真机上会发生什么惊喜,你还在用alert调试mobile吗?但如果你有vConsole,这一切都将是小菜一碟ViewelementsViewLog,System,Network,Element,Storage就是这么简单简单使用https://github.com/Tencent/vC...VScode1.DIY代码片段通常我们会使用一些模板工具来方便生成代码片段我的代码片段你需要修改前缀名{"Printtoconsole":{"prefix":"yjh","body":["","","","","","//@importurl($3);importPubliccssclass","$4",""],"description":"Logoutputtoconsole"}}保存后可以使用模板快捷方式名生成模板2.图片预览有时是在我们的狮山代码中不容易找到图片,我们可以使用ImagePreview插件,它会在行号左边的小槽中显示图片MD预览,hover预览工具在MD1中也有,markdown-niceStar2.7k是主要的必备工具。当您阅读本文时,我使用了markdown-nice。有人问我它有什么优点?Humph支持降价语法。海量主题方便您选择导入导出文件。16级教程教你快速上手DIY主题,自定义自己的风格并实时保存,再也不用担心忘记Ctrl+Shtml源码直接markdown了。支持在线编辑,无需安装编辑器。地址:https://github.com/mdnice/mar...2.excalidrawStar13.7k一款手绘绘图工具(神会),因为发文章做笔记的时候经常需要画画,比如一个项目搭建process,源码功能实现过程需要画图,有的流程图太官方用不了官方的,所以选择自己喜欢的画图工具还是不错的,至少比自带的画图工具好电脑地址:https://github.com/excalidraw...3.GitHubReadmeStatsStar15.8k想让你的GitHub更酷?比如如何制作一张小卡片放在个人主页上?简单操作1.创建一个和自己相同用户名的项目2.创建一个README.md文件下面是一个例子,大家可以根据图片修改[![Mr.Yan的GithubStats](https://github-readme-stats.vercel.app/api?username=CrazyMrYan&count_private=true&show_icons=true&theme=merko&include_all_commits=true)](https://github.com/CrazyMrYan)效果图:地址:https://github.com/anuraghazr...4.gh-pages我们可能经常会写一些笔记或者自己的个人网站,但是我们需要部署静态文件,但是这需要域名,服务器,等一系列的操作,备案等等,老颜怎么可能花钱?有妓女的必须安排相信大家经常会看到别人的博客都是直接使用https://username.github.io/项目名简单操作1、将项目clone到本地gitclonegit@github.com:CrazyMrYan/home.git2。安装依赖npminstall或yarninstall3。打包npmrunbuild或yarnbuild4。打包后,我们需要进入打包后的static文件夹进行初始化cddist&gitinit5。创建分支gitcheckout--orphangh-pages6。把文件放到暂存区gitadd.&gitcommit-m"myproject"7.连接远程仓库gitremoteaddorigingit@github.com:CrazyMrYan/home.git8.推送到刚刚创建的分支gitpushorigingh-提交页面后,可以看到github项目中多了一个分支gh-pages,并且已经部署好了你的静态文件。老严随便做的一个静态文件,访问地址是https://crazymryan.github.io/...