首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

15 个有意思的 JavaScript 和 CSS 库推荐! 你用过几个?

该库可以在浏览器中工作,也可以在node.js环境中工作。 Jarvis ? 一款基于Webpack仪表板的智能浏览器,它可以给你显示你在webpack构建所需的所有重要信息。...它向你展示了你的资源在12种不同的连接类型中的表现如何,你项目中所有包的大小,并拥有一个漂亮的错误输出。它仍处于beta版本,预计会增加许多新功能。 Toast UI编辑器 ?...它提供了渲染后HTML的实时预览,即时语法错误检查以及markdown和预览模式之间的同步滚动。该编辑器还支持强大的扩展,如颜色选择器、图表代码块、UML代码块等。 Micron.js ?...使用SweetAlert2 你可以创建各种不同的拥有惊艳的风格、显示效果和动画的弹出框。 Rekit ?...Kutt是一个免费的可以用来缩短你的URL、管理链接和设置自定义域的开源库。它有一个易于使用的API,并允许你创建和删除URL,以及使用详细统计信息跟踪它们。

2K00

最好用的 6 款 Vue 实时消息提示通知(MessageNotification)组件推荐与测评

原生 JavaScript  提供了 alert、prompt、confirm 等方法,这三个方法的不支持定制化,使用场景严重受限,特别是 alert 在浏览器外弹窗,体验非常糟糕。...我自己在开发和研究 Message / Notification 功能组件时,发现其实 Github 上有非常多开源的制作精良,使用场景定位清晰的第三方消息提示组件库可用,社区成熟,代码简洁,直接引用即可...Github 高达 15k star 很说明他的使用者之众。JS 写成的提示弹窗组件,没有任何依赖,最近刚刚升级现已支持 Vue 3。...,他的优势是包含消失进度条和消息提示按键,进度条让用户了解消息提示的消失时间,加进度条的意义是 vue-toastification 包含可自定义的按钮,让用户在可预见的时间内与按钮交互。...vue-toast-notification 不提供花哨的进度条等功能,专注在消息提示,用完即走的路数,只想用户展示提示,然后消失。多种可自定义的属性,还超级轻,是基础功能款爱好者的好选择。

5.9K40
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    vue项目创建步骤 和 路由router知识点

    历史模式或 hash 模式,在 IE9 中自动降级 自定义的滚动条行为 为了加深对路由的理解,在安装vue-router包后,如果项目自动生成了router.js, 先删除,我们手动来写一个router.js...,hash模式有#;另外还有一种history模式,没有#符号 routes }) main.js是vue项目的入口脚本,在这里引入router.js, 传入路由配置。...这个name就是在router.js中配置的那个name, 这个name也是有大用处的,比如在中使用“命名路由”的时候就是用到它,举例说明,通过在路由链接标签的to属性设置name...next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。 next(false): 中断当前的导航。...3.2 全局解析守卫: router.beforeResolve  ,这和 router.beforeEach 类似,区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用

    2K40

    Vue2.0 项目实战篇-学不会算我的

    是否保存预设,下次直接使用> 不保存,输入 N 图片 初始化项目文件目录: ,上述使用Vue-cli简单的构建了项目结构,但还单单不满足一个项目的需求,让我们稍稍的修改⚒️: 删除一些不需要的初始化目录...,因此不推荐这种做法; 按需导入: 按需导入只会导入你使用的组件,进而节约了资源; Vant 全部导入: 全部导入: 通常采用全局导入形式,在main.JS 中定义,这样就可以在项目的任意位置,直接使用...yarn add postcss-px-to-viewport --dev #yarn 安装 配置PostCSS: 在项目的构建配置文件中:webpack、vue.config.js、postcss.config.js...代码管理: 本代码已经使用Git进行管理: 公众号回复:Vue项目工程化 关于Git 版本管理切换可能出现的问题: 代码管理,有时候在操作过程误操作,可能会导致:找不到分支、代码丢失... git...,确认没有需要恢复的数据; #删除other和commit目录下的所有文件 rm -rf commit/* rm -rf other/* #清理Git数据库: 虽然上述步骤已经删除了文件,但Git的对象数据库中可能还保留着引用计数为

    66010

    Week28-脚手架发布模块架构设计和核心流程开发

    中重新配置(在publish之前加空格) 最后在一个空目录中输入以下命令进行调试: cloudscope-cli publish --targetPath /Users/liumingzhou/Documents...Order.vue | src/pages/My.vue 新建src/router.js 并在main.js中引入,app.use(router) 在App.vue中使用和 // src/router.js...说明:我们在dev模式下启动项目:npm run serve,在scripts中serve,实际执行的命令是 vue-cli-service serve,这个时候我们调试源码就在node_modules...在vscode的router.js中添加debugger调试,没起作用,因此,该源码的调试是在webstorm中debug的。...在进一步看源码之前,我们先来写个demo看 如何使用纯js方式编写组件。 h 函数包含的三个参数为:dom标签、dom中需要绑定的一些属性、dom当中的children。

    1.2K40

    深入探索 Vue 路由

    下面深入了解 Vue Router 的更多细节。 以编程方式更改路由 在前面的示例中,我们使用 在不同的路线之间导航。...处理动态路由 你可以把 URL 模式与组件进行匹配,而不必对每个可能的路径进行硬编码。这对于配置文章页面、个人资料页面和其他可以动态创建或删除的内容非常有用。...但是一旦可以访问组件内部的 prop 时,就可以使用它进行任何操作。 导航守护简介 导航守护是 Vue Router 中更高级的内容之一。它们是路由过程中的 Hook,可让你重定向、取消或修改导航。...更具体地说,我们可以在组件的 options 对象中插入导航守护,总共有三种: beforeRouteEnter (to, from, next):在确认此路由之前调用;该组件尚未创建。...beforeRouteLeave(to, from, next):当离开这个组件时被调用 需要注意的是,在确认导航之前和实际创建组件之前,将会调用 beforeRouteEnter。

    88030

    干货 | van+mpvue开发微信小程序入门

    mpvue 是一个使用 Vue.js 开发小程序的前端框架。...框架基于 Vue.js 核心, mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验...此时,在微信开发者工具中及手机开启调试模式时,不会进行服务器域名的校验。 在服务器域名配置成功后,建议开发者关闭此选项进行开发,并在各平台下进行测试,以确认服务器域名配置正确。...如果手机上出现 “打开调试模式可以发出请求,关闭调试模式无法发出请求” 的现象,请确认是否跳过了域名校验,并确认服务器域名和证书配置是否正确。...usingComponents全局引入van组件不起效果 ** 2020-03-02: **使用mpvue搭建的项目,在app.json中,全局引入 van 组件不生效,其实和有赞的组件没有关系,是因为我电脑上的开发者工具很早之前就安装了

    2.1K40

    【项目实战】SpringBoot+vue+iview打造一个极简个人博客系统

    框架iview^4.0.2一套基于 Vue.js 的高质量UI 组件库vue-router^3.0.6为 Vue.js 提供富有表现力、可配置的、方便的路由vuex^3.2.0一个专为 Vue.js...应用程序开发的状态管理模式 + 库vue-color^2.8.1颜色选择器插件moment^2.29.4js工具库axios^1.3.2一个基于promise的网络请求库core-js^3.27.2JavaScript...的模块化标准库mavon-editor^2.10.4基于 Vue 的 Markdown 编辑器组件代码结构图后端代码前端代码️快速启动启动前端在blog-web项目目录下下载依赖npm install...或者 cnpm install undefined依赖下载成功后,在blog-web项目目录下启动项目npm run serve启动成功图片启动后端开发工具内配置好,并将maven配置好,建议使用阿里云镜像选择激活对应的环境...,如本地则可使用dev将blog-boot根路径下的/db/db_blog.sql进行本地执行,并在application配置文件中修改数据库配置图片运行启动SpringBoot项目,如见到以下日志即为启动成功图片体验总结本篇文章以实战项目形式进行展开

    17910

    使用vue互联QQ音乐完成网站音乐播放器

    开源音乐播放器 2-2、MetingJS插件 3、将上述开源插件整合至Vue项目中 3-1、引入上述差距对应js文件 3-2、在App.vue内使用Meting.js 3-3、启动项目!...这里大家可以根据自身情况来进行选择使用那个版本的vue(上下键进行选项的切换,空格确认) 我这里选择自定义配置(后面浅蓝色字体为选择项,大家可进行参考) 项目创建成功!...(那么大家可能会发问了,这两款插件在npm仓库中存在,为什么不使用npm进行拉取,而使用在线js? 当然都是可以的,只不过使用js会更加简单一些) 在App.vue内使用Meting.js 我们首先删除多余的内容,还App.vue一片清净。...3-3-1、在控制台输入命令启动vue项目 在 Terminal 中输入 npm run serve 命令即可启动项目 3-3-2、通过package.js启动项目 进入到Package.json

    2.8K40

    如何充分利用Composition API对Vue3项目进行代码抽离

    本文代码略多,希望大家耐心观看 背景介绍 在2020年,Vue3的学习一直被我鸽到了11月份,在学完以后,我自己做了一个Vue3的小项目nav-url,也整理了我对于如何快速上手Vue3的几篇博客...,很高兴受到了大家的指点和喜欢: 自己设计的Vue3的实用项目(内含对项目亮点的实现思路与介绍)(237+ 个?)...很明显,我是做了一个弹窗组件,当点击侧边栏中的 + 号后,弹窗显示;然后我输入了想要新增标签的名称,并且选择了合适的图标,最后点击了确认,于是一个标签就添加好了,弹窗也随之隐藏; 最后我又去编辑模式下点击修改标签...再继续看我上面举的我项目中标签页功能的例子吧,用于存储标签弹框展示状态的变量isShow是在某个组件中定义的,同时标签组件也需要获取这个变量来控制展示的状态,这之间用到了父子组件通信,那么我们不妨把这个变量写在一个公共的文件中...我在闲暇之余给我的项目加上了编辑模式下的 拖拽排列功能 ,也算是完成了之前大家对我提的建议之一啦,欢迎各位前去体验新功能~ 项目体验链接 在体验完后,希望有心的小伙伴们能在github上给我提提Issues

    1.8K20

    Vue中使用装饰器,我是认真的

    ❞ 作为一个曾经的Java coder, 当我第一次看到js里面的装饰器(Decorator)的时候,就马上想到了Java中的注解,当然在实际原理和功能上面,Java的注解和js的装饰器还是有很大差别的...debounce和log两个函数,本质上是两个包装函数,通过这两个函数对原函数的包装,使原函数的行为发生了变化,而js中的装饰器的原理就是这样的,我们使用装饰器对上面的代码进行改造 class MyClass...在实现装饰器之前,我们需要先了解一下属性描述符 了解一下属性描述符 在我们定义一个对象里面的属性的时候,其实这个属性上面是有许多属性描述符的,这些描述符标明了这个属性能不能修改,能不能枚举,能不能删除等等...配置基础环境 除了一些老的项目,我们现在一般新建Vue项目的时候,都会选择使用脚手架vue-cli3/4来新建,这时候新建的项目已经默认支持了装饰器,不需要再配置太多额外的东西,如果你的项目使用了eslint...装饰器组合使用 在上面我们将类属性上面使用装饰器的时候,说道装饰器可以组合使用,在Vue组件上面使用也是一样的,比如我们希望在确认删除之后,调用接口时候出现loading,就可以这样写(一定要注意顺序)

    1.2K20

    如何充分利用Composition API对Vue3项目进行代码抽离

    本文代码略多,希望大家耐心观看 背景介绍 在2020年,Vue3的学习一直被我鸽到了11月份,在学完以后,我自己做了一个Vue3的小项目nav-url,也整理了我对于如何快速上手Vue3的几篇博客...,很高兴受到了大家的指点和喜欢: 自己设计的Vue3的实用项目(内含对项目亮点的实现思路与介绍)(237+ 个????)...很明显,我是做了一个弹窗组件,当点击侧边栏中的 + 号后,弹窗显示;然后我输入了想要新增标签的名称,并且选择了合适的图标,最后点击了确认,于是一个标签就添加好了,弹窗也随之隐藏; 最后我又去编辑模式下点击修改标签...再继续看我上面举的我项目中标签页功能的例子吧,用于存储标签弹框展示状态的变量isShow是在某个组件中定义的,同时标签组件也需要获取这个变量来控制展示的状态,这之间用到了父子组件通信,那么我们不妨把这个变量写在一个公共的文件中...我在闲暇之余给我的项目加上了编辑模式下的 拖拽排列功能 ,也算是完成了之前大家对我提的建议之一啦,欢迎各位前去体验新功能~ 项目体验链接 在体验完后,希望有心的小伙伴们能在github上给我提提Issues

    2.7K30

    如何规范开发一个vue项目

    提升开发者技能: 学习和遵循编程规范可以帮助开发者提升他们的编程技能,并使他们更加熟悉行业内的最佳实践 二、使用 vue-cli 创建项目并配置 1、如何新建一个Vue3项目 在桌面新建一个Vue3项目...Router (Vue Router) Vue Router 是 Vue.js 官方的路由管理器。 Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。...“history模式”为Vue Router 通常选择n并使用默认的"hash模式" ?...# 构建项目的生产版本 npm run build 下面是常用命令,小提示更换一些依赖有时需要删除node_modules文件夹,在项目中普通删除需要提示确认命令获取权限,可以自己使用强制删除命令 rm...代码审查 在提交代码之前,进行代码审查可以确保代码的质量和一致性。 代码审查有助于发现潜在的问题和bug,并提供有价值的反馈和建议 处理合并冲突 在团队协作中,合并冲突是常见的情况。

    17510

    Vue3学习笔记(一)——MVC与vue3概要、模板、数据绑定与综合示例

    查看版本显示版本号则表示正常安装了node.js 1.6.2、安装Vue-cli 如果之前安装过Vue2,需要把Vue2卸载。...1.6.4、运行项目 使用cd命令进入项目,然后运行 在浏览器中输入http://localhost:8080查看 1.6.5、使用图形化界面创建项目 你也可以通过 vue ui 命令以图形化界面创建和管理项目...文件使用 Vue 在浏览器端直接访问:https://unpkg.com/vue@3/dist/vue.global.js 新建一个vue3.js文件,将内容复制到文件中  在代码中引用vue3.js...Devtools 当使用 Vue 时,我们推荐同时在你的浏览器上安装 Vue Devtools,它允许你在一个更加友善的界面中审查和调试你的 Vue 应用。...插件会自动检测当前是否使用了vue,如果使用了图标会亮起,在开发者工具中有一个调试界面: 六、作业 a)、请实现一个购物车 1、双向绑定集合中的数据 2、执行移除事件 3、隔行换色、使用vue2完成

    3.9K20

    【Vue.js——功能实现】时间管理大师(蓝桥杯真题-1844)【合集】

    背景介绍 时间管理永远都是提升工作和学习效率的必备法门,你在平时的工作学习中是否也有做计划和管理计划的习惯呢? 本题需要在已提供的基础项目中使用 Vue.js 知识实现一个简易的任务管理器。...└── vue.js # 版本为 2.x 的 Vue.js 框架 源码下载后,选中 index.html 右键启动 Web Server 服务(Open with Live Server),让项目运行起来...考试要求 请在 index.html 文件中使用默认提供的 DOM 结构(即基础项目提供的 DOM 结构和指定 id 不能改变),使用 Vue 2.x 语法实现任务管理器功能。...输入框区域包含一个 span 元素作为输入提示,一个 input 元素,其使用了 Vue 的 v-model 指令绑定了 newTodo 数据,用户输入的内容会实时存储在 newTodo 中。...加载 css/style.css 文件,根据其中的样式规则对页面元素进行初始样式设置。 加载 js/vue.js 文件,这是 Vue 框架的核心库,为页面的动态交互提供支持。

    5410

    又一个跨端框架来了! 腾讯开源内部跨端统一开发框架:Hippy!

    特征 Hippy 实现了类似 Flutter 的引擎直通架构(在 React Native 中的 Fabric 架构),通过 C++ 开发的模块直接插入 JS 引擎中运行,绕过了前终端通讯编解码的开销,...框架层既可以使用 React 也可以使用 Vue,或者未来的新兴框架。引擎层可以使用 JS,将来也支持 Dart,Lua 等语言。...│ └── hippy-vue-router # 在 hippy-vue 中运行的 vue-router。...Windows 用户受条件所限,暂时无法进行 iOS app 开发 编译出你的 Hippy app 使用 hippy-react or hippy-vue 范例项目来启动 iOS 模拟器 我们推荐 iOS...用 USB 数据线插上你的 Android 手机,需要确认手机打开 USB 调试模式和 USB 安装。 运行工程,并安装 apk。。。

    3.1K10

    后台数据管理系统 - 项目架构设计【黑马程序员】

    和 图片文件,复制到 assets 文件夹中, 并将全局样式在main.js中引入 import '@/assets/main.scss' 安装 sass 依赖 pnpm add sass -D VueRouter4...main.js 中,仓库代码在 stores 中,代码分散职能不单一 - 优化:由 stores 统一维护,在 stores/index.js 中完成 pinia 初始化,交付 main.js 使用 仓库...创建 axios 实例 们会使用 axios 来请求后端接口, 一般都会对 axios 进行一些配置 (比如: 配置基础地址等) 一般项目开发中, 都会对 axios 进行基本的二次封装, 单独封装到一个模块中...】 通过观察, 点击左侧导航, 右侧区域在切换, 那右侧区域内容一直在变, 那这个地方就是一个路由的出口 我们需要搭建嵌套路由 目标: 把项目中所有用到的组件及路由表, 约定下来 约定路由规则 path...: '' } }) 登录前的预校验 & 登录成功 【需求说明1】登录之前的预校验 登录请求之前,需要对用户的输入内容,进行校验 校验通过才发送请求 【需求说明2】登录功能 封装登录API,点击按钮发送登录请求

    1.2K10

    【毕业项目】基于VUE开发的电商后台管理系统

    与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,方便与第三方库或既有项目整合。...客户端:基于node.js平台开发,使用vue.js框架以及Element-ui组件库。服务端:解析所有客户端发送来的请求。...用户在客户端程序向服务器发送请求,服务器通过对客户端发起的请求进行处理并对数据库进行操作,再将操作结果返回到客户端。...4.2 功能模块 登录模块 登录:当文本框失去焦点后,会进行验证处理,提示用户格式输错获取文本框没有输入内容,并且在登录之前,会对用户输入的账号密码先进行预处理,如果不通过则登录失败 重置:会对账号及密码文本框清空...参考文献 【1】Vue.js-黑马19年8月最新版—前端 -webpack-vuecli-vue-vuejs 【2】从三大方面对电商后台管理系统进行了整体的介绍 【3】【毕业设计】基于Vue.js画作交流平台的设计与实现

    1.9K10
    领券