vue3工程化第32页

使用宝塔面板部署Node.js+Mysql服务和Vue3-Admin项目到云服务器上

准备工作一台云服务器，可以先用免费试用一个月的服务器进行练手；我这里选择的是腾讯云的轻量云服务器；1、在云服务器上安装宝塔面板宝塔面板官网地址：https://www.kancloud.cn/chudong/bt2017/4242091.1安装Xshell脚本工具，通过这个工具来连接云服务器，进行宝塔面板的安装根据云服务器的系统选择对应的命令进行安装安装步骤参考：https://blog.csdn

wen_文文·2024-01-26 08:50

vue3 + antd 封装动态表单组件（二）

传送带：vue3+antd封装动态表单组件（一）前置条件：vue版本v3.3.11ant-design-vue版本v4.1.1vue3+antd封装动态表单组件（一）是基础版本，但是并不好用，因为需要配置很多表单项的

guizi0809·2024-01-26 08:16

vue3.0+ts优化SEO问题~这个坑卡了我好久

博客写完了，到了要上线时候才想起来要优化不优化的话不利于爬虫的抓取这样就没办法排名靠前啊~~可是优化这方面我又不懂，就简单的了解一下。渲染主要分（CSR）客户端跟（SSR）服务端。可是vue就是CSR，检查源代码并没有东西，这可不行啊这不利于爬虫。然后一个下午各种百度，发现了有SSR渲染和预渲染都可以做到生成一个静态HTML，这传统的html静态页面就对爬虫很有利，反正我需要渲染的页面不多就首页跟

橙子cms·2024-01-26 07:48

Vue 3 + Vite + SSR

后来我在实际项目中，使用了第三方框架NUXT，总的来说还是这个框架还是不错的，但是在个性化定制方面不好控制，还有一个问题是到目前为止仍未支持vue3。

苦行虚空·2024-01-26 07:47

Vue3+Vite使用Puppeteer进行SEO优化（SSR+Meta）

因为一些功能在Halo上不太好实现，所以又切回了Vue3项目，本文就是对于Vue单页面项目SEO优化的一个简单的完整方案。此次优化的最大好处，就是SSR时对已有的vue项目0侵入，不需

笑小枫·2024-01-26 07:12

使用uniApp+vue3+Vite4+pinia+sass技术栈构建微信小程序

不用再单独去下载HBuilderX.1.基础安装vue3+ts+uniapp方法一：npxdegitdcloudio/uni-preset-vue#vite-tsmy-vue3-project方法二：可以去

你离优秀差多少·2024-01-26 07:18

【Vue3】组件通信

Vue3组件通信和Vue2的区别：移出事件总线，使用mitt代替。vuex换成了pinia。把.sync优化到了v-model里面了。把$listeners所有的东西，合并到$attrs中了。

小秀_heo·2024-01-26 04:57

低代码-添加按钮组件设计

效果图可拆分为以下细节按钮列表支持拖拽排序删除(两个操作需同步删除)点击外侧删除点击复选框删除添加：点击复选框添加示例代码技术栈:vue3+arco.design+ts+less+tailwindcssprops.bindButton.splice

土生土长的IU·2024-01-26 04:26

分析Vue3生命周期

一.什么是生命周期在Vue中，生命周期是组件从创建到销毁的整个过程中的不同阶段。Vue组件的生命周期主要由一系列的钩子函数（hookfunctions）组成。以下是Vue组件生命周期的主要阶段：1.创建阶段：-beforeCreate：在实例被创建之前调用，此时组件的响应式属性和事件还未初始化。-created：在实例创建完成后调用，此时组件的数据已经初始化完成，但DOM还未生成，可以进行一些初始

Zy000428·2024-01-26 03:02

Vue3的优势

Vue3和Vue2之间存在以下主要区别：1.性能优化：Vue3在内部进行了重写和优化，采用了新的响应式系统（Proxy），相较于Vue2中的Object.defineProperty，更具性能优势。

Zy000428·2024-01-26 03:00

vue3 $attrs和inheritAttrs的使用

$attrs属性解释:包含了父作用域中不作为组件props或自定义事件的attribute绑定和事件。当一个组件没有声明任何prop时，这里会包含所有父作用域的绑定，并且可以通过v-bind="$attrs"传入内部组件——这在创建高阶的组件时会非常有用。inheritAttrs属性解释：如果你不希望组件的根元素继承特性，你可以在组件的选项中设置inheritAttrs:false可能不是很好理解

hao_0413·2024-01-26 03:15

Vue3 pinia快速入门

安装脚手架vitenpmcreatevite@latest然后按照提示操作即可！安装状态管理pinianpminstallpinia--save创建Store新建src/store目录并在其下面创建index.js，导出store//src/store/index.jsimport{createPinia}from'pinia'conststore=createPinia()exportdefau

hao_0413·2024-01-26 03:15

Vue3 全局挂载对象和方法

Vue3.x已经不支持直接Vue.prototype.

hao_0413·2024-01-26 03:45

vue3基础之toRefs方法

toRefs方法使用初级用法:在项目中常常会使用解构语法,对需要的数据进行解构,但是在vue3中直接解构的数据是不具有响应式的,所以Vue3提供了toRefs方法专门用来解构出响应式的数据高级用法:将一个响应式对象转换为一个普通对象

 勿忘初心·2024-01-26 02:43

vue3基础之setup中的props和自定义事件

setup中的props接收方法1：使用setup中默认存在的defineProps方法接收propsdefinePorps的参数是一个数组，可以直接接收多个propsdefinePorps的返回值是所有接收的props组成的proxy对象但是这种接收是直接接收，不限制类型方法2：还是使用setup中默认存在的defineProps方法接收propsdefineProps方法接收一个泛型，泛型是一

 勿忘初心·2024-01-26 02:43

vue3基础之watch监听

watch监听基本使用watch是一个函数,需要引入使用,监听多个数据只要多次调用watch函数即可watch第一个参数是监听的数据watch第二个参数是监听后的回调函数,参数为newVal和oldValwatch第三个参数是配置对象,包含immediate和deepwatch监听ref基本类型数据直接监听即可,不用设置deep深度监听watch监听点击增加:{{count}}import{def

 勿忘初心·2024-01-26 02:12

【Vue3】readonly 与 shallowReadonly

readonly作用：用于创建一个对象的深只读副本。用法：constoriginal=reactive({...});constreadOnlyCopy=readonly(original);特点：对象的所有嵌套属性都将变为只读。任何尝试修改这个对象的操作都会被阻止（在开发模式下，还会在控制台中发出警告）。应用场景：创建不可变的状态快照。保护全局状态或配置不被修改。shallowReadonly作

小秀_heo·2024-01-26 02:40

Vue2 + Vue3学习笔记（十一）常用指令 v-model v-text v-html等的总结

首先细数一下已经了解过的v-指令v-bind:单向绑定解析表达式,可简写为:xxxv-model:双向数据绑定v-for:遍历数组/对象/字符串v-on:绑定事件监听,可简写为@v-if:条件渲染（动态控制节点是否存存在）v-else:条件渲染（动态控制节点是否存存在）v-show:条件渲染(动态控制节点是否展示)以及本文中要学习的指令v-textv-htmlv-cloakv-oncev-pre还

yggjdle·2024-01-26 02:39

TypeScript使用@来映射文件路径解决找不到模块“@/xxx”或其相应的类型声明的问题

TypeScript使用@来映射文件路径解决找不到模块“@/xxx”或其相应的类型声明的问题环境：Vue3+Vite+ts想便捷引用自定义模块由于在script中使用import{login}from"

不吃水果的太空人·2024-01-26 01:42

【解决】使用Element-Plus icon图标不显示

使用Element-Plusicon图标不显示的解决方案博主环境：Vue3+TypeScript已经安装：@element-plus/icons-vue就是不显示图标，但也不报错一般这种情况就是import

不吃水果的太空人·2024-01-26 01:12

Vue3 状态管理 Vuex

1.问题在不使用全局状态管理库时,应用状态由组件管理,当多个组件需要共享使用同一个应用状态时,应用状态需要通过props或自定义事件在组件之间进行传递,在组件与组件之间的关系比较疏远时,手递手的这种传递方式显得特别混乱,使得应用d的维护变得困难.在使用了全局状态管理库后,需要共享的应用状态被单独存储在一个独立于组件的Store对象中,所有组件可以直接从这个对象中获取状态,省去了繁琐的组件状态传递过

安生生申·2024-01-26 01:41

ywl-watermark-vue基于vue指令实现水印功能（vue2/vue3），防止手动删除水印

在开发vue项目中，可能会根据项目的需求对页面添加水印效果，下面将介绍一种基于vue指令而实现水印的方法（通用于vue2和vue3），利用MutationObserver监控水印DOM发生变化时，重新渲染水印

打响第一枪·2024-01-26 01:32

vue3基础

vue3生命周期详细在Vue3中，生命周期钩子是组件在其生命周期的不同阶段可以运行的函数。这些钩子提供了一个方式，允许你在组件创建、更新、销毁等关键时刻执行代码。

翱翔-蓝天·2024-01-26 00:00

vue3实现在浏览器之外打开新窗口，新窗口只有原来的一半并且居中显示

首先在router下的index.js添加路由地址{name:'attribute',path:'/attribute',component:()=>import('../views/attribute.vue')},然后在方法中调用//点击按钮functionclicek(){openCenteredWindow('/attribute',1400,800);}//计算居中位置functionc

青莳吖·2024-01-25 23:04

Vue3 组件 ti-element-vue 详细说明

Ti-Element-VueComponentsareconfiguredwithparameters.Thegoalistouseasmallamountofcodetoachieverapiddevelopmentofbusinessinterfacesandtounifytheuseofcomponents.buildingTestProjectVue3nvmuse16.0.0npminst

泥巴树 Tui.TANCE·2024-01-25 23:56

关于vue3使用Element ui输入框无法输入的简单解决方法

这应该是解决elementui输入框无法输入最简单有效的方法了script部分加入下面的代码import{reactive}from"vue";constform=reactive({name:""});element组件v-model填上对应的变量名autocomplete自动补全输入框这种类型的输入框,需要再添加一个input事件

橙子君Crush·2024-01-25 23:19

vue3+element plus input输入框限制输入数字和小数点

不能以小数点开头，且只能有一个小数点setup(){constinput=Vue.ref(undefined)constinputNum=(value)=>{if(value==undefined)return;returnvalue.replace(/[^\d.]/g,"").replace(/\.{2,}/g,".").replace(".","$#$").replace(/\./g,"").

小小小晓蓉·2024-01-25 23:48

vue3 element plus 查询输入框实现输入就可以查询

需求：实现在输入框中输入内容就触发查询思路：可以使用@input事件或v-model来监听输入框的变化，当输入框内容变化时，会触发handleQuery方法，并在变化时触发查询操作，你可以在这个方法中执行实际的查询逻辑源码如下：import{ref}from'vue';constsearchText=ref('');consthandleQuery=()=>{//在这里执行查询操作，使用searc

Miraitowa_chole·2024-01-25 23:17

在 vue3 中优雅的使用 jsx 声明、使用具名插槽、作用域插槽

最近手撸vue3，出于好奇打算玩一手JSX，在声明和使用插槽时遇到了一些挫折。

Only Double J·2024-01-25 23:46

Vue3 jsx 语法中使用 v-slots 插槽和 component动态组件

掘金地址：https://juejin.cn/post/7291463601704255545jsx语法中使用v-slots插槽和动态组件1.原template语法中使用slot插槽通过#title和#icon方式实现2.动态组件通过component方式实现NavigationOneItem1Option1Option2Option3Option4jsx语法插槽和动态组件的使用注：1.使用v-s

答案—answer·2024-01-25 23:46

在vue3.0的JSX语法下使用插槽

由于在vue2中JSX的语法在渲染和代码简洁度上有优化，偶尔也会用JSX的形式封装组件；新的项目里开始用vue3发现，以前丢插槽的两种方式行不通了，得想想办法才行。

白菜new·2024-01-25 23:14

【vue3】使用JSX实现普通、具名和作用域插槽

最近在vue3构建的项目中使用到了JSX（不得不说JSX用起来的感觉就是清爽）。但是前段时间遇到了一个问题，vuetemplate中的slot插槽如何在JSX中实现呢？

搬砖的猿@·2024-01-25 23:13

vue3&JSX 插槽使用指南

这篇文章是关于近期【监测用物联网提升智能传感器和系统软件开发】项目中，我在其中摸鱼凑数日子里积攒下来的系列文章二：vue3&JSX插槽使用指南，记录在jsx和一般情况下声明插槽、使用插槽、插槽传值的笔记

慢半帧·2024-01-25 23:43

vue3 + jsx 插槽带参数的使用以及参数中带有render函数的使用

//子组件import{defineComponent,onBeforeMount,reactive,ref,renderSlot}from"vue";importtype{SetupContext}from"vue";exportconstlist=defineComponent({props:{list:{type:Array,default:()=>[]},},setup(props,{sl

什么都不会的全栈工程师·2024-01-25 23:43

vue3.2之边学边练（二）vue下axios封装

这一篇严格意义上说和vue没什么太大关系。网页前端少不了请求数据，这也是为什么上一篇就加入了axios的需求添加。原理就是通过axios发送相应的post，get网络请求请求数据，然后返回展现到页面上。一、项目结构在src目录下新建utils和api两个文件夹，utils用于存放的公共封装类库函数，api则是请求的方法（utils英文是工具类的意思）。utils文件夹下新建request.js文件

雁过无声1986·2024-01-25 22:28

vue3.2之边学边练（三）vue下post数据发送至java后端

被封控了接近两月，终于又见着我的老伙伴（破电脑）了。之前测试了axios封装的get请求，没有什么大问题，昨天想试着加点东西，发现传过去的数据都是空对象，整整折腾了一天。最后发现是由于前端传给后端的数据是json字符串{item:value,item2:value2,item3:value}像是这个样子。到后端以后@PostMapping("/api/menu/add")publicStringa

雁过无声1986·2024-01-25 22:28

vue3【计算属性与监听-详】

一、计算属性--简写形式需求：通过计算属性，计算一个人的全名。基本信息姓：名：全名：{{fullName}}import{ref,reactive,computed}from'vue'exportdefault{name:'Demo',components:{},setup(){//数据letpersonInfo=reactive({firstName:'张',lastName:'三'})//计算

suoh's Blog·2024-01-25 21:20

【Vue3】计算属性computed和监听属性watch

目录一、Vue3和Vue2的区别二、计算属性computed三、监听属性watch四、计算属性和监听属性的区别一、Vue3和Vue2的区别Vue3和Vue2有以下几个主要区别：响应式系统的改进：Vue3

揣晓丹·2024-01-25 21:19

vue3的几种书写格式

1:import{defineComponent}from'vue'exportdefaultdefineComponent({setup(){return{}}})2：import{reactive,toRefs}from'vue'exportdefault{setup(){return{}}}3：

@小朱呀路·2024-01-25 20:32

vue2、vue3，生命周期详解

一、Vue2.xVue2的生命周期是指Vue实例从创建到销毁的整个过程中，会经历一系列的阶段和回调函数。它分为8个阶段，包括了组件的创建、挂载、更新和销毁等过程。1、beforeCreate:在实例初始化之后，但在数据观测和事件配置之前被调用。此时，data和methods等选项尚未初始化，并且无法访问this。2、created:实例已经完成数据观测和事件配置，但挂载阶段还未开始。在这个阶段，可

梦之归途·2024-01-25 19:18

为什么在 script 中 ref 需要打点 value

为什么在script中ref需要打点value.png前言：随着Vue3越来越稳定了，各位小伙伴都应该都开始在新项目中使用它了，但是当你使用Vue3越来越熟练，不知道你对Vue3的新APIref是否有所疑问

CondorHero·2024-01-25 18:09

Vue3 watch与watchEffect区别

✨专栏介绍在当今Web开发领域中，构建交互性强、可复用且易于维护的用户界面是至关重要的。而Vue.js作为一款现代化且流行的JavaScript框架，正是为了满足这些需求而诞生。它采用了MVVM架构模式，并通过数据驱动和组件化的方式，使我们能够更轻松地构建出优雅而高效的Web应用程序。在本专栏中，我们将深入学习Vue.js的核心概念、组件开发、状态管理、路由和性能优化等方面的知识。无论你是初学者还

俊刚、·2024-01-25 18:50

vue3 vite使用postcss-px-to-viewport 实现页面自适应

一、什么是postcss-px-to-viewport？postcss-px-to-viewport是一个PostCSS插件，它可以将px单位转换为视口单位（vw、vh或vmin）。视口单位是相对于视口尺寸来计算的长度单位，而不是相对于父元素或根元素。这意味着使用视口单位进行布局和样式设置时，元素会随着屏幕尺寸的变化而自适应。二、为什么要使用postcss-px-to-viewport？在移动端开

前端小趴菜05·2024-01-25 18:03

修改element-ui某个深层元素

某个深层元素（eg:.el-input__inner）或其他深层样式时，需要使用/deep/，如.conBox/deep/.el-input__inner{padding:010px;}注意，/deep/在vue3.0

weixin_46852620·2024-01-25 17:15

/deep/和＞＞＞以及 ::v-deep 三者的区别

>>>深度作用选择器的简写形式只作用于css，不支持css预加载器（less/scss）是/deep/的简写形式,适用于Vue2.x版本，Vue3.x版本使用会报错/deep/Vue2

兴趣使然的码仔·2024-01-25 17:43

样式穿透（＞＞＞和 /deep/以及 ::v-deep 三者之间的区别）

进行了封装，正常使用类名样式不会发生改变，要想修改成规定的样式，就需要使用深度选择器），直接使用>>>穿透进行样式修改只作用于css，不支持css预加载器（less/scss）适用于Vue2.x版本，Vue3

Skr@Chen·2024-01-25 17:12

Vue - vant安装(引用babel-plugin-import实现自动按需引入组件)

jh-vue-demobabel-plugin-import是一款babel插件，它会在编译过程中将import的写法自动转换为按需引入的方式以Vant为例：1、安装首先安装vant#Vue2项目，安装Vant2：npmivant-S#Vue3

西半球_·2024-01-25 17:19

vue3之echarts3D环柱图

vue3之echarts3D环柱图效果：核心代码：import*asechartsfrom'echarts';import'echarts-gl';import{reactive,onMounted,ref

V。on·2024-01-25 16:40

vue 基本知识

vue是一个渐进式的javascript框架双向绑定通过对数据的劫持结合发布订阅模式的方法来实现双向绑定;即是数据发生变化,视图跟着发生变化;数据与视图是同步进行vue3之前是依靠的Object.defineProperty

Lee_Year_Month·2024-01-25 16:44

推荐频道

vue3工程化