关注
分享
空城机
光阴雕琢生命，岁月磨砺人生
成为一个普通的上班族
展开
-
个人博客搭建遇坑流程のVuePress2
最近突然想重新做一下个人博客的网页，使用Vuepress2.x进行进行开发，中途遇到重重问题，但最终都被我克服了，记录一下免得自己以后忘记这些坑。本文中还会提及Github的分支提交使用原创 2022-10-24 09:46:39 · 1914 阅读 · 2 评论 -
不习惯的 Vue3 起步六 の Echarts绘制下钻地图
使用Vue3 + Typescript + echarts制作下钻地图原创 2022-09-25 19:37:01 · 1520 阅读 · 3 评论 -
Vue3：显示 markdown 文档
平时自己的 markdown 文档如何放在网页上，那么就需要将其转换成 html 文本，这次使用了 v-md-editor 库在 vue3 中进行转换原创 2022-07-18 20:55:51 · 6386 阅读 · 7 评论 -
不习惯的 Vue3 起步五 のapiHooks 封装
在前端开发过程中，对于 Api 接口通常会进行封装，这里 vue3 中因为添加了 typescript，所以也再来写写有 TS 的简单封装方式原创 2022-07-13 09:02:43 · 417 阅读 · 0 评论 -
不习惯的 Vue3 起步四 の 生命周期 &provide/inject
Vue3的生命周期大部分还是和Vue2一样，除了beforeCreate和created，这两个已经替换成setup了原创 2022-07-12 09:08:55 · 565 阅读 · 0 评论 -
不习惯的 Vue3 起步三 の computed 和 watch
Computed计算属性和watch侦听器，以及watchEffect侦听器这三种的具体解析，使用时相较于Vue2也多了些改变原创 2022-07-11 09:11:52 · 328 阅读 · 0 评论 -
不习惯的Vue3起步二 の alias别名、ref和reactive
在之前的学习中，对vue3和vite做了一下简单的了解。也知道了vue3，相较于vue2，对typescript的兼容更好了原创 2022-06-22 20:34:19 · 643 阅读 · 0 评论 -
不习惯的Vue3起步 の 一：＜script setup＞
Vue3虽然说是Vue2的升级版，但里面不一样的地方还是挺多的，这里主要在弄setup语法糖，从vue2过来好不适应原创 2022-06-21 20:35:15 · 1550 阅读 · 0 评论 -
keep-alive+导航守卫让缓存更精确
对于vue中的vue-router和keep-alive结合使用，使得组件的缓存能够更有针对性原创 2022-05-28 20:08:35 · 308 阅读 · 0 评论 -
Vue数据响应Object.defineProperty
Vue是使用数据驱动视图，也就是数据改变，DOM也相应完成变化，并且因为是非侵入式的数据响应，所以需要一个关键方法Object.defineProperty原创 2022-04-18 21:34:06 · 874 阅读 · 0 评论 -
Vue用keep-alive缓存组件
keep-alive用途：对于动态切换的组件进行包裹，使其能够进行缓存，而不是销毁掉后重新创建在系统开发中，界面上有时会需要对某一块内容进行切换，如果这一部分的内容是几个组件频繁动态切换，为了提高效率，可以使用keep-alive包裹它们。keep-alive是一个抽象组件，本身不会渲染一个DOM元素，也不会出现在组件的组件链中。（这与transition动画组件类似）实例<template> <div class='keepAlives'> &原创 2022-04-14 21:23:24 · 3426 阅读 · 0 评论 -
自己动手丰衣足食系列の自定义下拉框 vue 组件
序在页面制作的过程中，经常需要使用到下拉框组件，有时候使用原生的 select 标签十分不便，因为存在 shadow root，shadow root 导致我们有时候修改样式时会非常麻烦《ShadowRoot介绍》使用 element UI 下拉框时，又遇到了选择的选项文字内容过长，不能够及时变省略号的现象，需要再次用鼠标点击后才能生效（果然 bug 依旧是程序员不变的主题）虽然网上还有其他 UI 组件，但是因为当时我总体使用的是 element UI，不方便改用其他 UI 组件了。没有条件那.原创 2021-05-11 15:38:24 · 1043 阅读 · 0 评论 -
想要做网页游戏怎么办 ？PixiJs 篇（二）
序继上一次的想要做网页游戏怎么办 ？PixiJs 篇（一）后，这次继续更新一下这次的文章之前有说关于pixi是什么以及基本的使用方法，这一次是关于我们创建出来的精灵对象运动状态的说明就是如何让你的精灵在不断运动，成为一个动画精灵参考文章（写的很不错，比较明了）：https://blog.csdn.net/FE_dev/article/details/86141145https://blog.csdn.net/FE_dev/article/details/86483753提前看看效果正.原创 2021-04-22 00:16:46 · 666 阅读 · 0 评论 -
快速学一遍vue的状态管理模式 -- Vuex
VuexVuex介绍Vuex介绍在制作工程量比较大的vue项目时，经常会遇到各个组件需要操作指向相同的数据的情况。按照官方的说法：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。...原创 2021-03-27 21:01:27 · 157 阅读 · 2 评论 -
Vue cli项目 修改运行命令和端口号
vue cli项目默认运行的端口号是8080，运行命令是npm run serve可以在package.json中修改运行命令，将serve修改为dev，就可以使用npm run dev运行项目修改运行的端口号，需要在node_modules中查找@vue文件夹，里面有cli-service文件夹，找到lib文件夹，commands文件夹，找到serve.js文件夹。顺序：node_modules --> @vue --> cli-service --> lib --> co原创 2021-03-17 15:45:18 · 2264 阅读 · 2 评论 -
在gitee码云上搭建一个网站
序个人用户平时会自己练习一些项目，但是大多数时候这些项目都是在本地查看。如果想让他人能够看到自己制作的网站项目应该怎么办呢？发布到服务器上一般来说，域名和服务器都需要钱去购买，比如腾讯云和阿里云服务器，如果想使用阿里云去搭建一个个人网站，可以去参考这篇文章：域名和服务器的购买和配置当然，这里也有一种免费的选择，可以将网站项目配置到GitHub或者gitee上面进行查看，本文主要说的就是如何在gitee码云上搭建一个网站（゜▽＾*））第一步在码云上创建一个个人仓库，仓库的名字要和用户名相同原创 2021-02-07 18:25:40 · 5344 阅读 · 9 评论 -
npm发布自己的组件
作为一个前端打工人，可以尝试自己编写一些UI组件。编写组件虽说不一定要使用，但也可以更好的提升自己的能力，在编写的过程中让自己思考变得更加全面组件编写好之后肯定不能以后调用时就复制文件夹过去，这样太low了。前端人员可以将组件发布到npm上，以后就可以npm install下载自己的组件npm发布流程一、创建npm账号npm官网：npm官网注册npm的账号非常简单，只需要一个邮箱即可，连手机都不需要二、创建自己的组件我创建的vue组件，npm init新建一个项目在npm初始化时pa原创 2021-02-02 09:52:13 · 1211 阅读 · 10 评论 -
制作颜色选择器（全）
颜色选择器原创 2021-01-23 16:05:14 · 1769 阅读 · 1 评论 -
一个可递归遍历的Vue树型组件
显示效果：代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery.min.js" type="t原创 2021-01-07 09:38:46 · 1047 阅读 · 0 评论 -
制作一个vue饼状图绘制组件
在前端开发中，经常会遇到绘制图表的问题，比如对学生的成绩进行扇形饼状图的绘制。使用的框架为vue，使用v-for将学生的信息遍历生成，此时就需要一个能够绘制饼状图的组件了。对于绘制图表，现在前端比较流行的插件有echarts、AntV这一类绘制插件。echartsAntV当然，有时因为需求较少，只需要绘制简单的饼状图，导入这些插件过于麻烦时可以自己使用canvas进行绘制。编写一个自定义的饼状图生成组件代码如下：<!DOCTYPE html><.原创 2020-09-26 20:41:03 · 1871 阅读 · 0 评论 -
创建一个简单的vue时间过滤方法
使用vue去显示时间时，常常需要对获取到的时间数据进行处理显示，这里可以使用filters过滤器的方法来进行比如：需要显示获取到的时间与当前时间做对比，显示今天昨天前天，更早之前的时间可以显示为需要的时间格式<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="js/vue.js" type="text/javascript" charset="utf-8"原创 2020-09-21 21:29:04 · 351 阅读 · 0 评论 -
自定义一个适应vue的下拉框组件
在页面制作的过程中，经常需要使用到下拉框组件，有时候使用原生的select标签十分不便，因为存在shadow root。Shadow DOM概念Shadow DOM是HTML的一个规范 ，它允许浏览器开发者封装自己的HTML标签、CSS样式和特定的javascript代码，同时也可以让开发人员创建类似这样的自定义一级标签，创建这些新标签内容和相关的的API被称为Web Component。shadow-root：Shadow DOM的根节点；shadow-tree：Shadow DOM包含的子节点原创 2020-09-06 20:45:29 · 1076 阅读 · 0 评论 -
vue插件 vue-countTo
vue-countTo是一个无依赖，轻量级的vue组件，可以实现数字的滚动效果属性描述类型默认值startVal开始值Number0endVal结束值Number2017duration持续时间，以毫秒为单位Number3000autoplay自动播放Booleantruedecimals要显示的小数位数Number0decimal十进制分割String.separator分隔符String,pre原创 2020-09-06 20:07:19 · 1651 阅读 · 2 评论 -
JSP中Vue.js的使用受限
这次写这篇博客的起因主要是由于我想把数据库数据更新到HTML页面上，然后把使用了vue.js的html页面直接后缀改为jsp页面，然后进行传值，发现查询关键字方法失效了，然后去查找原因，然后发现是因为vue主要用于客户端渲染，所以有一些功能在jsp中是实现不了的。JSP简介JSP全名为Java Server Pages，中文名叫java服务器页面，其根本是一个简化的Servlet设计...原创 2020-04-03 21:30:34 · 2321 阅读 · 0 评论 -
Node.js学习（一）——简介
Node.js是一个基于chrome V8引擎的JavaScript运行环境node.js不是语言，不是服务器，不是数据库。优点1)异步非阻塞的I/O (I/O线程池)： 异步非阻塞是能不能在做一件是的时候不影响其他人，异步肯定非阻塞 I:input O：output 文件的读写，数据库的读写叫做I/O2)...原创 2020-02-24 17:14:02 · 1093 阅读 · 0 评论 -
Vue杂记（三）——Mint-ui移动端组件库，MUI组件
目录Mint-ui移动端组件库MUIMint-ui移动端组件库mint-ui参考文档：http://mint-ui.github.io/docs/#/// 安装# Vue 1.xnpm install mint-ui@1 -S# Vue 2.0npm install mint-ui -SMint-ui将组件分为了三类，Js控制组件，Css控制组件，...原创 2019-10-21 10:26:21 · 848 阅读 · 0 评论 -
Vue杂记（二）——todolist待办事项列表
使用vue去制作一个todolist待办事项列表里面的vue.js和bootstrap.js都是我从网上直接引过来的包<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,i...原创 2019-10-20 18:52:53 · 1010 阅读 · 0 评论 -
Vue.js杂记（一）
目录验证码原理：Vue生命周期函数Vue创建实例：v-bind和v-on跑马灯效果制作v-model双向绑定v-for和key验证码原理：验证码是后端生成的，随机生成的。1.后端调用相关的绘图第三方类库，或是(平台PHP、.NET.Java)系统核心绘图类库进行图片的绘制 2.绘制的那些随机的数字。字母都是后端预先定义好的 3.将绘制的图片的UR...原创 2019-10-12 16:27:00 · 473 阅读 · 0 评论