草庐IT

Vue-Instant

全部标签

Vite4+Typescript+Vue3+Pinia 从零搭建(4) - 代码规范

项目代码同步至码云weiz-vue3-template要求代码规范,主要是为了提高多人协同和代码维护效率,结合到此项目,具体工作就是为项目配置eslint和prettier。editorconfig安装EditorConfigforVSCode插件,根目录下新建.editorconfig文件,增加以下配置[*.{js,jsx,ts,tsx,vue}]indent_style=spaceindent_size=2end_of_line=crlftrim_trailing_whitespace=trueinsert_final_newline=truemax_line_length=120如果是非

VUE2:关于axios的跨域问题(No ‘Access-Control-Allow-Origin‘ )以及解决方案(亲测有用,全流程配图文版,建议收藏)

今天在开发中新写了一个前端的项目作为集成,公司是保密项目所以公司代码肯定是不能粘贴了,回家之后还是觉得记录一下比较好,所以自己模拟了一个来给大家解决一下。在VUE2的开发过程中跨域问题肯定是前端程序员都遇到过的问题,尤其还是像我这种半吊子前端,报错内容如下:ccesstoXMLHttpRequestat'http://localhost:8080/XXXXXXXX'fromorigin'http://localhost:8081'hasbeenblockedbyCORSpolicy:No'Access-Control-Allow-Origin'headerispresentonthereque

Vue 网络处理 - axios 异步请求的使用,请求响应拦截器(最佳实践)

目录一、axiox1.1、axios简介1.2、axios基本使用1.2.1、下载核心js文件.1.2.2、发送GET异步请求1.2.3、发送POST 异步请求1.2.4、发送GET、POST请求最佳实践1.3、请求响应拦截器1.3.1、拦截器解释1.3.2、请求拦截器的使用1.3.3、响应拦截器的使用1.3.4、拦截器在Vue脚手架中的使用(最佳实践)一、axiox1.1、axios简介axios用来在前端页面发起一个异步请求,请求之后页面不动,响应回来刷新局部.1.为什么不使用ajax呢?官方:在jQuery中推荐使用ajax技术,Vue里面不推荐使用jQuery框架,因此Vue更推荐使用

Vue组件之间的通讯方式(父传子、子传父、兄弟组件间传值、非父子组件间传值)

Vue组件之间的通讯方式(父传子、子传父、兄弟组件间传值)*引子首先,我们初步建立一个以vue/cli4为基础的项目;在components的文件夹下新建Parent.vue和ChildOne的父组件和子组件;在App.vue和Parent.vue中映射成组件标签。基本结构如下:Parent.vuetemplate>div> h1>Parent/h1>child-one>/child-one>/div>/template>script>importChildOnefrom'@/components/ChildOne'exportdefault{data(){return{}},componen

Vue3 如何实现一个函数式右键菜单(ContextMenus)

前言:最近在公司PC端的项目中使用到了右键出现菜单选项这样的一个工作需求,并且自己现在也在实现一个偶然迸发的idea(想用前端实现一个windows系统从开机到桌面的UI),其中也要用到右键弹出菜单这样的一个功能,个人觉得这个实现还不错,特来分享🎁。tips:我个人是喜欢使用图文来讲解知识点的,相比于直接讲概念,我个人更倾向于使用费曼学习法来讲解某一个功能的实现过程,因为我也是刚从一只菜鸟走过来,所以我更加清楚一个新手在去学习一个全新的知识的时候,他其实不是需要你给他讲实现原理,而是你需要作为一个“引路人”让他先简单知道这个知识是用来干什么的,后面随着他自己一步一步的深入了解,他会自己慢慢领悟

SpringBoot+Vue项目部署(传统方式)

目录一,后端部署1,项目打包1.1,引入插件1.2,maven打包1.3,修改项目版本号1.4,验证1.5,生成配置文件2,服务器环境搭建2.1,安装JDK1)下载2)tar包安装3)rpm安装2.2,MySQL安装2.3,Windows开放MySQL远程连接1)开放远程连接2)开放3306端口3,上传jar包,编写shell脚本4,验证二,前端部署1,Vue项目打包2,Nginx的安装与配置2.1,Nginx安装2.2,编写配置文件三,说明:一,后端部署1,项目打包1.1,引入插件该插件会将SpringBoot项目打包成一个可以运行的jar包,可以用java-jarjar包名称启动。buil

【源码系列#02】Vue3响应式原理(Effect)

专栏分享:vue2源码专栏,vue3源码专栏,vuerouter源码专栏,玩具项目专栏,硬核💪推荐🙌欢迎各位ITer关注点赞收藏🌸🌸🌸Vue3中响应数据核心是reactive,reactive的实现是由proxy加effect组合,上一章节我们利用proxy实现了一个简易版的reactive,#【源码系列#01】Vue3响应式原理(Reactive)。接下来让我们一起手写下effect的源码effecteffect作为reactive的核心,主要负责收集依赖,更新依赖在学习effect之前,我们再来看下这张图targetMap:存储了每个"响应性对象属性"关联的依赖;类型是WeakMapdep

小白系列Vite-Vue3-TypeScript:011-登录界面搭建及动态路由配置

前面几篇文章我们介绍的都是Vite+Vue3+TypeScript项目中环境相关的配置,接下来我们开始进入系统搭建部分。本篇我们来介绍登录界面搭建及动态路由配置,大家一起撸起来......搭建登录界面登陆接口api项目登陆接口是通过mockjs前端来模拟的模拟服务接口LoginApi首先在src/mock文件夹下新建login.ts文件,模拟两个服务接口(验证码获取+用户登录)import{MockMethod}from'vite-plugin-mock';exportconstLoginApi:Array=[{url:'/api/captchaImage',method:'get',resp

Taro + VUE 小程序环境搭建

安装Cli工具安装:$yarnglobaladd@tarojs/cli项目初始化:taroinitmyApp注意:如下命令中选用了nut-ui,即京东开发团队提供的跨端组件库。➜taroinitmyApp👽Tarov3.6.6Taro即将创建一个新项目!Needhelp?Goandopenissue:https://tls.jd.com/taro-issue-helper?请输入项目介绍?请选择框架Vue3?是否需要使用TypeScript?Yes?请选择CSS预处理器(Sass/Less/Stylus)Sass?请选择编译工具Webpack5?请选择包管理工具pnpm?请选择模板源Githu

【开源】基于Vue和SpringBoot的生活废品回收系统

项目编号:S003,文末获取源码。\color{red}{项目编号:S003,文末获取源码。}项目编号:S003,文末获取源码。目录一、摘要1.1项目介绍1.2项目录屏二、研究内容三、界面展示3.1登录注册3.2资源类型&资源品类模块3.3回收机构模块3.4资源求购/出售/交易单模块3.5客服咨询模块四、免责说明一、摘要1.1项目介绍生活废品回收系统是可持续发展的解决方案,旨在鼓励人们分离和回收生活垃圾,减少环境污染和资源浪费,生活废品回收系统涵盖了城市居民的日常生活,包括收集、分类、处理和收集废物的完整过程。本文提出了一种基于Vue技术的生活废品回收系统,该系统可以通过垃圾的收集和销售来支持