vue前端
文章平均质量分 77
vue2, vue3学习比较,案例,demo等
twinkle||cll
More interest,less interests (多一些兴趣爱好的向往,少一些功名利禄的追求)
展开
-
unplugin-vue-components 不能识别组件的自动导入的类型 (pnpm)
是一款能帮助组件自动导入的库,简单点的说,你不需要使用这行语句也能实现导入的效果。等同于以下效果。原创 2023-01-18 10:23:46 · 2011 阅读 · 1 评论 -
vue3 组件初始化流程(vue3 源码系列)
学习完成响应式系统后,咋们来看看vue3组件的初始化流程既然是看vue组件的初始化流程,咋们先来创建基本的代码,跑跑流程(在app.vue中写入以下内容,来跑流程)import { h, ref } from "vue";export default { name: 'App', setup() { const count = ref(0); return { count }; }, render() { return h('div.原创 2022-05-30 23:00:00 · 3158 阅读 · 2 评论 -
vue3 响应式数据库—— reactive
请仔细阅读下面代码,思考vue3是如何做响应式数据的?let temp// reactive 是使对象变成一个代理 const counter = reactive({ num: 0 }); // effect主要职责是开启依赖收集,等待get的调用完成正常的依赖存储 effect(() => (temp = counter.num)); // 触发更新 counter.num = 1;在这里是不是有的人要说,咋们在日常开发中,直接在 vue 模板上里面写一个ref 自动帮我.原创 2022-05-27 09:12:42 · 969 阅读 · 0 评论 -
大文件处理(上传,下载)思考
文件处理一直都是前端人的心头病,如何控制好文件大小,文件太大上传不了,文件下载时间太长,tcp直接给断开了😱😱😱等效果为了方便大家有意义的学习,这里就先放效果图,如果不满足直接返回就行,不浪费大家的时间。文件上传文件上传实现,分片上传,暂停上传,恢复上传,文件合并等文件下载为了方便测试,我上传了1个1g的大文件拿来下载,前端用的是流的方式来保存文件的,具体的可以看这个api TransformStream正文本项目的地址是: github.com/cll123456/d….原创 2022-05-21 23:00:00 · 1809 阅读 · 5 评论 -
unocss + vite + varlet 搭建移动端
unocss 是什么,不清楚的可以看这边 重新构想原子化 CSS,整体的架构vue3 + setup + ts, vw + rem等来搭建的移动端项目tslint, prettier来控制代码的格式simple-git-hook来控制代码提交的规范deploy.sh 来实现自动部署unocss 及其生态来实现css和icon图标的按需加载,不需要使用js就能引入图标记录滚动条位置,监听物理键返回,路由动画等都是hooks的形式存在项目效果图代码地址: github.com/cll123原创 2022-04-10 11:05:18 · 3760 阅读 · 1 评论 -
vue3-ssr-webpack-vuex-vue-router 项目搭建过程分享
引言2022年都过去两月了,是时候开始学起来了。从哪里开始呢?那就从未来的趋势 ssr来动手吧,现在vue3也出来这么久了,ssr怎么搭建呢?那咋就一起来康康吧????。项目源码:github.com/cll123456/v… 项目演示地址:chenliangliang.top:9022/ (这个地址不能保证长期有效,但是上面的源码地址一般不会删除,有兴趣的可以直接clone源码跑起来);正文流程ssr的流程,有一张经典的图,如下:从上面的这张图咋们可以得出以下结论:图中包含原创 2022-02-22 15:44:12 · 1902 阅读 · 0 评论 -
vue2,vue3移动端实现表格固定和首列固定
好久都没有写文章了,上个月业务繁忙,事情比较多,最近在做移动端中发现了一个好玩的事情,那就是移动端中实现表格,固定列有哪些方法:1. position: sticky粘性布局,这个属性也可以实现行和列的固定,在pc端上没有啥问题,但是在手机端上会抖动。使用注意事项:要求父级不能够使用overflow:auto,否则不生效。牛刀小试<!DOCTYPE html><html><head> <meta charset="UTF-8">.原创 2022-01-07 15:06:55 · 7533 阅读 · 11 评论 -
vue2 响应式原理保姆级别
面试题:请阐述vue2响应式原理vue官方阐述:cn.vuejs.org/v2/guide/re…响应式数据的最终目标,是当对象本身或对象属性发生变化时,将会运行一些函数,最常见的就是render函数。在具体实现上,vue用到了几个核心部件:Observer:DepWatcherSchedulerObserverObserver要实现的目标非常简单,就是把一个普通的对象转换为响应式的对象为了实现这一点,Observer把对象的每个属性通过Object.defineProp..原创 2021-11-24 23:00:00 · 711 阅读 · 0 评论 -
vue2 Vue3 v-model 原理
面试题:请阐述一下 v-model 的原理v-model即可以作用于表单元素,又可作用于自定义组件,无论是哪一种情况(vue2, vue3),它都是一个语法糖,最终会生成一个属性和一个事件。当其作用于表单元素时,vue会根据作用的表单元素类型而生成合适的属性和事件。例如:text 和 textarea 元素使用 value property 和 input 事件;checkbox 和 radio 使用 checked pro..原创 2021-11-19 08:56:45 · 3246 阅读 · 0 评论 -
保姆级别Vue2组件通信(面试常问)
在面试过程中,经常会被面试官问的鸦雀无言,但是如果我们日常积累些知识点,等到被面试的时候,就可以和面试官来交流技术。父子组件通信绝大部分vue本身提供的通信方式,都是父子组件通信prop最常见的组件通信方式之一,由父组件传递到子组件父组件<template> <div id="app"> <HelloWorld msg="Welcome to Your Vue.js App" /> </div><..原创 2021-11-15 17:19:56 · 284 阅读 · 0 评论 -
请你阐述一下对vue虚拟dom的理解
面试题:请你阐述一下对vue虚拟dom的理解1. 什么是虚拟dom?虚拟dom本质上就是一个普通的JS对象,用于描述视图的界面结构 如下:{tag: 'div',props: { id: 'app'},chidren: [ { tag: 'p', props: { className: 'text' }, chidren: [], text: 'hello world!!!' }]}复制代码生成的...原创 2021-11-15 17:17:36 · 314 阅读 · 0 评论 -
手把手写一个vue3的组件库,在指定dom中生成水印
在工作的途中,很多时候会发现一些特别使用的组件。我们需要把我们有用的组件分享给大家,如果大家都这么做,何愁国家的科技实力不强。(也可能导致行业更加内卷)效果本次手把手记录的是一个vue3的给dom生成水印的指令,这里把他封装成一个组件,下一次直接拉下来就可以使用。这个可以用在移动端或者是pc端上防止数据被人截屏。效果如下:源码仓库:github.com/cll123456/v…准备工作这里我们可以思考下,写一个组件的步骤是啥?第一步:配置环境配置环...原创 2021-11-04 21:43:55 · 1039 阅读 · 3 评论 -
若依V3 | RuoYi-Vue3-JS Doc
若依V3 #WARNING首先明确一个问题,这里不是官方的。我个人并不是若依团队的成员,只是一个开发爱好者。官方请查看动机 #个人比较喜欢vue3的开发方式,目前也是全职前端,使用vue来作为技术站开发。在这里使用若依,并没有打算抄袭人家的成果,只是偶然在gitee的评价中看到,官方目前没有打算使用Vue3来更新前端。TIP既然人家现在没有时间,那就我先来试试水。看看会不会存在重大问题,顺便让自己对知识的理解更加深刻!!! ???? ???? ``项目结构 #本项目的后端是若依的后台,前台使用的是Vite,原创 2021-10-24 21:39:39 · 4460 阅读 · 6 评论 -
使用vue-demi来开发一个vue2和vue3组件
初衷写这个包的主要目的是为了使用vue-demi来写vue2和vue3的公用组件。简单说一下自己的开发感受吧。不没有想象中的那么顺利(可能是自己没有理解到位); 使用vue-demi 里面目前来说只能vue2和vue3选择一种来进行测试,如果你想在同一个项目中对vue2和vue3来切换测试,我没有做到,会有些问题。比如: 我曾在项目中建立了一个examplev2和examplev3来进行项目测试,vue3正常启动,vue2就会启动不了。我使用的是yarn workspace来进行搭建的。所以全局只能有一个原创 2021-09-18 10:44:43 · 2951 阅读 · 0 评论 -
axios 传递参数的方式(data 与 params 的区别)
axios 大家都非常的清楚,一个既可以用于客户端或者 服务端发送http请求的库。但是在前后端联调的时候有的时候会很难受,所以这里我来做一个总结。希望能帮助到有缘人。参数的传递方式参数传递一般有两种,一种是 使用 params, 另一种是 data的方式,有很多的时候我们看到的前端代码是这样的。get 请求axios({ method: 'GET', url: 'xxxxx', params: param, })或者 axios({ method: .原创 2021-07-21 14:40:26 · 35421 阅读 · 21 评论 -
vue正确的使用函数的防抖与节流
函数的防抖与节流是一直的面试话题。对于函数防抖与节流的写法,大家都可能比较熟悉,但是在vue中使用函数的防抖或者节流,这里是有一个小插曲的哦。vue中的正确使用姿势在这个地方相信好多人的使用方式,会直接定义函数,然后在函数中使用debounce的 ,这样的使用方法是错误的。为啥呢?这个和vue的事件绑定原理有关,这里不详细介绍。如果直接在函数体内部使用的话,最后的结果是,一个匿名的立即执行函数来进行执行,这样是不对的。详细参考原理函数的防抖函数的防抖是在多少时间后再来执行函数,我们.原创 2021-05-16 23:25:39 · 3027 阅读 · 22 评论 -
vue2 el-select 改造成下拉树,支持数据回显
下拉树 就是一个下拉框里面的options里面换成一棵树的形状。本人业务需要一个这样的组件,我也懒得去发布一个组件到npm库,毕竟现在vue3出来了,这个组件只适合vue2 并且是element ui的基础,限制条件有点多。所以在这里做个笔记,有需要的自己copy 代码到自己本地,就行。效果下面的底色不要在意哈使用方式模板文件 <select-tree :value="test" :options="options" .原创 2021-04-08 13:14:04 · 2479 阅读 · 0 评论 -
vue3 + ts + vite + scss 搭建移动端的H5
大家都知道,移动端喝pc端的区别在于的是,移动端怎么做适配。还有vue3 和 ts 如何进行结合。本人抱着more interest, less interests的目的。来记录自己在开发过程中的一些公共的方面。来帮助更多的技术人.效果作为移动端最关键的页面兼容问题,在本项目是已经解决了的。源码地址: https://github.com/cll123456/vue3-ts-mobile.git演示地址: https://cll123456.github.io/vue3-ts-mobile/.原创 2021-03-26 19:29:15 · 5187 阅读 · 0 评论 -
vue2-ts-template vue2后台管理系统模板
项目简介这是一个简单的vue2 和 typescript 的后台管理模板。在使用Vue 的过程中,许多的同学和我一样希望有一个简单一点的模板,不需要太多的内容,懒得去删除那些不符合我们业务逻辑的部分。由于本人业务需求需要兼容ie10(该项目已经完成了ie10的兼容),所以使用vue2和ts 来构建一个管理后台的框架,里面只有一个登录和主页,主页实现了菜单的跳转,面包屑等,和一些基本的功能。项目地址https://github.com/cll123456/vue2-ts-template.git演示地原创 2021-03-10 13:10:04 · 1857 阅读 · 6 评论 -
修改 elementui nav 下拉菜单内部样式
先上效果我抽离出了一个scss 文件,如下:自己动手,把$xxx 变量改成自己对应的就行<style lang="scss">// 修改弹出层激活的样式.el-menu--popup > div:has(.is-active){ background-color: $subColor !important; border-left: 2px solid #ed1c24 !important;}// 修改弹出层hover样式.el-menu--popup >原创 2021-03-04 21:09:04 · 3076 阅读 · 4 评论 -
[vuex] vuex requires a Promise polyfill in this browser. vue2兼容ie
vue2 兼容ie10因为公司的业务要求,需要使用ie级别的浏览器。这里大家先别喷,我又不是老板,我也无能为力。只能去做。、使用脚手架搭建的项目vue-cli 是一个官方推荐的vue项目脚手架,搭建项目就不用那么费劲了。但是搭建好的项目是一般可以ie9的浏览器中打开的(这里指的是vue2)。ie9主要特别蛋疼的地方在于不能使用弹性盒模型。所以一直兼容ie都是从ie10开始进行兼容的。现在项目建立好,chrom中打开正常,但是在ie中打开如下:一开始还报各种各样搞心态的问题。解决办法大家原创 2021-03-04 20:52:54 · 342 阅读 · 3 评论 -
vue img 图片需要自定义请求头
在做项目的时候,展示图片可能会用到nginx 的代理来进行展示,然而有些运维小哥哥喜欢展示技术,在展示图片的时候还需要前提传一个请求头,也就是账号和密码。在postman展示的情况如下:如果不使用这种方式,页面直接展示401没有权限。解决方法运维小哥哥一回头,搞得菜鸡的我就加班搞这个玩意,最后总结解决方法如下:postman 请求源码img标签请求携带请求头我们现在跨域思考一下,img标签是没有可以自定义请求头的。网上说的那些,个人感觉都不行,一个爬一个。我的解决办法分析:.原创 2021-02-03 10:07:58 · 6677 阅读 · 5 评论 -
vue3 + node 实战(实现图片操作功能)总结
vue3 + node 实战(实现图片操作功能)总结上效果演示地址源码地址使用的技术栈前端vite: 一个刚出的构建工具,使用过后都说好,我是使用vite 来进行构建前端项目的。如何构建项目vue3: 这个也是刚出不久,许多生态也在慢慢的完善,关于vue2 升级到vue3的不同,可以查看element-plus:这是element团队推出支持vue3的ui组件库,我写文章这会儿还是测试版本,只是为了体验一下,顺便提点bug(感受一下不一样的bug),哈哈vue-router: 支持vu原创 2021-01-20 12:26:08 · 977 阅读 · 0 评论 -
Property xxx was accessed during render but is not defined on instance
element-plus form ref 和 model值的关系感悟的记录elementui 是一个优秀的前端ui, 现在vue3 出来了,本人也想抓紧时间,赶紧给自己充电加油。现在的element-plus 是一个beta版本,我安装的element-plus 是 "^1.0.1-beta.24",遇到这个问题的时候是 "^1.0.1-beta.18" 这个版本,反正都是beta版本,只是解决了一些问题。我在element-plus 的 issue 里面看到了form表单中 ref 和 model原创 2021-01-12 15:18:33 · 107429 阅读 · 14 评论 -
vue3 使用第三方插件问题 bundler to alias “vue“ to “vue/dist/vue.esm-bundler.js
vue3 使用第三方插件问题[Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js"上效果,解决问题问题描述:[Vue warn]: Component provided template opt原创 2021-01-12 09:33:18 · 15658 阅读 · 14 评论 -
vite + vue3 + element-plus + axios + vueRouter + vuex + scss 搭建项目
vite + vue3 + element-plus + axios + vueRouter + vuex + scss 搭建项目准备工作1.先搭建一个vue工程,这里有两种办法,一种是使用vue-cli ,另一种是使用vite(一种新的构建工具),具体搭建 传送门2.搭建好项目后,我们就可以安装对应的库了,这里需要安装以下的这些库:npm install --save axios 这个库不需要说使用next版本,vue升级和发起http请求没有直接的关系,所以axios不用说要不要升级安装原创 2021-01-07 17:50:32 · 3724 阅读 · 0 评论 -
vue vue3 实现滚动进度条,斑马纹进度条
vue实现进度条效果如下使用方法 <div style="width: 400px;text-align: center; margin: 0 auto"> <my-process :show-txt="true" txt="50%完成" :pcs-height="20" process-dept="50"/> <my-process :pcs-height="20" process-dept="50" bg-color="#f40"/>原创 2021-01-07 15:56:19 · 2315 阅读 · 0 评论 -
vite 构建vue3 项目配置文件的详情配置
建立配置文件在根目录下面建立一个vite.config.js文件,在里面导出一个对象或者是一个函数返回一个对象都可以,例如下下面:export default { 配置1:'', 配置2: '',}或者:export default () => { 配置1:'', 配置2: '',}个人常用的配置文件const path = require('path')export default function () { return { // 代理,最重要原创 2020-12-25 10:13:06 · 22158 阅读 · 12 评论 -
vue 使用axios 并且实现开发环境的跨域
使用axios的不漏如下:1.安装axios的包, npm install axios, vue-axios -S2.把axios 封装到你想要的工具类中、3.webpack.config.js 在dev server的环境下进行配置跨域4.main.js 里面使用Vueaxios 和你在封装axios 里面导出的function或者是class5.页面调用即可代码如下图片:1.安装...原创 2019-10-17 09:19:37 · 914 阅读 · 2 评论 -
vue2 和 vue3 响应式 代码实现原理
对于做vue的响应式,问自己的内心的几个问题如下:1)怎么做的数据劫持,vue2和 vue3的区别?答: vue2的数据劫持是使用是es5的 Object.defineProperty的setter 和getter方法来对对于数据的读取和设置的, 但是这里有一个最大的缺陷是 需要遍历对象的每一个属性进行setter 和 getter,对于大数据量,或者说是复杂的组件不友好,还有就是对象里面新增属性或者说是删除对象属性做不了数据劫持,所以vue2.0提出了 vue.set和vue.set和 vue原创 2020-11-03 22:09:05 · 967 阅读 · 0 评论 -
vue2升级到 Vue3的异同(入门须知)
vue2升级到Vue3的异同构建项目不一样, 具体查看 构建项目main.js 的不一样vue2 中的mian.js 里面导入的是vue 实例,vue 3中的main.js 如下的结构:注意: 由于vue3.0 使用的是 import {createApp} from ‘vue’ 而不是像vue2.0的import Vuefrom ‘vue’。因此之前使用的ui框架以及第三方包可能会因为不支持vue3.0而报错。this 问题:在vue2中使用this打印的结果是当前组件实例对象原创 2020-10-15 19:04:29 · 3695 阅读 · 0 评论 -
创建项目vue3项目
创建Vue3的项目目前主要有两种方式:1.使用@vue/cli 创建,但是版本在4.5.7左右的可以创建2.使用vite(一个新的构建工具)使用@vue/cli创建1.先更新到@vue/cli 的版本到 4.5.7更新方法: 点击这里创建方式如下:vue create 项目名称 如vue create Vue3-app-cli2.我们选中(按上下键来切换选项)Vue3 或者自定义都可以,测试使用自定义4.自定义一些vue的常用拓展创建成功后,就可以打开了,如下(默认是80的.原创 2020-10-15 10:50:23 · 3994 阅读 · 0 评论 -
vue 脚手架 无法卸载全局的脚手架
今天想通过更新@vue/cli (4.2.2 --> 4.5.7) 来安装一个vue3的项目来练练手,但是遇到一个问题,脚手架一直都无法更新到最新版本,报错信息如下图:排查问题思路如下:npm 的版本问题, 我们使用 npm install -g npm 来更新npm 到最新版本,结果重复卸载@vue/cli 安装@vue/cli 还是不行2.node 的默认安装问题,如果你的node 安装不是采用的默认安装,在电脑里面会有两个全局的node_moudle, 一个是在c盘,另一个是在你安装的原创 2020-10-15 10:14:25 · 5180 阅读 · 10 评论 -
vue 手动实现小喇叭,待动画效果
<template> <div class="trumpet-div"> <div class="box"> <div class="trumpet-back"></div> <div class="trumpet-forward"></div> <div class="wifi-symbol">原创 2020-07-03 18:11:58 · 1456 阅读 · 0 评论 -
css3 transition 实现炫酷钢琴键 炫酷
<style> * { margin: 0; padding: 0; } ul { list-style: none; } .wrapper { width: 100vw; height: 100vh; background: #000; ...原创 2020-05-07 17:47:54 · 472 阅读 · 0 评论 -
flex实现流式布局, css3
<style> .wrapper { width: 400px; height: 340px; margin: 50px auto; border: 1px solid #dedede; resize: both; overflow: hidden; }...原创 2020-05-05 17:34:20 · 2026 阅读 · 0 评论 -
你不知道的flex布局 css3 flex 基础
ie6混杂模式的盒模型: css2 的boxwidth = width = border * 2 + padding *2 ie6 的boxWidth = width; contentWidth = width - border *2 - padding * 2 使用ie6混杂模型(怪异模型) box-sizing: border-box ie6的解决问题...原创 2020-05-05 16:55:28 · 248 阅读 · 0 评论 -
css3 实现elementui的手风琴效果
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>css...原创 2020-05-02 16:26:36 · 990 阅读 · 0 评论 -
Vue基础,简单的指令,webpack3升级到webpack4
Vue 服务端渲染,如果不是先服务端渲染的话会有两个问题无法进行seo,等待时间较长,等待js的加载。白屏时间比较长WebpackMerge 是用来合并webpack配置项的Vue-loader 的配置:Vue-style-loader 是当我们编写vue文件的时候对css的修改进行热加载功能Npm I rimraf – D 来删除已经打包的九文件ExtractCss 正式环境打包的...原创 2020-05-01 22:26:32 · 419 阅读 · 0 评论 -
vue不是内部或外部命令解决方法
vue不是内部或外部命令解决方法:1.npm config get prefix查看npm的全局路径是什么把路劲配到用户的环境变量中即可2.将这个路径配置在环境变量里或者是因为vue的查看为不是内部方法,需要做的是:在电脑中全局查找: ve.cmd 然后把该路径放到系统的环境变量中...原创 2020-05-01 22:24:49 · 874 阅读 · 0 评论