草庐IT

vue+elementui

全部标签

玩转Vue3之Composables

前言Composables称之为可组合项,熟悉react的同学喜欢称之为hooks,由于可组合项的存在,Vue3中的组件之间共享状态比以往任何时候都更容易。这种新范例引入了一种更有组织性和可扩展性的方式来管理整个应用程序的状态和逻辑。什么是Composables本质上,可组合项是一种模式而不是特定的功能。它是通过一个简单的函数来实现的,该函数可以保存状态和可重用的代码。总的来说:可组合项是可重用的有状态函数。它们可用于在组件之间共享响应式状态和逻辑。如何定义下面通过一段代码看看什么是可组合项:import{ref}from'vue';//定义可组合项需以use开头比如useXXXexportf

2024年最受欢迎的Vue.js组件库 - ViewDesign全面解析

引言作为现代Web开发不可或缺的一员,Vue.js以其轻量、高效、渐进式的理念备受开发者青睐。而在Vue.js生态系统中,第三方组件库则扮演着桥梁的角色,为开发者提供可复用的UI组件,从而极大提高了开发效率。在2024年,有许多优秀的Vue组件库脱颖而出,但毫无疑问,ViewDesign因其卓越的设计理念和强大的功能,成为了最受欢迎的选择之一。ViewDesign-现代化设计与强大功能的完美结合ViewDesign(www.iviewui.com)是一款基于Vue.js的开源UI组件库,由国内知名的前端团队精心打造和维护。它以现代化、平面化的设计理念为核心,为开发者提供了一系列高质量、可定制的

玩转Vue3之shallowRef和shallowReactive

前言Vue3作为一款现代的JavaScript框架,引入了许多新的特性和改进,其中包括shallowRef和shallowReactive。这两个功能在Vue3中提供了更加灵活和高效的状态管理选项,尤其适用于大型和复杂的应用程序。Vue3的响应式系统Vue3引入了新的响应式系统,与Vue2相比,它具有更好的性能和更多的功能。这个新系统基于Proxy,为开发者提供了更直观、灵活的API,其中包括ref、reactive、shallowRef和shallowReactive等。之前的文章写过有关响应式系统的解释,在本博客中,我们将深入探讨这两个API,并提供一些具体的例子,以便更好地理解它们的用法

【前端系列】vue

这里写目录标题一、Vue简介1.1主流前端框架/库简介二、下载和安装Vue2.1下载2.2安装完成后,检查2.3创建全局安装目录和缓存日志目录2.4为了下载包快速,改源为淘宝镜像2.5查看npm配置修改是否成功三、配置环境变量环境变量—用户变量—选中Path—点编辑环境变量—系统变量—新建四安装vue4.1安装vue4.2安装webpack模板安装脚手架vue-cli如果安装新版本vue,先卸载旧版本:五、创建一个vue项目一、Vue简介Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层,并且非常容易学习,非常容易

Element UI +Vue页面生成二维码的方法

目录一、方法一采用qrcodejs2生成1.1、安装二维码插件qrcodejs21.2、在vue文件中,引入生成二维码插件1.3、构建二维码对象qrCodeDiv一、方法二-采用qrcode生成2.1、安装qrcode2.2、页面引入2.3、方法里边使用2.4、options三、方法三vue-qr3.1、安装3.2、页面引入3.3、组件增加vue-qr3.4、template使用3.5、options一、方法一采用qrcodejs2生成1.1、安装二维码插件qrcodejs2//在终端输入npm命令,安装二维码插件npminstallqrcodejs2--save1.2、在vue文件中,引入生

前端Vue篇之说一下Vue的生命周期、一般在哪个生命周期请求异步数据、created和mounted的区别

目录说一下Vue的生命周期一般在哪个生命周期请求异步数据created和mounted的区别说一下Vue的生命周期Vue.js组件的生命周期包括创建、挂载、更新和销毁等阶段,这些阶段都对应着一系列的钩子函数,开发者可以在这些钩子函数中执行相应的操作。以下是Vue.js组件的生命周期:创建阶段:beforeCreate:在实例初始化之后,数据观测(dataobserver)和事件配置(event/watchersetup)之前被调用。created:实例已经创建完成,完成了数据观测(dataobserver),属性和方法的运算,初始化事件,但挂载阶段还没开始。常用于异步请求数据的获取。挂载阶段:

【前端部署】Ubuntu22.04 使用nginx部署vue前端项目教程

一.ubuntu安装nginx1.更新本地软件包列表sudoaptupdate2.安装nginxsudoaptinstallnginx3.验证nginx是否安装成功sudosystemctlstatusnginx如果Nginx正在运行,则命令输出应该显示Active(active(running))状态。4.若nginx未运行,则输入命令进行启动sudoservicenginxstart5.查看nginx版本信息nginx-V6.浏览器输入ubuntu所在服务器的ip地址当我们看到如图所示,即说明nginx安装成功!二.vue项目代码打包方式一:在vscode的终端输入npmrunbuild方

基于小程序的奶茶点餐小程序+springboot+vue.js附带文章和源代码设计说明文档ppt

文章目录前言详细视频演示具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaits系统测试系统测试目的系统功能测试系统测试结论为什么选择我代码参考数据库参考源码获取前言🌞博主介绍:✌CSDN特邀作者、985计算机专业毕业、某互联网大厂高级全栈开发程序员、码云/掘金/华为云/阿里云/InfoQ/StackOverflow/github等平台优质作者、专注于Java、小程序、前端、python等技术领域和毕业项目实战,以及程序定制化开发、全栈讲解、就业辅导、面试辅导、简历修改。✌🌞👇🏻精彩专栏推荐订阅👇🏻2023-2024年最值得选的微信小程序毕业设计选题大全:100个热

仓储管理系统(WMS)研发历程-文件上传添加AliyunOSS+VUE前端直接上传

前言由于WMS有很多上传文件的需求,所以这里为了减轻服务器压力选择使用aliyunoss,并且前段直接上传到aliyun进一步减少服务器的压力,因为文件到了服务器会占用带宽,而带宽是生产过程中极其重要的资源之一。首先这里是先安装实战安装命令npminstallali-oss--save显示如下内容则安装表示成功!!!npmWARNdeprecatedconsolidate@0.15.1:Pleaseupgradetoconsolidatev1.0.0+asithasbeenmodernizedwithseverallong-awaitedfixesimplemented.Maintenance

vol-vue框架Cascader 组件多级联动(前端部分)

vol框架官方链接:vol-vue(volcore.xyz);vol框架基于element组件库以及iview组件库进行封装的。vol框架中的Cascader是基于iview组件库中的iview封装的,详细看下方的官方文档。iview官方链接:级联选择器-ViewDesign(iviewui.com)需求:联动的时候有二级数据的时候一级数据不可以选中,但是可以选中一级后面的数据(二级三级甚至更后面的),但是一级下面没有二级数据的话,就可以选中一级的数据。在iview中的cascader组件中封装了一个方法,change-on-select这个方法的值为布尔类型的,为true的时候可以设置为不管