一方通行的博客

VUE3.0学习系列随笔（十）：省市区选择组件1、数据来源使用的依赖数据为：element-china-area-data，总共有六种数据模式详情请参考官网为：https://www.npmjs.com/package/element-china-area-data（1）命令行窗口安装依赖，命令为：npm install element-china-area-data -S（2）Vue3.0 UI管理界面安装：数据格式为：2、采用ElementUI-plus实现（1）采用el-cas

VUE3.0学习系列随笔（九）：防止按键多次点击多次触发事件按键在点击过程中，如果不加以限制，就会出现多次点击多次生效的情况。本文主要是实现VUE3.0中防止按键多次点击触发事件。演示效果为：1、定义全局按键限制函数新建common文件夹和common.js文件存放全局限制函数，函数代码为：// 防止处理多次点击全局函数// methods是点击后需要执行的函数， param是函数需要传的参数，可传可不传function noMulClicks (methods, param) { con

VUE3.0学习系列随笔（八）：实现导航守卫模式的个人登录界面本文所使用到的VUE3.0依赖：链接路径管理（vue-router）：4.0版本Vue状态管理（vuex）：4.0版本前端UI渲染管理（element-plus）：1.0.2-beta.30版本这些依赖可以通过VUE3.0 UI管理界面进行安装，安装方式见博客：https://blog.csdn.net/qq_26666947/article/details/113105946演示效果1、登录界面登录界面一切从简，效果为：

VUE3.0学习系列随笔（七）：定义单个VUE页面的背景图VUE属于单页面应用，如果直接采用CSS设置Body的背景图，会让造成所有的VUE页面都会被设置同一个背景图，因此需要采用另外的方式来设置单个页面的背景图，本文采用js动态设置单个VUE页面的背景图，整个效果如下图：1、主要思路主要是利用VUE3.0的生命周期钩子函数mounted()和beforeUnmount()。mounted()是在实例被挂载后调用，beforeUnmount()是在在卸载组件实例之前调用。1、进入VUE页面，执行m

VUE3.0学习系列随笔（六）：ElemenUI的安装和使用经过实际测试，VUE2.0版本对应的ElementUI并不适用于VUE3.0，需要将安装版本更换为：Element-Plus，官网地址为：https://element-plus.gitee.io/#/zh-CN/guide/design，Element-Plus可以完美支持VUE3.0。1、Element-Plus安装（1）Vue3.0 UI管理界面安装在依赖中搜做element-plus，即可找到依赖包，点击安装即可（2）命令行界面

VUE3.0学习系列随笔（五）：自定义组件使用VUE2.0和VUE3.0虽然在工程目录结构上存在较大差异，但是具体的代码实现逻辑相同，本文所使用的自定义组件方法，同样适用于VUE2.0。1、无参子组件的自定义和调用（1）定义无参子组件自定义组件已办存放在VUE工程结构的component文件夹下，新建自定义组件的方式和新建普通vue文件一样，整个VUE代码结构，本文自定义head组件，主要是作为页面的顶部div使用，代码如下：<template> <div class="he

VUE3.0学习系列随笔（四）：VUE-UI管理界面使用之依赖和插件管理VUE3.0 UI管理界面的运行项目见博客：https://blog.csdn.net/qq_26666947/article/details/112986393本节是主要介绍VUE3.0 ui界面安装依赖和插件的使用方法。1、依赖管理主界面VUE3.0-UI的依赖界面主要包括展示包依赖，安装和卸载包依赖。包依赖包含用户自定义安装的包和项目默认包。以element-ui为例，展示VUE3.0-UI安装包依赖的全过程（1）进

VUE3.0学习系列随笔（三）：VUE-UI管理界面使用vue-ui是VUE3.0中新增的项目管理可视化工具，在这个工具中，我们可以管理当前项目的启动、编译和打包，以及查看项目的运行状态，这走

VUE项目学习系列博文VUE项目学习（1）VUE项目学习（一）：搭建VUE前端项目（2）VUE项目学习（二）：学习项目文件结构（3）VUE项目学习（三）：win10版nginx部署vue项目（4）VUE项目学习（四）：编写个人页面和配置路由（5）VUE项目学习（五）：引用echarts组件VUE项目学习笔记（1）VUE项目学习笔记：关闭代码检查（2）VUE项目学习笔记：页面无法铺满整个屏幕VUE项目代码持续更新整个项目所在的GitHub地址：https://github.com/Cod

VUE3.0学习系列随笔（二）：VUE3.0和VUE2.0工程结构对比VUE3.0相对于VUE2.0的提升，最显著的特点在于：文件目录结构的优化。1、VUE2.0初始工程结构VUE2.0工程目录中存在构建工程配置目录、环境配置目录，静态资源存放目录，以及各种功能配置文件，而且index.html主页也是存放于根目录之中，在加入个人配置的组件、页面和路由配置文件之后，工程结构会比较冗杂繁多。2、VUE3.0初始工程结构VUE3.0目录工程极大简化了项目结构，将修改频率极低的环境配置文件目录和构建工

VUE3.0学习系列随笔（一）：VUE3.0项目初始化1、VUE3.0简介VUE3.0相对于VUE2.0的提升主要有以下几点：Performance：性能更比Vue 2.0强。Tree shaking support：可以将无用模块“剪辑”，仅打包需要的。Composition API：组合API Fragment, Teleport,Suspense：“碎片”，Teleport即Protal传送门，“悬念”Better TypeScript support：更优秀的Ts支持Custom