vue3项目实例

vue3中如何通过emit自定义事件

在组件内自定义事件：提交import{defineComponent}from'vue'exportdefaultdefineComponent({emits:['form-submit'],//先申明setup(props,context){constsubmitForm=()=>{context.emit('form-submit',true)//后定义事件以及传值}return{submit
得知此事须躬行·2024-02-09 11:51

vue3中通过对象来改变样式颜色

直接上案例代码，学过vue3的一看就懂：颜色变化//eslint-disableimport{defineComponent,reactive,toRefs,onMounted}from"vue";exportdefaultdefineComponent
得知此事须躬行·2024-02-09 11:51

vue3 + element-plus 的 upload + axios + django 文件上传并保存

座右铭：怎么简单怎么来，以实现功能为主。欢迎大家关注公众号与我交流之前在网上搜了好多教程，一直没有找到合适自己的，要么只有前端部分没有后端，要么就是写的不是很明白。所以还得靠自己摸索出来后，来此记录一下整个过程。其实就是不要用默认的action，要手动实现上传方式http-request，然后再传给后端进行各种操作了这里隐藏了文件展示列表展示了上传文件的个数文件去重上传也对上传文件的格式做了限制在
卫龙~·2024-02-09 11:53

github 搭建个人导航网

欢迎大家关注公众号与我交流最近搭建了个个人的导航网，具体内容见下图，欢迎大家访问吖，点我访问(首次访问较慢)具体实现是使用vue3编写，白嫖github的page部署首先在github上创建一个仓库：name.github.io
卫龙~·2024-02-09 11:22

vue3+vite+ts 配置commit强制码提交规范配置 commitlint

配置git提交时的commit信息，统一提交git提交规范安装命令:npminstall-gcommitizennpmicz-customizablenpmi@commitlint/config-conventional@commitlint/cli-D文件配置根路径创建文件commitlint.config.jsmodule.exports={//继承的规则extends:['@commitli
周家大小姐.·2024-02-09 08:29

Vue3 常用的10个组合式 API

而通过Vue3，组合式API增强了我们利用Vue的能力，使我们的代码更具模块性和可读性。
子伟-H5·2024-02-09 08:06

Vue3——setup 语法检测

1.安装VueLanguageFeatures、TypeScriptVuePlugin插件2.安装后，禁用Vetur3.禁用后重启工具即可
一只漫步前行的羊·2024-02-09 07:46

vue3学习——axios封装

安装pnpmiaxios/src/utils/request.tsimportaxiosfrom'axios'import{ElMessage}from'element-plus'constrequest=axios.create({baseURL:import.meta.env.VITE_APP_BASE_API,timeout:5000,})//请求拦截器request.interceptor
可乐KL·2024-02-09 07:45

vue3学习——路由

安装pnpmivue-router/src/router/index.tsimport{createRouter,createWebHashHistory}from'vue-router'import{constantRoute}from'@/router/routes.ts'letrouter=createRouter({history:createWebHashHistory(),routes
可乐KL·2024-02-09 07:45

vue3——实现表单校验

带着这些问题，今天一起来看一下vue3中如何实现表单校验吧~一、表单校验的意义当用户在输入框内输入的值或者必选项未进行选择时，就不触发下一步的操作可以让用户的信息都按一定的规则来设置，方便统一管理通过表单校验可以有效地规避不法分子进行
leo·2024-02-09 07:45

vue3——登录校验

页面首先需要在表单配置model、ref、rules，el-form-item中放prop登录scriptletform=reactive({username:'admin',password:'111111',})constformRef=ref()constbtnLoading=ref(false)construles={username:[{required:true,message:'请输
可乐KL·2024-02-09 07:13

【vue3学习笔记】自定义hook；toRef与toRefs

尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通课程P156节《自定义hook》笔记：实现一个鼠标“打点”功能：注意点：（1）组件卸载时需要接触window上的事件绑定，否则组件卸载后window
youyoufenglai·2024-02-09 07:04

【vue3学习笔记】shallowReactive与shallowRef；readOnly与shallowReadOnly；toRaw与markRaw

尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通课程P158节《shallowReactive与shallowRef》笔记：reactive()与shallowReactive()：reactive
youyoufenglai·2024-02-09 07:56

Vue3编写简单的App组件(二)

一、Vue3页面渲染基本流程1、入口文件ViteApp2、main.ts//引入CreateApp用于创建应用import{createApp}from"vue";//引入App根组件importAppfrom
maplea2012·2024-02-09 06:04

第二章 Electron自定义界面(最大化、最小化、关闭、图标等等)

这里我已经搭建好了项目快速搭建Electron+Vite3+Vue3+TypeScript5
Etc.End·2024-02-09 06:26

从 16 个方向逐步搭建基于 vue3 的前端架构

前言由于vue3.2版本的发布，的实验性标志已经去掉，这说明这个语法提案已经正式开始使用，并且我个人对这个方案表示非常喜欢，其他的更新请自行了解。到目前为止，我认为vue3已经完全可以用于生产环境。
codexu_461229187·2024-02-09 06:46

基于Vue的前端架构，我做了这15点

前言由于vue3.2版本的发布，的实验性标志已经去掉，这说明这个语法提案已经正式开始使用，并且我个人对这个方案表示非常喜欢，其他的更新请自行了解。到目前为止，我认为vue3已经完全可以用于生产环境。
codexu_461229187·2024-02-09 06:45

2024年的VUE2下的无效指令npm install --save vue-i18n

vue官网已经声明了不再维护vue2,vue-i18n安装依赖的时候就只接安装vue3的vue-i18,直接报错：>npminstall--savevue-i18nnpmERR!
阿狸Jay(塘主)·2024-02-09 06:43

【高频前端面试题--TypeScript篇】

作者：“码上有前”文章简介：前端高频面试题欢迎小伙伴们点赞、收藏⭐、留言高频前端面试题--Vue3.0篇什么是TypeScript？
码上有前·2024-02-09 05:25

【高频前端面试题--Vue3.0篇】

作者：“码上有前”文章简介：前端高频面试题欢迎小伙伴们点赞、收藏⭐、留言高频前端面试题--Vue3.0篇Vue3.0有什么更新defineProperty和proxy的区别Vue3.0为什么要用proxy
码上有前·2024-02-09 05:21

Vue3中路由配置Catch all routes (“*“) must .....问题

Vue3中路由配置Catchallroutes(“*”)must…问题文章目录Vue3中路由配置Catchallroutes("*")must.....问题1.业务场景描述1.加载并添加异步路由场景2.
小袁搬码·2024-02-09 05:50

Vue3基础(十yi)___常用生命周期函数___setup___onMounted___onUpdated

对比vue2beforeCreate->使用setup()created->使用setup()beforeMount->onBeforeMountmounted->onMountedbeforeUpdate->onBeforeUpdateupdated->onUpdatedbeforeDestroy->onBeforeUnmountdestroyed->onUnmountederrorCaptur
六卿·2024-02-09 05:32

vue3+elementplus el-upload组件上传第三方oss存储问题

文件上传功能属于一项基本功能，而随着对象存储的发展，现在项目开发中，大部分都是把文件上传到第三方的oss系统或者自己搭建的oss系统。而el-upload组件是elementui提供的一个文件上传的组件，其有很多属性和事件，如下图所示是其组件的部分属性，因为其属性和事件比较多，所以el-upload组件也是一个比较有难度的组件。element-plusel-upload组件文档地址那么使用el-u
qq_33453797·2024-02-09 05:59

3分钟带你了解Vue3的nextTick()

概念在Vue3中nextTick()方法的行为和Vue2中基本相似，但它进行了一些优化，以提高性能和稳定性。nextTick
_Minato_·2024-02-09 04:22

vue3跨组件(多组件)通信：事件总线【Event Bus】

★推荐方案：使用`events`npm库；可用范围：vue、react、angular等任何框架都可使用；且使用方式完全一致；本文仅介绍、讲解对web页面端项目的常用API；通过events实现事件总线功能；event库概述：本次所使用到的库为通用库，若在node环境使用则无需npm安装，本身自带的；浏览器环境下使用才需要npm安装。events库是从Node.js上移植Events模块的功能，因
oumae-kumiko·2024-02-09 01:13

VUE2模拟VUE3中的Teleport实现改变元素挂载的节点

Teleport页面exportdefault{name:'teleport',props:{to:{type:String,required:true}},mounted(){consttoEl=document.querySelector(this.to)if(toEl){toEl.appendChild(this.$el)}},destroyed(){consttoEl=document.q
灰海·2024-02-09 00:34

VUE2和VUE3区别对比一览

##Vue3总结###官方文档*[Vue3](https://v3.cn.vuejs.org/api/options*data.html)*[Vue2](https://vuejs.bootcss.com
灰海·2024-02-09 00:02

关于vue3中文转拼音和三级联动

1.vue3中文转拼音npminstallpinyin--save//拼音constnamePinyin=ref('');mName是后端传过来的最后的结果是测试杨ceshiyangletmName=record.userId_dictText.split
_斯洛伐克·2024-02-08 23:12

关于vite5中postcss-px-to-viewport插件问题和require问题

1.vue3中不支持require，可以npmivite-plugin-require-transform--save-devimportrequireTransformfrom'vite-plugin-require-transform
_斯洛伐克·2024-02-08 23:41

宁德烟草大屏问题与解决方法总结vue3+vite5

中css里添加postcss代码如下1.样式总结：1.非标准屏幕时要完整展示大屏内容当大屏不是1920*1080屏幕时，两侧可以滑动。当1920*1080正常时，不会滑动，可以设置高度和滚动。91和35分别是我的头部和尾部高度。同时配合postcsspxtoviewport8plugin插件保证宽度自适应.left{width:436px;height:calc(100vh-91px-35px);
_斯洛伐克·2024-02-08 23:41

关于vue3路由

参考vue3路由跳转and接收参数_vue3接收参数-CSDN博客vue3部分使用路由：传递路由//引入API---useRouterimport{useRouter}from'vue-router';
_斯洛伐克·2024-02-08 23:41

在vue3+vite中 使用require

第一步先安装插件npmivite-plugin-require-transform--save-dev第二步导入importrequireTransformfrom'vite-plugin-require-transform';第三步在vite配置文件exportdefaultdefineConfig({plugins:[requireTransform({fileRegex:/.js$|.vue
_斯洛伐克·2024-02-08 23:11

vue3 antd table组件点击行变色问题

1.为table定义customRow和rowClassName，customRow为了选中行，rowClassName为了改变样式的函数，customRow和rowClassName可以去antd官方文档看定义customRow，rowClassName函数letselectedRowKeys=ref([]);//声明一个数组，在行点击函数里面用来存每一行数据的唯一标识id或者其//他参数con
_斯洛伐克·2024-02-08 23:10

Vue 生命周期

请求接口一般放在哪个生命周期Vue2生命周期运行解析源码解析初始化阶段模板编译阶段挂载阶段mountComponent()Watcher_update()销毁阶段什么时候会调用$destroy()二、Vue3
fmk1023·2024-02-08 20:32

Pinia学习笔记

defineStore定义一个StorestoreToRefs解构store改变状态替换state订阅状态Pinia优势Pinia是一个全新的Vue状态管理库，是Vuex的代替者，尤雨溪强势推荐Vue2和Vue3
fmk1023·2024-02-08 20:32

猫头虎分享已解决Bug || Vue3报错: Failed to fetch dynamically imported module

文章目录猫头虎分享已解决Bug||Vue3报错:Failedtofe
猫头虎-前端技术·2024-02-08 19:37

【JavaWeb】头条新闻纯JavaWeb项目实现 项目搭建 数据库工具类导入 跨域问题 Postman 第一期 (前端Vue3+Vite)

文章目录一、项目简介1.1微头条业务简介1.2技术栈介绍二、项目部署三、准备工具类3.1异步响应规范格式类3.2MD5加密工具类3.3JDBCUtil连接池工具类3.4JwtHelper工具类3.4JSON转换的WEBUtil工具类四、准备各层的接口和实现类4.1准备实体类和VO对象4.2DAO层接口和实现类4.3Service层接口和实现类4.4Controller层接口和实现类4.4.1Por
道格维克·2024-02-08 19:51

vue3 之 商城项目—home

home—整体结构搭建根据上面五个模块建目录图如下：home/index.vueimportHomeCategoryfrom'./components/HomeCategory.vue'importHomeBannerfrom'./components/HomeBanner.vue'importHomeNewfrom'./components/HomeNew.vue'importHomeHotfr
jiojio在学习勒·2024-02-08 18:20

vue3 之 商城项目—二级分类

二级分类功能描述配置二级路由准备组件模版">首页居家居家生活用品.bread-container{padding:25px0;color:#666;}.sub-container{padding:20px10px;background-color:#fff;.body{display:flex;flex-wrap:wrap;padding:010px;}.goods-item{display:bl
jiojio在学习勒·2024-02-08 18:20

vue3 之 商城项目—layout静态模版结构搭建

layout—模块静态模版搭建一般情况下我们会有nav区域，header区域，二级路由出口区域以及footer区域，如图我们在开发的时候先把大模块搭建起来，再一步一步填充小模块在layout下建文件，目录如下在index.vue中把上面文件引入进来importLayoutNavfrom'./components/LayoutNav.vue'importLayoutHeaderfrom'./comp
jiojio在学习勒·2024-02-08 18:50

vue3 之 商城项目—一级分类

整体认识和路由配置场景：点击哪个分类跳转到对应的路由页面，路由传对应的参数router/index.jsimport{createRouter,createWebHashHistory}from'vue-router'importLayoutfrom'@/views/Layout/index.vue'importHomefrom'@/views/Home/index.vue'importCateg
jiojio在学习勒·2024-02-08 18:47

Vue + Element UI el-table + sortablejs 行、列拖拽排序

实现ElementUI中的el-table表格组件的行和列的拖拽排序使用Vue3+ElementPlusUI+sortablejs安装sortablejspnpminstallsortablejs行拖拽基本实现效果
也许明天 '·2024-02-08 18:06

Vue3入门到实战笔记05--路由

使用路由需要做的事情：1.确定好导航区、展示区2.请来路由器3.制定路由的具体规则（什么路径、对应着什么组件）4.形成一个一个的.vue1、基本使用步骤在cmd窗口安装:npmivue-router在src当中创建一个router文件夹，并在其中添加一个index.ts文件为路由器配置文件，相关配置参考如下：import{createRouter,createWebHistory}from'vue
jxncxgx·2024-02-08 18:06

vue3.x 快速原型开发

快速原型开发你可以使用vueserve和vuebuild命令对单个*.vue文件进行快速原型开发，不过这需要先额外安装一个全局的扩展：npminstall-g@vue/cli-service-globalvueserve的缺点就是它需要安装全局依赖，这使得它在不同机器上的一致性不能得到保证。因此这只适用于快速原型开发。vueserveUsage:serve[options][entry]在开发环境
木白_0227·2024-02-08 18:06

vue3进阶(四)——export function导出定义数据和接口数据 &封装el-select组件 & 获取sessionStorage中的基准地址apiUrl & watch和toRefs写法

vue3进阶(四)——exportfunction导出定义数据和接口数据&封装el-select组件&获取sessionStorage中的基准地址apiUrl&watch和toRefs写法7、引入的方法和接口数据
viceen·2024-02-08 18:56

vue3 vant 高德地图选择位置

实现目标：h5实现位置的搜索，地图任意选点，获取经纬度及位置信息；第一步：安装@amap/amap-jsapi-loader插件：npmi@amap/amap-jsapi-loader--save;第二步：搜索import{reactive,toRefs,onMounted}from'vue';importAMapLoaderfrom'@amap/amap-jsapi-loader';import
web老张头·2024-02-08 18:55

vue3笔记十四(vue3自定义全局函数及变量、css新特性)

1、globalPropertiesvue3中没有Prototype属性，使用app.config.globalProperties去替代//vue2中Vue.prototype.
·某某··2024-02-08 18:55

Vue3 定义全局函数和变量

globalProperties由于Vue3没有Prototype属性使用app.config.globalProperties代替然后去定义变量和函数//man.tsimport{createApp}
是小张呀！·2024-02-08 18:55

vue3全局常量定义及使用

vue2定义全局变量可以参考以下文章Vue项目常量的使用vue3中需要适量修改一下一、创建常量文件在src下创建constant文件夹，用于存放全局常量相关配置，创建好后在其内创建module文件夹，用于存放常量文件
我是小菜鸟*·2024-02-08 18:54

vue3中全局定义函数

场景：有时候像字典库这种，前端可能很多地方都会用到，下拉框啊，状态的回显等等；没有必要每个用到字典库的地方都去调用字典库接口；思路：所以把字典库存储到Vuex里面，封装个全局函数，需要什么类型字典，过滤一下；就很方便一。新建文件globalFun>>index.ts定义全局函数//这里引入vueximportstorefrom'../store'exportdefault{//定义过滤字典库函数g
一行代码上晴天·2024-02-08 18:54
上一页 9 10 11 12 13 14 15 16 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他