vue3工程化第39页

vue3 + naive ui + Tabs 报错 ‘Slot “default“ invoked outside of the render function‘

警告的异常信息：'Slot"default"invokedoutsideoftherenderfunction'解决方法：如下给Tabs组件加一个defaultValue的默认值即可参考：https://github.com/tusen-ai/naive-ui/issues/3134

三劫散仙·2024-01-19 20:55

vue3.x实践经验-1、mapState、mapGetters、mapMutations、mapActions

一边学习vue3.x，一边实践，最近在做项目时，使用computed引入store中state的数据时，总是觉得很麻烦，想起新版兼容2.x,就想着引入mapState，可是怎么用都不对劲。

不收藏找不到我·2024-01-19 19:02

VUE3，自定义控制keep-alive缓存

安装插件npminstallvite-plugin-vue-setup-extend--save在vite.config.ts中importVueSetupExtendfrom'vite-plugin-vue-setup-extend'.....plugins：[vue(),VueSetupExtend(),.....]useKeepalive.tsimport{ref}from"vue"expo

日积一步·2024-01-19 19:50

【Vue技巧】vue3中不支持.sync语法糖的解决方案

海鲸AI-ChatGPT4.0国内站点，支持设计稿转代码：https://www.atalk-ai.com在Vue3中，.sync修饰符已经被移除。

海鲸AI·2024-01-19 19:46

Pytorch C++ 工程化

PytorchC++工程化在最初的Pytorch给出的方案是将模型转化成Onnx,使用Caffe2来运行。Onnxdata[index]=new_data不支持.使用dat

潘旭·2024-01-19 18:31

vue3+vite 搭建项目

第一步npminitvite@latest当然，我在建项目的时候输入这个命令行的时候，报错了，提示安装依赖，执行如下命令：npminstall-gcreate-vite全局安装create-vitecdxxxnpminstallnpmrundev之后就按照步骤选择vuets或者js语言就可以了搭建好项目之后，我们就开始新建路由文件以及views文件夹了安装依赖npminstallvue-route

前端~·2024-01-19 18:26

TS在vue3中的初使用

一、定义基本类型constmyRef=ref(1);constmyStringRef=ref('hello');constmyBooleanRef=ref(true);二、引用类型(1)对象interfaceMyData{name:string;age:number;}constmyData:MyData={name:'Alice',age:25,};constmyRef=ref(null);//

和科比合砍81分·2024-01-19 17:27

Vue3+Ts+Vite项目(第三篇)——配置husky、stylelint、commitlint，配置git提交代码校验

文章目录简介一、项目环境1.1node.jsv16.0.0及以上（我v16.14.1）1.2pnpmv8.0.0及以上（我v8.6.6）二、创建项目2.1安装pnpm2.2创建项目-不多赘述三、配置eslint3.1安装eslint3.2生成eslint配置文件3.3完善.eslintrc.cjs文件中的rules对象3.4新建忽略文件3.5添加脚本3.6检测是否生效四、配置prettier4.1

礼貌而已·2024-01-19 17:57

vue3项目eslint配置、配置prettier(格式化配置)

文章链接:全部配置链接第一步:eslint配置、配置prettier(代码格式化):点击链接(1).eslint.cjs—eslint配置文件(2).eslintignore—校验忽略文件(3).prettierrc.json添加规则(4).prettierignore忽略文件prettierrc规范说明:第二步:styleLint配置样式链接第三步:husky配置第四步:commitLint配置

和科比合砍81分·2024-01-19 17:25

vue3通过函数方式调用组件

由于项目中有个小需求，双击数据库表格数据变为输入框修改or点击选中删除数据后需要弹窗显示要执行的SQL，点击执行后方可修改数据库数据（出于二次确认以及有时是需要把SQL拷贝出来提工单到生产环境执行等）。原本使用的是ElementPlus的ElMessageBox.prompt()函数进行弹框显示sql内容，但是该方式不好控制弹框大小，以及sql关键字美化等。故而就想通过类似的方式实现一个函数来

Coder慌·2024-01-19 16:23

面板小程序命令行工具介绍

Ray体系提供配套的工程化解决方案。由于多端构建的一些客观原因，在构建流程的设计上，必须将工程套件安装在项目内。

IoT砖家涂拉拉·2024-01-19 16:09

vue3项目中关闭 eslint 检验

文章目录需求分析需求关闭eslint检验分析在Vue3项目中，可以通过修改package.json文件或者配置.eslintrc.js文件来关闭ESLint检验。

博客zhu虎康·2024-01-19 15:57

Vue2-Vue3

一、初始Vue动态构建用户界面的渐进式JavaScript框架英文官网中文官网1.1创建Vue实例想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新（响应式）；注意区分：js表达式和js代码(语句)1.表达式：一个表达式会产生一个值，

前端扫雪工·2024-01-19 15:26

uniapp vue3 vscode快速开发配置使用 pinia 持久化数据，数据加密，unocss

UniappVue3/ViteTypescript命令安装文档npxdegitdcloudio/uni-preset-vue#vite-tsmy-vue3-projectgitee模板下载vscode快速开发插件

潇、然·2024-01-19 15:25

vue3 组件的二次封装（保留其属性和事件，插槽，方法）

vue3组件的二次封装基础组件模拟封装一个基础组件，包含一个base事件，一个title属性，默认插槽和footer插槽暴漏closeopen方法x-basedefineProps();constemit

潇、然·2024-01-19 15:24

Vue3笔记

文章目录1、Vue3.0环境集成1.使用vue-cli创建2.使用vite创建2、常用的CompositionAPI（组合API）1、setup函数2、ref函数3、reactive函数4、Vue3.0

小狐狸ya·2024-01-19 15:52

bb_xiaxia1998·2024-01-19 15:47

什么是Pinia，它是如何工作的

什么是PiniaPinia是Vue3的状态管理库，它提供了一种简单、可靠和可扩展的方法来管理应用程序状态。它的目标是提供一个清晰的API，易于使用，并避免不必要的性能开销。

黑狼传说·2024-01-19 15:46

vuｅ３路由的ｐｒｏｐｓ配置

路由写一下代码，代码重点再家一个ｐｒｏｐｒｓ，而且不要忘了再ｐａｔｈ后面写需要传的参数{path:"/my:kobe/:num/:age",name:"my",component:()=>import("../views/my.vue"),props:true}然后我们再获取参数的页面用ｄｅｆｉｎｅＰｒｏｐｓ获取就行了import{ref,onMounted,toRefs}from"vue";de

paul jeorgh·2024-01-19 15:57

vue3跳转到微信小程序成功案例,报错分析

首先我之前出了一个,那是我成功跳转了以后的结果,但是第二天改样式的时候就失效了报错,报了两天的错误,回到正题.我们首先把我们请求的函数放到onMounted外面,这样我们签名的速度很快.用户体验更好.然后我们要签名,请求,请求数据以后给微信发我们请求过来的一些参数.签名请求和wx.config,wx,ready,实现有一下代码import{ref,onMounted,}from"vue";impo

paul jeorgh·2024-01-19 15:26

vue3项目跳转到微信小程序

首先我们要认证公众号然后给后端发起请求,请求一下代码//引入wxsdkimportwxfrom"weixin-js-sdk";constisWxReady=ref(false)constwxAppletData=ref({})//保存数据后端返回的数据constgetSign=async()=>{leturl=encodeURIComponent(location.href.split("#")[

paul jeorgh·2024-01-19 15:56

【学习记录24】vue3自定义指令

一、在单vue文件中直接使用1、html部分{{item}}-{{item*2}}2、js部分import{ref}from'vue'//loading图片路径importimgSrcfrom'@/views/loading.gif'constdata=ref(1)//定义loading初始值为true，插入loadingconstloading=ref(true)//单页面自定义指令直接使用v开

天才和人才就差了二·2024-01-19 15:54

vue3+ts +pinia 自己记录的写的乱

1，父传子constprops=defineProps({type:{default:'edit',type:String,},});标签vue3（中没有this）父子组件传参单个父子传参子组件多个父子传参用

又是取名的一天·2024-01-19 15:47

Vue3使用

1、列表实现详情修改vue3中无法使用slot-scope的问题vue2：上下对应，title是自己随便起的名字1、定义一个普通的插槽，可以用div，任何标签2、定义一个element列表里面插槽的标签

Best_Liu~·2024-01-19 13:47

vue3 自动下载使用 iconify图标以及自定义svg图标

开发中经常使用图标，通过unplugin-icons插件我们可以在项目中自动下载所需的图标，但实际开发中我们还需要iconfont以及项目ui切图中的图标，这就需要使用自定义SvgIcon组件。具体操作步骤一、安装包npmi-Dvite-plugin-svg-iconsunplugin-iconsunocss二、自定义组件SvgIconimporttype{CSSProperties}from'v

少十步·2024-01-19 13:05

Unocss(原子化css) 使用及vue3 + vite + ts讲解

Unocss简单使用首先初始化一个vite项目使用pnpm安装1pnpmcreateviteunocss-demo----templatevue-ts使用npm安装1npminitvite@latestmy-vue-app----templatevue使用yarn1yarncreatevitemy-vue-app--templatevue下载Unocss依赖安装unocss和三个预设，第一个是工具

sinat_40572875·2024-01-19 13:04

使用CSS计算高度铺满屏幕

以上图片是我要解决的问题正文目前使用的是vue3+setup语法糖解决方案一：用窗口高度动态计算高度在html里动态绑定高度样式window.innerHeight获取窗口高度注意使用了几种高度，如s

不想起名55·2024-01-19 11:54

【前端框架】Vue3合集

一、Vue3初识1、create-vuecreate-vue是Vue官方新的脚手架工具，底层切换到了vite（下一代前端工具链），为开发提供极速响应前置条件：16.0或更高版本的Node.js安装并执行

wmh1024·2024-01-19 11:09

若依 ruoyi-vue3+ts-plus+ 宇道 yudao-ruoyi-vue-pro 数据权限设置

实现效果：自己创建的接口功能，设置只有自己部门的人才可以看自己部门的数据，基于【部门】过滤数据权限的表。系统管理--角色管理--数据权限1.新建一个表dept_id必须要有。2.生成代码3.DataPermissionConfiguration.java找到这个文件，添加rule

三块钱0794·2024-01-19 10:29

vue3和ant-design-vue的＜a-form＞表单自定义规则校验封装

//使用ant-design-vue里面的rules属性增加校验$refs.formBox">//a-form-item外面包裹a-row和a-col是为了利用其调整每个表单元素的距离improt{ref,reactive}from'vue'//引入封装的自定义校验js文件import{validateName,validateAge}from'./rules'constformState=rea

小王讨厌洋葱·2024-01-19 10:19

element-plus+vue3+echarts实现自适应可视化大屏

安装autofit.js、echartsnpminstall--saveautofit.js生产作业可视化大屏{{percentage}}%{{t('page.完成率')}}{{item.name}}{{item.value}}▋要货单▋调拨订单/销售订单▋发货通知单▋库存调拨入库单▋配送单import{reactive,onMounted,ref,watch}from'vue'import{i1

江湖人称大佬·2024-01-19 10:16

vue3中reactive和ref函数及对比

reactive和ref函数1.reactive接受对象类型数据的参数传入并返回一个响应式的对象//导入import{reactive}from'vue'//执行函数传入参数变量接收conststate=reactive({msg:'thisismsg'})constsetSate=()=>{//修改数据更新视图state.msg='thisisnewmsg'//不需要.value}{{state

香香爱编程·2024-01-19 10:11

vue3的创建及认识

1、创建项目使用creat-vue搭建vue3项目2、认识creat-vuecreate-vue是Vue官方新的脚手架工具，底层切换到了vite（下一代前端工具链），为开发提供极速响应3、创建create-vue

香香爱编程·2024-01-19 10:06

vite vue3项目打包如何跳过ts检查并进行打包

vitevue3项目打包如何跳过ts检查并进行打包将vue-tsc打包检查命令干掉{"name":"data-service2.0","type":"module","version":"1.0.0-beta

Shero.李建业·2024-01-19 10:51

Vue3 + Vite 打包优化及配置

Vue3+Vite搭建企业级开发脚手架【目录篇】Vue3Element-PlusJson配置一站式生成动态表单CSS工程化配置我们刚接触前端时候，提到前端样式，首先会想到的就是原生CSS；随着技术的迭代更新

qq_30379395·2024-01-19 10:46

vue3实现元素拖拽移动功能

一、效果如下：二、思路和步骤：整体思路是在鼠标按下时计算初始偏移值，并在拖拽过程中更新div元素的位置，通过事件监听器实现拖拽效果。（1）用户点击触发拖拽：当用户点击可拖拽的div元素时，通过mousedown事件触发startDrag函数。（2）初始化变量：startDrag函数初始化一些变量，包括水平和垂直方向上的偏移值，以及拖拽状态。（3）引入倍率调整偏移值：在鼠标按下瞬间，通过计算初始偏移

Miraitowa_chole·2024-01-19 10:12

vue3学习笔记 -- vuex4

vuex4是vue3的兼容版本，提供了和vuex3的相同API。因此我们可以在vue3中复用之前已存在的vuex代码。

前端人_倩倩·2024-01-19 09:50

前端构建工具对比 webpack、vite、esbuild等

人类和动物最大的区别是会使用工具，工具的作用就是提升我们的生产效率，同样，随着前端工程化的演进，伴随着一些优秀的工程化的生产效率工具，今天就来聊一聊，前端工程中的构建工具。

爱问的艾文·2024-01-19 09:27

【vue3项目初始化配置】vue3 + element plus

项目初始化是开发过程中很重要的一个环节，本篇博客带大家从零开始创建并初始化一个vue3项目，文章详细介绍了每个步骤，希望能帮助刚接触开发的小伙伴。

余炜yw·2024-01-19 09:25

【Vue3源码】第四章实现isReadonly和isReactive

【Vue3源码】第四章实现isReadonly和isReactive前言上一章节我们实现readonlyAPI，并且优化之前写的reactiveAPI。

顽皮宝·2024-01-19 07:59

react中父组件如何直接调用子组件的方法和属性,以及对比vue3.0父组件调用子组件的方法和属性

react中父组件如何直接调用子组件的方法和属性,以及对比vue3.0父组件调用子组件的方法和属性reacthookvuesetup父组件子组件reacthookforwardRef(render)useImperativeHandle

miao_zz·2024-01-19 07:29

#vue3 实现前端下载excel文件模板功能

一、需求：前端无需通过后端接口，即可实现模板下载功能。通过构造一个JSON对象，使用前端常用的第三方库xlsx，可以直接将该JSON对象转换成Excel文件，让用户下载模板二、效果：三、源码如下：npminstallxlsx下载模板import*asXLSXfrom'xlsx';constwriteFileAsync=(workbook,filename,options)=>{returnnewP

Miraitowa_chole·2024-01-19 06:30

Vue3封装可拖拽的弹窗

核心代码（复制就可以使用了）{{title}}Ximport{computed,ref}from'vue';const{width,height,title}=defineProps({width:{type:String,default:'623px',},height:{type:String,default:'379px',},title:{type:String,default:'',},

七月_Mo·2024-01-19 06:25

vue3.0 使用inject(“reload“)刷新页面

（1）在app.vueimport{defineComponent,ref,nextTick,provide}from'vue';exportdefaultdefineComponent({setup(){//局部组件刷新constisRouterAlive=ref(true);constreload=()=>{isRouterAlive.value=false;nextTick(()=>{isR

墨尔本斌·2024-01-19 04:12

016-Vue-黑马2023：前后端分离开发(在线接口文档)，前端工程化、Element、vue编写一个完成页面、Vue路由、vue打包部署到nginx

第三节前后端分离开发1、介绍开发模式前后端混合开发：传统开发模式前后端分离开发：当前最为主流的开发模式页面原型+需求案例：分析出接口文档离线开发文档示例：2、YAPI（官网已停用）2023.7停止维护了，已经登录不上官网了。在线接口文档管理平台：介绍：YApi是高效、易用、功能强大的api管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务地址：http://yapi.smart-xwor

清风微凉 aaa·2024-01-19 04:32

vue3 —— script setup 语法糖

是vue3的新语法糖，并不是新增的功能模块，只是简化了以往的组合式API必须返回(return)的写法，并且有更好的运行时性能。

玛卡巴卡吐口水·2024-01-19 03:49

若依框架学习

1、若依框架前后端分离版服务器部署，前端nginx的配置2、RuoYi(若依)前后端分离版本，windows下部署（nginx）3、若依：IDEA下（若依前后端分离版Vue3）添加新模块4、若依Nginx

chxljtt·2024-01-19 03:30

vscode创建代码片段 vue3modal

{//Placeyour全局snippetshere.Eachsnippetisdefinedunderasnippetnameandhasascope,prefix,bodyand//description.Addcommaseparatedidsofthelanguageswherethesnippetisapplicableinthescopefield.Ifscope//isleftemp

Jay_帅小伙·2024-01-19 02:55

NodeJS安装

前言：因为java行业不景气，人才严重过剩，像我我这样的人，只能选择往广度走走，开始学Vue3.Vue3现在默认要NodeJs版本16及以上，所以我这里安装了18.18.0的，目前逛网最新稳定版本是20

Puddy_Q·2024-01-19 01:43

vue3 知识

vue3介绍Vue3的变化:1、vue3完全兼容vue2，但是vue3不建议用vue2的写法2、拥抱TypeScript，ts完全兼容js3、组合式API和配置项APIvue2是配置项apivue3组合式

糖果爱上我·2024-01-19 00:59

推荐频道

vue3工程化