自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(55)
  • 收藏
  • 关注

原创 vue2源码

方法是为传入的data对象属性添加getter和setter的。proxy()方法是将vm[key]代理到的。

2023-06-02 12:36:39 429

原创 Grid布局

Grid 布局即网格布局,目前css布局方案中,网格布局可以算得上是最强大的布局方案了。它可以将网页分为一个个网格,然后利用这些网格组合做出各种各样的布局。比较擅长将一个页面划分为几个主要区域,以及定义这些区域的大小、位置、层次等关系,目前唯一一种 CSS 二维布局。在兼容性方面,截至 目前,几乎所有的浏览器都对 CSSGrid 提供了原生的支持。Grid布局优点:这是一个二维布局系统,最大优点就是可以同时处理列和行Grid 布局和 flex 布局。

2023-06-02 12:35:51 719

原创 Angular

但Angular 2就不同了,发布于2016年9月份,它是基于ES6来开发的,它的起点更高,整合了现代前端的各种先进理念,在框架、文档、工具等各个层面提供了全方位的支持。微语法解析器接收of,会将它的首字母大写(Of),然后加上属性的指令名(ngFor)前缀,它最终生成的名字是 ngFor 的输入属性(colors)在angular中,路由是非常重要的组成部分, 组件的实例化与销毁,模块的加载,组件的某些生命周期钩子的发起,都是与它有关。组件是拥有模板的控制器类,主要处理页面上的应用程序和逻辑的视图。

2023-06-02 12:35:03 292

原创 webpack打包

待更新。

2023-05-23 22:18:31 83

原创 vite配置

待更新。

2023-05-23 22:17:57 55

原创 vue2源码

方法是为传入的data对象属性添加getter和setter的。proxy()方法是将vm[key]代理到的。

2023-05-23 22:13:48 591

原创 Grid布局

Grid 布局即网格布局,目前css布局方案中,网格布局可以算得上是最强大的布局方案了。它可以将网页分为一个个网格,然后利用这些网格组合做出各种各样的布局。比较擅长将一个页面划分为几个主要区域,以及定义这些区域的大小、位置、层次等关系,目前唯一一种 CSS 二维布局。在兼容性方面,截至 目前,几乎所有的浏览器都对 CSSGrid 提供了原生的支持。Grid布局优点:这是一个二维布局系统,最大优点就是可以同时处理列和行Grid 布局和 flex 布局。

2023-05-23 22:03:28 400

原创 angular基础

​ 先引入表单的一些内置依赖import {//构造函数里注入FormBuilder constructor(private fb : FormBuilder) {} //错误提醒数据 formErrors = {//在组件类的初始化函数里对表单中的元素的校验进行定义,并调用表单的valueChanges方法,检测表单的输入的变化 ngOnInit() : void {if(!

2023-04-22 17:36:56 394

原创 vue-element-admin---打包

如图所以,方块越大,说明该文件占用的文件越大,文件越大,对于网络带宽和访问速度的要求就越高,这也就是我们优化的方向。我们可以使用vue-cli本身提供的性能分析工具,对我们开发的所有功能进行打包分析。,hr是特定的前缀地址,此时我们可以配置一个base属性,配置为hr。: #后面是路由路径,特点是前端访问,#后面的变化不会经过服务器。:正常的/访问模式,特点是后端访问,任意地址的变化都会访问服务器。进行依赖分析,分析出最大的包,方便我们进行观察和优化。将打包好的代码打包上线,并在nodejs中代理跨域。

2023-02-22 15:20:44 1157

原创 打包路由模式

我们会发现,其实域名是**www.xxxx/com**,hr是特定的前缀地址,此时我们可以配置一个base属性,配置为hr。改成history模式非常简单,只需要将路由的mode类型改成history即可。: #后面是路由路径,特点是前端访问,#后面的变化不会经过服务器。:正常的/访问模式,特点是后端访问,任意地址的变化都会访问服务器。此时,我们会发现地址已经变成我们想要的样子了。**目标**配置打包之前的路由模式。

2023-02-22 14:25:19 68

原创 多语言实现

当我们全局注册i18n的时候,每个组件都会拥有一个**$t**的方法,它会根据传入的key,自动的去寻找当前语言的文本,我们可以将左侧菜单变成多语言展示文本。注意:当文本的值为嵌套时,可以通过**$t(key1.key2.key3...)**的方式获取。第三步,在main.js中对挂载 i18n的插件,并设置element为当前的语言。第二步,需要单独一个多语言的实例化文件 src/lang/index.js。这里,针对英文和中文,我们可以提供两个不同的语言包。**目标**实现国际化语言切换。

2023-02-22 14:13:58 591

原创 动态主题的设置

来设置的,所以就不难实现动态换肤了,只要找到那几个颜色变量修改它就可以了。首先我们需要拿到通过 package.json 拿到 element-ui 的版本号,根据该版本号去请求相应的样式。拿到样式之后将样色,通过正则匹配和替换,将颜色变量替换成你需要的,之后动态添加 style 标签来覆盖原有的 css 样式。element-ui 2.0 版本之后所有的样式都是基于 SCSS 编写的,所有的颜色都是基于几个基础颜色。第二步, 放置于**layout/navbar.vue**中。: 实现动态主题的设置。

2023-02-22 13:25:36 380

原创 全屏插件的引用

第四步,放置于**layout/navbar.vue**中。第二步,封装全屏显示的插件··第三步,全局注册该组件。:实现页面的全屏功能。第一步,安装全局插件。

2023-02-22 13:19:52 54

原创 打印员工信息

首先,打印功能我们借助一个比较流行的插件。利用vue-print-nb进行打印。完成个人信息和工作信息的打印功能。完成详情到打印的跳转。最终,我们看到的效果。

2023-02-20 16:16:49 76

原创 图片地址生成二维码

在点击员工的图片时,显示弹层,并将图片地址转化成二维码。我们尝试将canvas标签放到dialog的弹层中。首先,需要安装生成二维码的插件。将图片地址生成二维码显示。

2023-02-20 15:32:10 299

原创 显示头像-elementUI--table

在 src\views\employees\index.vue 中的 table 上补充一列。此时可能部分图片无法正常显示(原因是图片本身地址有误,或者就是没有设置图片)此时可能部分图片无法正常显示(原因是图片本身地址有误,或者就是没有设置图片)组件使用者如果传递了图片,使用传递的图片。首先需要封装图片组件,然后进行全局注册。通过自定义列,将图片显示在表格中。如果没有传递图片,使用默认图片。通用封装-封装全局图片组件。在业务组件使用封装的组件。我们为什么要封装图片组件。在业务组件中封装组件。

2023-02-20 14:31:01 794

原创 图片保存到存储桶&&图片展示

使用自定义行为覆盖默认上传,注意一旦设置自定义上传行为之后,所有的上传操作都需要自己实现,比如数据处理,上传成功之后的后续操作,on-success 钩子函数也不会继续触发。实际工作中,秘钥属于敏感信息,不能直接放到前端存储,容易产生安全问题,更好的做法是把秘钥交给后端管理,前端通过调用接口先获取秘钥,有了秘钥之后再进行上传操作。服务器属于个人的,需要一定的权限才能自由上传图片,这个负责权限验证的其实就是秘钥,也就是说拥有秘钥是进行上传的必要条件。

2023-02-20 13:06:56 239

原创 组件-全局注册

在上一节,我们将业务组件在 components 中进行注册,定义成了局部组件,这种方式能够满足我们的业务,但这种写法会导致公用的组件需要在多个组件中分别进行注册,造成代码冗余。我们可以把这个配置对象, 封装到src/components/index.js中, 导出此对象到main.js中给Vue.use使用。如果传入Vue.use()里是一个函数, 直接传入Vue构造器, 直接执行此函数。Vue.use 可以接收一个对象,Vue.use(obj)掌握 Vue.use() 的用法,能用它来注册全局组件。

2023-02-18 00:05:27 284

原创 vue具名插槽

创建组件实现基本结构,新建 src\components\PageTools\index.vue 文件,,实现页面结构的创建。在 src\views\employees\index.vue 组件中使用封装的 PageTools 组件。在后续的业务开发中,我们经常会用到一个类似下图的工具栏,因此需要可以将其封装成公共组件,方便复用。我们定义了两个具名插槽,将来在使用组件的时候,只需要按照对应的插槽名称就可以在特定的位置插入内容。问: 左侧的提示消息 和 右侧按钮 在每个页面中并不是一致的,怎么处理呢?

2023-02-18 00:01:52 112

原创 mapAction使用

2、用mapActions的话怎么像里面传参数到actions里请求数据。怎么向...mapActions('*')里传参数?1、可以直接用 dispatch是可以的。

2023-02-16 20:43:52 116

原创 处理树形结构

pid 代表的是父级的 id,那是否可以使用 id 和 pid 形成嵌套关系呢?把我们第一天的函数, 封装成工具,单独放在 utils\index.js 下边。数据结构比较复杂,如果使用循环,会产生多层 for 循环,因此需要使用递归。如果以后工作本来是要层叠嵌套结构, 但是数组是扁平化的应该怎么办?把后端传过来的平铺数组数据,处理成 tree 组件需要的树形数据。在 src\utils\index.js 中进行代码的封装。如果不为空,pid 代表的是父级的 id,如果为空,说明是 1 级。

2023-02-15 20:17:00 60

原创 默认插槽 内部数据自定义模板渲染 scope.data直接key解构赋值变量也是data(对应数据对象)

实现结构的复用 (看功能操作区域部分标签代码)

2023-02-15 18:28:03 99

原创 watch都可以侦听哪些东西?

【代码】watch都可以侦听哪些东西?

2023-02-15 18:19:28 57

原创 添加子部门-隐藏组件

views/departments/components/departDialog.vue, 弹出框组件里点击按钮绑定事件关闭弹窗。子组件时, 恰当时机this.$emit('update:属性名', 传给父变量的值)点击遮罩层, 点击右上角×按钮, 键盘的esc按键, 点击确定和取消按钮自己写逻辑。隐藏组件的方式有很多种, 但是我们只想让用户点击取消和确定按钮才能关闭。其实就是个语法糖, 绑定个自定义事件, 把收到的值给右侧的Vue变量。父组件时, :属性名.sync="父里Vue数据名"

2023-02-15 18:13:53 38

原创 mapActions

localStorage:可长期存储数据,除非用户清楚localStorage信息,否则数据会一直存在。同一中浏览器之间,不同页面,数据可以共享。我们在写vuex的时候 先从外再到内,比如说 如果你想吃饭,我们就先拿个碗再去盛饭,下面开始展示代码,在user.js中。先在 获取到了 userInfo中的数据了 ,可以对 userInfo 里面的数据 修改,添加等。在store下的index.js 里面 引入 module文件夹下的 index.js ,可以在页面中修改等操作, 也可以调用这个值,渲染值。

2023-02-15 17:15:28 147

原创 【无标题】

模板学习预习自测-必须把vue-admin-template这一个模板项目克隆下来(看02节内容-按照步骤来)看看npm install后, 是否能启动成功项目介绍项目功能模块划分:技术栈:vue-admin-template 二次开发技术解决方案:RBAC 权限设计多语言Excel 导入导出反向代理请求模块封装...01.vue-element-admin-介绍目标公司项目提倡 “小步快跑,快速迭代” 的敏捷开发模式传统开发:闭关三年,潜心修炼,精益求精,产品横空出世。

2023-02-10 20:00:20 95

原创 项目打包App

wap项目转 App , 原来只运在手机上的wap(无线网络协议,诺基亚,爱立信时代)项目 可转app项目。把我们vue项目打包好的dist下的一切复制到你刚才的项目-覆盖过来即可 (一定要保留manifest.json文件)微信原生小程序的另外一个编辑器,比微信提供的开发者工具好用,但是现在谁还在用原生写小程序呢?ios,安卓程序员 用各自的编程语言写的代码,只能在某一个平台上运行。多端应用,一套代码,复用八端,时下最火的一个跨端框架。下载安装, 注册激活, 如果不注册激活,就不能使用它的打包功能。

2023-02-09 15:22:16 68

原创 项目打包部署

然后购买线上的云服务器 (学生应该什么时候都便宜) 一人打100kb左右计算 (可以预估同时能支持多少人访问) 根据业务选择多大带宽的服务器 (如果就自己玩 越低越好, 越便宜越好)线上的云服务器, 开启一个web服务器 (node+express / nginx / apache / 等)部署项目, 为了得到一个url地址, 可以在公网中, 大家都可以访问你做的项目。一定要关闭服务器的防火墙(在哪个网站买的, 来到管理页面, 放行端口)如果自己删除, 那开发还得加回来, 注释也一样啊, 麻烦。

2023-02-09 15:17:07 83

原创 项目打包--跨域

chunk-vendors:第三方包的代码统一放在这里(dayjs,vue,vuex,vue-router,vant)-只要被webpack构建依赖关系发现的包。app.hash值.js.map: 记录当前的.js文件, 打包之前对应代码位置, 有利于代码出错快速找到源代码的位置。作用:用vue-cli内部集成的webpack,把.vue,.less.js 等打包成浏览器可直接执行的代码。chunk-hash值.js: 某个第三方模块对应的js ,某个.vue文件编译之后的.js。

2023-02-09 15:11:32 235

原创 删除工具包

只能对自己发布的包, 执行npm unpublish命令。再次发布的包名或版本, 和刚才发布的不能完全一致。运行npm unpublish命名。如果感觉名字不好想删除。如何撤销发布的工具包。

2023-02-09 15:05:36 49

原创 发布工具包

创建index.js(package.json记录入口文件名字统一), 然后把其他模块的方法统一导入并导出。也可以到任何一个地方, 用npm / yarn 下载刚才你发布的包名。把package.json的版本向前改(因为每个版本号只能用一次)把js文件放到本地包文件夹里, 在index.js统一导出。一个项目下来, 自己用原生js, 封装了些工具。新建文件夹, 并初始化包环境npm init。以后换电脑, 直接npm/yarn下载即可。重要: ==包名, 入口==把要发布的js文件拿过来。

2023-02-09 15:03:34 49

原创 vuecli开发环境-做代理服务器

但是vuecli脚手架, 启动了一个webpack开发服务器, 它就能做代理转发。如果后端jsonp也不弄, cors也不弄, 就给你个接口地址。演示用axios请求网易新闻地址, 发现跨域报错。在vue.config.js - 添加规则和配置。而且前端和这个服务器是同源的都是8080端口。需要修改webpack开发服务器的配置即可。jsonp / cors / 代理转发。vuecli开发环境-做代理服务器。vuecli环境如何设置代理转发?例子代码(看看就行, 不用尝试)跨域的几种解决方案是什么。

2023-02-09 14:57:38 55

原创 滚动条位置

监测tabs切换后, 从nameToTop对象里拿到原本滚动位置设置。tabs标签绑定before-change事件和方法实现。明确数据结构, 在Home/index.vue定义变量。切换之前保存, 切换之后从数据结构取出对应值设置。路由对象/home, 上添加meta额外信息。首先明确数据结构, 频道id对应滚动条值。在全局后置钩子设置页面滚动条。tabs切换后, 把位置设置。给Home设置组件内守卫。tabs切换保存当前位置。优化_首页-滚动条位置。首页滚动条位置需要恢复。优化频道-滚动条位置。

2023-02-08 23:56:46 80

原创 自动聚焦问题

inserted只有第一次指令所在标签, 插入真实DOM执行。自动聚焦依赖自定义指令inserted执行。用户名修改弹窗多次点击。只有第一次自动聚焦问题。

2023-02-08 23:04:51 62

原创 文章详情-代码高亮

想要让代码高亮, 必须在后台发布文章时, 就要把代码分段用pre+code标签包裹。前端可以通过获取这些标签名/指定类名, 分别给予相应样式。基于 highlight.js 美化详情页的代码片段。在铺设文章详情标签使用v-highlight指令即可。下载此插件到项目中一定要带.js名字。文章详情页里代码片段高亮效果。在main.js 引入即可。遇到需求, 多百度解决方案。优化_文章详情-代码高亮。注册高亮代码-自定义指令。看文档尝试使用解决需求。

2023-02-08 22:57:17 112

原创 路由-全局守卫

/ vuex里有token(代表登录过, 但是一定要注意过期和主动退出要先清除vuex和本地的token, 让其跳转登录页)登录成功时, 不允许切换路径进入登录页面。重点多看看路由执行的过程和注意事项。路由守卫有很多种, 具体查阅文档。方法1: 全局前置守卫判断。方法2: 路由独享守卫。

2023-02-08 19:23:02 46

原创 vue头像的上传

JS监测A点击事件, 触发B标签标签事件。引接口, 传入表单对象, 更新页面。上传图片文件对象, 表单给后台。先实现前端点击获取文件对象效果。给用户看A标签, 点击A标签。点击头像出现文件选择器。

2023-02-08 00:19:37 176

原创 解决Vue报错:Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location

resolve与reject是用户传的成功/失败的回调。出现这个问题是因为重复点击了相同的路由引起的:编程式导航。问题描述:重复点击导航时,控制台出现报错 ,虽然不影响功能使用,但也不能坐视不管。方案二:在跳转时,判断是否跳转路由和当前路由是否一致,避免重复跳转产生问题。这是因为promise需要传递一个成功/失败的回调,才能处理这个异常。:给push方法传递相应的成功、失败回调函数,可以捕获当前的错误。push:是VueRouter类的一个实例。中,还是会有类似的错误出现。this:当前组件的实例。

2023-02-07 22:16:51 3370

原创 使用自定义指令fofo, 让输入框自动聚焦

使用自定义指令fofo, 让输入框自动聚焦。

2023-02-07 16:03:01 119

原创 扩展-自己写多久之前

【代码】扩展-自己写多久之前。

2023-02-02 23:31:02 44

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除