大家好,我是机灵的开源小妹! 今天翻看开源项目,发现一款超好看的开源后台框架 -- Geeker-Admin,用来学习和副业都是很香的。...简介 Geeker-Admin 是基于Vue3.2、TypeScript、Vite2、Pinia、Element-Plus 开发的一套后台管理模板,功能齐全,样式好看。...项目使用 Vue3.2 开发,采用 Vite2 作为项目开发、打包工具,使用比 Vuex 更轻量、简单、易用的 Pinia 替代 。对系统通用功能都做了统一的封装,方便随取随用。...点击数据大屏可以看到很大气的数据图表 其他的就是简单的功能展示 有兴趣的可以访问官方提供的演示地址,或者自行本地启动服务。...总结 怎么样 Geeker-Admin 这个后台模板是不是很好看、很全面,很多场景都可以用的上,而且上手简单,可以作为学习和私活的不错选择
今天推荐两个腾讯开源的前端框架,分别是 wujie(无界)和 Omi。...特性 成本低 主应用使用成本低 子应用适配成本低 速度快 子应用首屏打开速度快 子应用运行速度快 原生隔离 css 样式通过 Web Components 可以做到严格的原生隔离 js 运行在 iframe.../Tencent/wujie Omi Omi 是一个前端跨框架跨平台框架。...特性 跨框架,任何框架可以使用 Omi 自定义元素 提供桌面、移动和小程序整体解决方案 小巧的尺寸和高性能 基于 Shadow/Light Dom 设计 符合浏览器的发展趋势以及 API 设计理念 Web...,Omi 既使用了虚拟 DOM,也是使用真实 Shadow DOM,让视图更新更准确更迅速 局部 CSS 最佳解决方案(Shadow DOM),社区为局部 CSS 折腾了不少框架和库(使用 js 或 json
本文编程笔记首发 <html> <head> <style type="text/css"> * {margin:0px; padiing:0px;} .lo...
本文编程笔记首发 在网站需要显示的页面添加上代码即可 <!
今天给大家分享一个用原生JS实现的好看计数器,效果如下: 以下是代码实现,欢迎大家复制粘贴和收藏。 原生JS...实现一个好看计数器 * { font-family: '微软雅黑', sans-serif; box-sizing
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id="div1" sty...
好看的按钮 .btn { BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid...="this.className='btn1_mouseout'" title="好看的按钮">好看的按钮 <button class=btn1_mouseout...onmouseover="this.className='btn1_mouseover'" onmouseout="this.className='btn1_mouseout'" DISABLED>好看的按钮... 好看的按钮">好看的按钮 好看的按钮 好看的按钮">好看的
好看的动态时钟,觉得挺好看的,可自行修改时间颜色,需要的可自行添加美化自己博客!...使用教程 下载JS文件上传至服务器根目录下 如果是wordpress,将下面代码复制至外观→小工具→自定义HTML文本中 像我这种typecho的或者其他的博客系统,自行放在合适的位置即可,颜色参考点我选择...canvas" style="width:100%;" height="250">js
所以,是的,我们需要时不时的回来对掌握的知识梳理归类,以备不时之需。 一、前端框架库: 1....是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。...移动Web太需要一个跨浏览器的框架,让开发人员开发出真正的移动Web网站。 用途:jQuery Mobile 是创建移动 web 应用程序的框架。...相比其它的 MVVM 框架,Vue.js 更容易上手。...Ionic 地址:http://www.ionic.wang/js_doc-index.html 描述:Ionic既是一个CSS框架也是一个Javascript UI库。
有一款非常不错的后台管理框架了解一下。 这个开源框架叫:Geeker-Admin。...它是基于 Vue3.2、TypeScript、Vite2、Pinia、Element-Plus 开发的一套后台管理模板。...目前这个开源的后台管理框架的功能如下: 使用 Vue3.2 开发(单文件组件<script setup>) 采用 vite2 作为项目开发工具(配置了 Gzip 打包、图片压缩、跨域代理、打包预览工具...完全是为了想学习 ) 使用 pinia 替代 Vuex,轻量、简单、易用(香啊~) 使用 TypeScript 对 Axios 整个二次封装 (全局错误拦截、常用请求封装、重复请求取消……) 对表格的所有操作基本都封装成了...进行路由权限拦截、按钮权限设置 使用 keep-alive 对整个页面进行缓存,支持多级嵌套页面(路由里可配置) 常用自定义指令开发(复制、水印、拖拽、节流、防抖、长按……) 具体介绍,我就不多说了,直接看预览的效果图吧
prettier 的优势也很明显,它支持 HTML/JS/JSX/TS/JSON/CSS/SCSS/LESS/VUE 等主流文件格式。...你没法使用类似格式化html/css/js的方式来格式化vue格式的代码,像下面这样子的: { "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode.../xxx.js 当然,默认的配置规则是不符合我们的需求的,我们需要自定义配置规则。...toml格式的时候,后缀是必须的) prettier.config.js 或者 .prettierrc.js,需要返回一个对象 package.json 文件中加上"prettier"属性 每种文件的书写格式如下...{ts,js,css,json}' 我们一般使用这种方式的时候,就把这个配置文件写在项目根路径下,然后使用命令行一次性格式化项目下的所有文件。
Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架,为 Web 和移动应用程序提供一组强大的功能,目前 Express 一家独大,是基于 Node.js平台,快速、开放...Next.js中文站Github https://github.com/raoenhui/next-site-cn Next.js 是一个轻量级的 React 服务端渲染应用框架,Next.js 想学的人比较多...3:Koa 基于 Node.js 平台的下一代 web 开发框架 :https://koa.bootcss.com/ Koa 是一个新的 web 框架,由 Express 幕后的原班人马打造, 通过利用...Express是 Node.js 社区广泛使用的框架,简单且扩展性强,非常适合做个人项目。...是一款面向未来开发的 Node.js 框架,整合了大量的项目最佳实践,让企业级开发变得如此简单、高效。
也因为它响应快,易于扩展等特点,也是实战开发的首选。开发人员之所以喜欢Node.js,是因为其将脚本语言(JavaScript)的易用性和有着各种框架可供选择的Unix网络编程的强大功能相结合了。...这意味着Node.js可移植,所以,应用程序能够支持广泛的用户受众。 5、单线程:Node.js在不新增额外线程的情况下,依然可以对任务进行并行处理——Node.js是单线程的。...流行的开源Node.js框架 针对现在开源比较流行的几大框架做一个简单的介绍,并不深究。...Express Express是基于Node.js平台快速、开放、极简的web开发框架。Express是最重要的节点框架之一,是构建Web/移动应用程序和API的理想选择。...,并进一步促进大前端的发展和快速移动框架的发展。
简介 Vanilla JS团队维护每个字节的代码框架,每天努力工作,以确保它是小的和直观的。使用Vanilla JS是谁?很高兴你发问!...事实上,Vanilla JS的使用量已经远远超过了jQuery, Prototype JS, MooTools, YUI 和 Google Web Toolkit 的总和。...javascript 框架,浏览器向站点发送请求前就已经把Vanilla JS加载在浏览器里了。...使用Vanilla JS只需在应用的HTML里加入这行: js"> 当你部署你的应用的时候,使用这个更快的方法: 没错!...性能比较 根据ID获取DOM元素 框架 代码 次数/秒 Vanilla JS document.getElementById('test-table'); 12,137,211 Dojo dojo.byId
一、什么是Express Express基于Node.js封装的,快速、开放、极简的 Node.js Web 开发框架。...Node.js,因为Express基于Node.js,所以电脑里面得安装有Node.js,下面是Node.js下载网址 英文网址:https://nodejs.org/en/ 中文网址:http:/...最后使用命令node app.js运行应用程序,然后浏览器输入地址localhost:3000即可访问,或者127.0.0.1:3000。下图为输出Hello World!...示意图 node app.js ?...image.png 五、Express中间件 Express 是一个路由和中间件 Web 框架,其自身只具有最低程度的功能:Express 应用程序基本上是一系列中间件函数调用 中间件函数能够访问请求对象
AVM(Application-View-Model)是APICloud推出的一个跨端的高性能 JavaScript框架,更趋近于原生的编程体验,它提供简洁的模型来分离应用的用户界面、业务逻辑和数据模型...在大前端技术领域,当我们遇到了需要解决重复性的问题时,通常会考虑设计一个DSL(Domain-Specific Language)或者抽象出一个框架层,专门来解决这些类似的问题。...AVM(Application-View-Model)是APICloud基于标准H5子集设计的DSL中间语言编程框架,提供包含虚拟DOM和Runtime的编程框架avm.js以及多端统一编译工具,完全兼容...Avm核心库只关注终端差异、虚拟DOM、组件化和数据绑定,与其他重量级框架不同的是,Avm不需要太多的外部依赖,仅需要组件化、数据驱动等更现代化框架的能力。其可具备如下能力: 1....APICloud DSL使用Vue方式定义组件或页面: Avm.js跨端框架的优势配图1.png APICloud DSL使用兼容React JSX方式定义组件或页面: Avm.js跨端框架的优势配图2
0919自我总结 常见的鼠标hover效果 展示效果:http://ianlunn.github.io/Hover/ 部分动画制作 <!...curl-bottom-left:hover:before { width: 15px; height: 15px; } --> 对于的效果都以备注...使用 拿pulse为例子 导入上述的方法 全是再样式中操作 @keyframes pulse { 25% { transform: scale(1.1); }...animation-name: pulse; #方法名称 animation-duration: 1s; #方法时间 animation-timing-function: linear; #从开头到结尾以相同的速度来播放动画...animation-iteration-count: infinite; #动画的次数 } 参考文档'https://www.w3school.com.cn/cssref/index.asp#
在上周的[[3.0 颜色选择]]当中,提到了几个用来选择颜色的工具。这里我们就对这些工具进行一下简单的介绍。...色轮 在这个色轮当中,可以基于自己的目的来选择合适的颜色。同时在工具的左侧有一个颜色选择的分类。我们可以先选择想要颜色的颜色分类。然后再转动色轮即可。 2....DESIGN SEEDS DESIGN SEEDS (https://www.design-seeds.com/) 是一个通过现实生活中的照片来提取的一些好看的配色。...在这个网站里面,一些好看的照片提取的配色。...在 COOLRS 可以生成随机的配色方案,同时也可以查看之前一些好看的配色方案 点击网页上的 Explore 可以查看一些定义好的配色方案 在每一个配色方案当中,可以查看具体的颜色代码。
网页安全色有216中,但支持颜色名称作为颜色值的只有16种,分别是aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive,...然而这16种Web自带的标准色看上去是极为「老土」的,几乎没有设计师愿意去使用,在这里为大家分享16 种更好看的 WEB 默认标准色:colors.css,颜色变好看了,而且已有写好的 CSS 样式文件...老的web标准色值: 通过以上两组对比,可以看出colors.css的颜色值更适合现时的 WEB UI 设计。 样式表中除了有文字颜色值外,还有已写好的背景色和边框色。...SVG 填充 SVG Strockes 网站中还有PS用的.aco和AI用的 .ase文件,喜欢的可以到官方网站上下载。...网站名称:Colors.css Related Posts 白嫖SSL证书部署(结合宝塔)SSL证书是数字证书的一种,类似于驾驶证、护照和营业执照的电子副本。
领取专属 10元无门槛券
手把手带您无忧上云