资浅程序媛，个人公众/头条/百家号：郑州小闲人，关注权限已向你开放

将vue、vue-router等的import语句删除，项目正常启动不报错。这款插件是前端大神Anthony Fu写的，非常实用。unplugin-auto-import的git地址。有兴趣的小伙伴可以到git上看，

Anthony Fu，在Git上的账号是antfu，是Vue和Vite核心成员，同时也是VueUse、Slidev几个开源项目的作者……，他的一些插件都是非常非常实用的！我们通常在项目中，需要手动引入自定义的各种组件，如果涉及的页面功能比较多的话，光是import的长度都能赶上春联了。这就是前端大神Anthony Fu写的的非常好用的插件，其实已经被vite官方收录了。将你引入自定义组件的import*****之类的语句，去掉，依旧正常运行。如果，能有一个插件帮我们实现自动引入，是不是要谢天谢地了呢？

大概就是这样啦，至于到底要不要设置directoryAsNamespace​​​​​​​为true，就看你个人习惯啦。注：vue+ts项目，dts属性默认为true，因此在你不留意时，它就自动生成啦。将会自动生成components.d.ts文件，1同名加路径前缀，不同名也要加路径前缀。false时，就要多花点脑细胞想名字。如果有任何，欢迎友友们评论区留言……这几种情况，看一下，你应该就理解啦。true时，就需要引用时多敲点代码。当出现同名文件时，该怎么解决呢？下图这个例子，我用不同颜色区分了。

然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。之后我们将一步一步给这个框架基底添加基础的好用的工具，以便快捷开发。4、之后根据你的编码习惯或需要，选择【ts】或者【js】，点回车。3、回车之后，出现选择框架的提示，我们选择【vue】回车。1、选择一个文件夹，在vscode终端打开，输入命令【6、【cd rookiedemo】进入对应的工程目录。2、提示你输入项目名称之后，我这里设置的是【5、vite非常贴心，按照对应的提示，即可。

其实我觉得，基本上原生提供的功能已经满足日常使用了，除非你的需求的重度视频功能，然后对美观度有一定要求，如各大视频网站爱优腾+B。

官方创建的前端构建工具。

需注意：想创建vue3工程，对vue-cli版本有要求，必须确保vue-cli在4.5.0以上。

如果想实现自动播放，需要加autoplay属性，但是加了之后也可能出现无法自动播放的问题，还需要在加muted属性

需求说明 添加el-calendar组件 遍历日期，确定显示内容 上月本月点击事件 最终实现效果

之前我整理过一篇文章，Quill编辑器实现图片上传功能（戳链接可查看）但是想来那个是相当于自定义的更加简洁实用的工具栏toolbar，不过需要自定义的代码有些繁琐。再遇到类似功能时我就想着寻找一个更简单的办法，使toolbar用原生的，仅仅改变img的处理方式。注：上次quill是局部引用，这次是全局引用，不再赘述。两种方法各有优劣，各位看官，酌情使用。1、页面引入<!-- 富文本编辑器 --><el-form-item label="图文详情" prop="...

以前我用webstorm的时候搭建一个框架（想看戳蓝色链接即可）比较简单，因为好多事情webstorm都已经做好了，后来我由台式电脑转为笔记本运行webstorm有些吃力，然后我就转投VSCode，用它搭建项目时总是不顺手，后来在网上看到可以用VUE脚手架的可视化面板来搭建，感觉还能接受，记录一下。前提：VUE脚手架环境已经搭好1、cmd面板键入vue ui启动GUI之后浏览器跳转到相应地址即可2、选择文件夹创建新项目3、输入项目名称4、选择配置模式..

背景前端vue使用了qs对传递的参数进行序列化成URL的形式，以&进行拼接，但是我在进行图片功能文件上传时，后台以MultipartFile类型接收，一直提示文件为空，让我很无语。开窍于是开始漫长的度娘时光，网上也有很多不同的解释，病急乱投医，也试了很多方法，几经确定我的axios参数传递过程中也没有错误，我甚至开始怀疑是不是后台的问题。然后就看到了一个与众不同的解释：传递的文件流被qs进行了转换然后，我就加了一个判断，如果是文件流就不进行qs转换，问题遂得以解决main.js相

vue前台需要用户能看得懂的时间格式如常见的“2021-03-10 12:02:35”，但是后台数据库则需要时间格式如LocalDateTime（“2021-03-10T15:31:01”）或者Date类型的，如果数据不经过处理，直接显示，肯定可读性差。下边就介绍一下前台vue处理方式，就是在vue项目的main.js中创建一个过滤器，把时间格式化处理。Vue.filter('dataFormat', function (originVal) { const dt = new Date(ori

参考链接：https://blog.youkuaiyun.com/qq_34652478/article/details/1035305351、页面引入 import ElImageViewer from 'element-ui/packages/image/src/image-viewer'components添加：2、设置动作 <el-image-viewer v-if="detailVisible" :url-list="imgList" :on-close="clos...

之前试了两种方法1、vue预览本地pdf文件方法之a标签2、vue预览本地pdf文件方法之vue-pdf组件都不符合需求想要的效果方法1只是重新打开窗口，适用于pdf预览简单需求方法2因为是单页展现，还需要上一页下一页的切换，也不合适最后我试了一下iframe刚好满足我的需求废话不多说，直接上代码：最核心一句代码只需要一句代码<iframe :src="pdfSrc" frameborder="0" width="100%" height="100%" &g

照抄例子：https://www.cnblogs.com/steamed-twisted-roll/p/9648255.html1、npm安装npm install --save vue-pdf2、页面引入3、具体实现<div class="pdf" v-show="fileType === 'pdf'"><p class="arrow"> <span @click="changePdfPage(0)" class="turn"

1、pdf文件放在public文件下2、a标签a的样式可以根据需求自己设置，在此只简单说明问题<a target="_blank" href="/1.pdf">相关论文</a>同样的a标签如果换成word文档，则是下载效果<a target="_blank" href="/d1.docx">word</a>...

实战场景描述实际开发过程中，需要Tab切换不同类型的数据，如果是每个Tab表单是静态数据还好，但通常情况下基本上涉及的都是table数据，页面打开时，我们看到的是一个打开的Tab内容，但其实vue是把所有的内容都渲染了，只是其他都隐藏了，这种可能就会造成打开页面时因为需要同时加载多个数据而卡顿，最佳实现思路肯定是Tab切换时才进行实时加载。1、确定好每个Tab内容参考官网的例子改成我们的内容就好2、Tab切换事件今天的列子每个tab都涉及表格，为了方便后期维护和切换刷新，把每个T

实战场景描述我们在实际开发过程中，增删改查功能是最基础必不可少的，这里就少不了新增和编辑功能，通常都是点击按钮触发弹出框动作。基本上新增和编辑的表单是一致的，只不过一个是空的，而另一个需要赋原始值。因此抽出一个组件进行复用，会大大减小代码量。首先学会点击按钮触发弹出框动作：VUE弹窗加载另一个VUE页面1、el-table基本设置ActivityManage.vue全部代码：<template> <div class="mycontainer"&g

整体布局确定一下我们后台框架的整体布局，就来个基础经典的再看下实现之后的效果：接下来一步一步走：1、webstorm新建项目接下来就等系统创建好后直接npm run serve，我们得到了一个默认的vue项目2、在项目中引入Element-UI参考官方说明：我们进行npm安装安装完毕之后，我们在main.js中进行引入：参考官方说明：整体引入：3、利用el-container设置页面布局参考官方说明：考虑到我们的页.

先看下实现之后的效果：说下实现思路依旧是利用setInterval和setTimeout两个方法结合操作数据列表：先用push把第一个元素追加到末尾，再用shift删除掉第一个元素。可以理解为第一个做完事情又赶快跑到最后位置继续排队……如果把高度调高，就能更明显看到追加的过程，理解这个思路：完整页面代码：<template> <div class="marquee-wrap"> <ul class="marquee-list

一个小技巧让icon跳动起来

1、初始化参数2、获取当前时间3、mounted触发最终呈现效果：

需求：最近在做应急预案的vue页面，需要有上一步、下一步等功能题外话：感觉使用vue+Element-ui来做，真的是方便很多很多，思路清晰，代码简洁。如果是按照以前的写法，肯定是要多个上一步、下一步按钮，并且每个按钮都要用js写相应的click事件。当然最后呈现出来的代码还是要看个人能力的凝练程度。...

<div v-for="(item,index) in recordList" :class="{singleRecord:index%2==0,singleRecord2:index%2!=0}"> <div>{{item.title}}</div> <div>{{item.time}}</div> &...

需求：点击层与非点击层的样式不一样11、点击层与非点击层的不同样式：2、给div添加点击事件拓展：相同效果的另一种写法注意比较两种写法的不同，各种滋味自己体会

<template> <div style="position: relative;"> <p class="spans"><img src="../../assets/img/block-title-icon.png" alt=""><span class="tit">预警信息</span></p> <div v-if="!chuxians" ref="message" class="message.

我们引入Quill时是可以直接插入图片了，但是是Quill将图片转化成了base64格式，我们如果存数据库的话，肯定不是长久之计，而真正符合我们要求的便是图片上传之后返回图片路径，再插入图片1、点击图片小图标触发handler事件2、监听图片选择框的imgChange事件实现图片上传代码标红点是需要注意的，之前总是能上传成功，但是我insert的时候图片总是显示不出来，但是如果require一个已经存在的图片就可以正确显示，我感觉应该是异步造成的，因此设置了一个延时setTime

一个很典型的添加新闻功能，肯定离不了网页编辑器，然后有很多种选择，百度了大概说是quill和vue的兼容性比较好，网上也有很多在用，就跟风选择了！这是最终效果实现的过程肯定是有些曲折的，所以给各位指条康庄大道直接上全部代码：<template> <div id="app"> <div class="container"> <el-form label="添加新闻" :model="form" pr

可能是源于VUE前端新手吧（没办法，谁让公司没有专业前端，只能写后端的人硬着头皮去实现），这个问题花了将近两天的时间。最开始也是疯狂百度，是个相关网页都要去瞅一瞅，在这个过程中竟然有好多做出效果的都是参考花裤衩大神的，有兴趣的同学可以去看下我的代码也是比葫芦画瓢，实现思路大致都是一样的1、路由表在初始化的时候先设置好一些公共路由如登录页面2、利用v-for页面动态加载左侧菜单栏（因为我...

之前实现了一个功能VUE利用tree-transfer插件实现角色菜单动态设置在这个功能的基础上，进一步完善角色列表Uacter.vue页面，点击【菜单设置】按钮，弹出角色菜单MenuRole.vue页面，也就是说实现的是一个弹窗功能，只不过加载的vue页面说来惭愧，这是我应用vue的第4天，好多东西都不知道，然后就是现学现用首先肯定是找百度啊主要参考的列子：vue编辑、新增弹...

参考列子：Git示例及说明1、说明：菜单为多级菜单的父子级结构，Element里边的transfer只涉及到一级列表展现，不太符合预期，然后就百度，发现有人写了tree-transfer插件，刚好是我想要的效果，然后就往这个方向去实现，但是网上的列子吧，和git上的示例代码基本一样，要真正实现一个动态的完整功能，还是需要一步一步来的！2、npm下载插件，请参考Git示例3、页面引用...