vite创建vue3+ts项目为何选择vite：vite是一个基于Vue3单文件组件的非打包开发服务器，它做到了本地快速开发启动：快速的冷启动，不需要等待打包操作；即时的热模块更新，替换性能和模块数量的解耦让更新飞起；真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变。（平均一秒run）本文技术栈是vue3+vue-router+ts+vite+element-plus+pinia。初始化项目（1）在需要创建位置cmd目录下执行npminitvite@latest（2）输入项目名称（3）选择vue（（有时出现上下键不能选择，手动输入选项回车就行））（4）选择vue-ts（或者是选择语
vite创建vue3+ts项目为何选择vite：vite是一个基于Vue3单文件组件的非打包开发服务器，它做到了本地快速开发启动：快速的冷启动，不需要等待打包操作；即时的热模块更新，替换性能和模块数量的解耦让更新飞起；真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变。（平均一秒run）本文技术栈是vue3+vue-router+ts+vite+element-plus+pinia。初始化项目（1）在需要创建位置cmd目录下执行npminitvite@latest（2）输入项目名称（3）选择vue（（有时出现上下键不能选择，手动输入选项回车就行））（4）选择vue-ts（或者是选择语
vuex维护websocket并且进行心跳检测，断开进行重连等业务需求效果图（123张图分别为初始化连接，模拟网络断开进行重连，模拟网络恢复重新建立连接）需要连接点（维护点）一、登录调用方法vuex里index进行注册utils.js代码块，主要代码（备注会一行一行写清楚，请耐心查看）app.vue中再次调用getUserInfo方法，避免浏览器强制刷新导致断开连接页面使用（附效果图）难点在于连接成功后onopen、onmessage方法心跳检测，以及onclose、onerror断开连接后进行重连。这块还添加了自己本身的另一个短连接口业务，所以会难梳理。不懂的还请vuex里代码每行注释进行通
vuex维护websocket并且进行心跳检测，断开进行重连等业务需求效果图（123张图分别为初始化连接，模拟网络断开进行重连，模拟网络恢复重新建立连接）需要连接点（维护点）一、登录调用方法vuex里index进行注册utils.js代码块，主要代码（备注会一行一行写清楚，请耐心查看）app.vue中再次调用getUserInfo方法，避免浏览器强制刷新导致断开连接页面使用（附效果图）难点在于连接成功后onopen、onmessage方法心跳检测，以及onclose、onerror断开连接后进行重连。这块还添加了自己本身的另一个短连接口业务，所以会难梳理。不懂的还请vuex里代码每行注释进行通
由于一直使用的前端组件element-plus，所以需要经常看文档，但无奈官网实在不给力，经常报503或者404，大大影响效率和心情，忍无可忍就本地化部署一套解决此问题。百度了一下大多数都是使用vscode的liveserver,或者放到服务器上,均可使用。因为我自己测试需要访问很多文件或者视频资源，所以在本地搭建了一个tomcat服务器，不用上传到服务器，不用担心被删掉1. 安装tomcat9.0或者其他版本均可下载地址： ApacheTomcat®-ApacheTomcat9SoftwareDownloads 注意下载安装版本，这样方便知道tomcat的运行状态，也可以配置开机启动。 2.
由于一直使用的前端组件element-plus，所以需要经常看文档，但无奈官网实在不给力，经常报503或者404，大大影响效率和心情，忍无可忍就本地化部署一套解决此问题。百度了一下大多数都是使用vscode的liveserver,或者放到服务器上,均可使用。因为我自己测试需要访问很多文件或者视频资源，所以在本地搭建了一个tomcat服务器，不用上传到服务器，不用担心被删掉1. 安装tomcat9.0或者其他版本均可下载地址： ApacheTomcat®-ApacheTomcat9SoftwareDownloads 注意下载安装版本，这样方便知道tomcat的运行状态，也可以配置开机启动。 2.
文章目录前言一、el-colspanpush&pull响应式offset二、el-rowgutterjustifyalign总结前言拖拉了一晚,总结了一些Layout布局工具的使用方法.一、el-col本来打算先说row的…写完看了一遍感觉还是换过来的好(捂脸).el-col是el-row的子元素.在el-row添加style="flex-direction:column;"可以实现纵向排列el-col,在需要纵向布局时可以使用,横向col现在填满默认自动换行,不需要特别规定;span规定一个col占据24份中的多少份.倒也不是必加的属性…当el-row中仅有一个el-col时,该el-col
文章目录前言一、el-colspanpush&pull响应式offset二、el-rowgutterjustifyalign总结前言拖拉了一晚,总结了一些Layout布局工具的使用方法.一、el-col本来打算先说row的…写完看了一遍感觉还是换过来的好(捂脸).el-col是el-row的子元素.在el-row添加style="flex-direction:column;"可以实现纵向排列el-col,在需要纵向布局时可以使用,横向col现在填满默认自动换行,不需要特别规定;span规定一个col占据24份中的多少份.倒也不是必加的属性…当el-row中仅有一个el-col时,该el-col
一，何为Element UI 及 Element Plus？它们是前端框架。它是包含很多有自己风格的组件库。 Element目前有两个版本：element-ui 及element-plus两个版本。它将HTML的基础控件进行了封装，用户只需要调用这些控件就可以了。而不需要用CSS去调整风格。ElementUI是一款基于Vue2.x 的界面框架；Element Plus是一款基于Vue3.x 的界面框架；既然基于Vue，所以可以使用打包工具打包，例如Vite或WePack 当然Element UI与有React及Angular的版本了。二、Element UI 与 Element Plus区别？
一，何为Element UI 及 Element Plus？它们是前端框架。它是包含很多有自己风格的组件库。 Element目前有两个版本：element-ui 及element-plus两个版本。它将HTML的基础控件进行了封装，用户只需要调用这些控件就可以了。而不需要用CSS去调整风格。ElementUI是一款基于Vue2.x 的界面框架；Element Plus是一款基于Vue3.x 的界面框架；既然基于Vue，所以可以使用打包工具打包，例如Vite或WePack 当然Element UI与有React及Angular的版本了。二、Element UI 与 Element Plus区别？
