- 博客(48)
- 资源 (4)
- 收藏
- 关注
RSS订阅
原创 30分钟你也能搭建一个vue3.2+vite+pinia+Ts+element plus+axios的后台管理系统
vue3.2+vite+pinia+Ts+element plus+axios 管理系统
2022-11-02 15:04:19
3151
3
原创 十分钟写一个好玩的app
废话对于app开发，现在已经不再是只有安卓，ios,才能开发了，一个前端程序员就能轻轻松松搞定一个app，当然方法方式有很多，例如前几年用的比较多的 react native（react 语法），uniapp（vue，小程序语法），这两年比较火的flutter（dart语言）,还有就是各种内嵌H5的app，等等正文本篇使用uniapp，实现一个真心话大冒险app，自己手动定义内容，ps: 然后以后面试就可以吹牛逼说我了解混合app开发了，哈哈准备1.下载HBuilder 开发工具，前往下载笔
2021-03-29 13:27:57
8765
18
原创 vue拖拽排序库(SortableJS与vuedraggable)关系介绍对比, 用法, 及使用场景
实现 element tabel 拖拽排序 以及其他常用拖拽js库对比及使用场景
2022-06-08 16:26:37
3648
2
原创 vue+element后台管理，table，form，pagination等二次分装，实现5到20行完成一个主页面列表，一天轻轻松松写20个页面，再也不用大量的Ctrl+c Ctrl+v了
vue后台管理系统，表格表单封装，5行完成一个简单列表，20行完成一个复杂列表，一天轻轻松松写20个页面，再也不用大量的Ctrl+c Ctrl+v了
2021-12-26 21:58:23
2115
5
原创 Element.getBoundingClientRect()
介绍Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置如果是标准盒子模型，元素的尺寸等于width/height + padding + border-width的总和如果box-sizing: border-box，元素的的尺寸等于 width/height正文返回值 bottom height left right top width x ydemoxy 是左上角到左边和上边的距离，width,heigth,就
2021-12-23 14:41:31
700
原创 vue 动态设置浏览器标题
废话平时设置浏览器标题是这样的但vue是单页面应用，入口文件也只有一个html，只能设置一个标签，所以下面介绍两种常用的动态设置浏览器标签的方法正文第一种使用浏览器原生方法 document.titlerouter/index.jsrouter.beforeEach里//多语言项目，根根据自己项目来 import i18n from '@/i18n/index'; document.title = i18n.t("router." + to.name) //单语言项目 doc
2021-12-23 12:36:36
2760
2
原创 vue 管理系统顶部tags浏览历史实现
废话demo预览完成了哪些默认有首页，不能关闭点击路由菜单，判断有无存在，没有就添加，有就定位到上面点击跳转，点击X可关闭关闭当前页，自动跳到下一个tag页面如果当前页在最后一个，默认跳到上一个tag页面右键菜单，刷新，关闭右侧，关闭所有动态判断tags长多，放不下时，出现左右两侧按钮，减少时自动消失动态判断窗口放大缩小，自动判断有无左右两侧按钮正文不用任何vuex，乱七八糟的方法，全在一个文件，粘贴即用放到你想要的位置即可(此demo,放在了面包屑上面)先安装 (监
2021-12-22 18:34:46
4584
5
原创 vue 弹框子组件关闭时报错(子组件修改父组件传过来的props报错)
废话常见报错大概意思就是子组件不能直接更改父组件props的数据常见场景，点击弹出子组件，你在取消和确定上，写了emit，不会报错，但是点空白处，或者X，时，就会报错正文普通写法父组件子组件看似没问题，但是就会报错解决方法第一种子组件父组件不动，子组件，关闭前去触发父组件的cancel 方法，将props传的改为false，方便 :before-close=" () => { $emit('cancel', false);
2021-12-22 17:47:50
1893
1
原创 滚动条样式修改
废话基础东西，为了网页的美观，还有就是，有的页面没有滚动条，有的页面有滚动条，来回切换页面，会因为滚动条的占位，导致页面抖动，先看下改动前后对比正文vue项目的话 直接在index.html添加 /* 滚动条宽高，横向滚动条的高，纵向滚动条的宽 */ ::-webkit-scrollbar { width: 2px; height: 10px; } /* 滚动轨道 */ ::-webkit-scrollbar-track { border-radiu
2021-12-22 15:42:59
1116
原创 vscode vue2 vue3代码片段
vue2{ "Print to console": { "prefix": "sc", "body": [ "<template>", " <div>", "", " </div>", "</template>", "", "<script>", "export default {", " data() {", " return {", "", "
2021-10-12 16:15:57
1084
1
原创 创建vue2.0 vue3.0项目步骤总结
废话现在做项目都是clone现成的项目，或者直接用自己以前，写好的项目，然后删掉原项目的页面啥的，但是多多少少都删不干净，里面还是有很多用不到依赖，各种封装的方法，引入的一些第三方的东西等，只知道能跑就不要动，有的删了就跑步起来了，导致代码里有很多垃圾下面就记录一下常见的初始化vue项目的步骤一、先创建仓库以gitee为例1、没有的可以注册一个，登录成功之后，点击右上角 + 新建仓库2、输入仓库名称，创建即可3、git clone “https地址” 到本地，结束vue2.0 cli 脚手
2021-10-12 15:58:49
756
2
原创 vue3 安装ts router vuex
补充vue3.0 vite脚手架项目，安装ts1、npm install typescript -D //安装ts2、npx tsc --init //初始化ts修改main.js—>main.tsindex.html 引入的main.js—>main.tsscript 标签加 lang="ts"报错的话重新cnpm install 在 npm run dev如果 main.ts 里不识别.vue 文件，出现报错提示
2021-10-12 15:55:55
1510
1
原创 H5 电子签
废话先看效果很简单的一个需求，单独的小程序去做可简单，有现成的api，单独的网页vue里也有现成的库，我们的项目是一个跨平台的项目要兼容app，小程序，h5。没用市场上的框架，框架是非开源，自己封装的，只能继续写原生的，封装组件了正文看下别人的例子 京东的nut ui京东2.X的签名，现在3.X了，这小没用的小组件都去掉了附上代码，就是一个canvas实现的小demo，实际完成后台要接第三方，完成实名认证，上传合同，更具位置，再把前端签名的图片贴到对应合同上，最后打印新建个index.ht
2021-08-31 15:09:01
1157
1
原创 上传文本文件到富文本
废话需求：有一个添加文章的需求，自己又不想去写和复制，要求是别人发给他一个doc，docx，txt，类型的文件，然后呢，他去稍微标注修改一下内容，再提交，所以就很简单嘛，一个上传，一个富文本，上传的文件读到富文本里，在编辑提交搞定正文本项目直接写到vue2.0项目里了，当然原生js，或者其它都可以1、引入富文本安装 vue-quill-editor npm install vue-quill-editor在main.js中引入import VueQuillEditor from 'vue-
2021-07-14 18:25:10
1173
2
原创 老虎机数字抽奖（可控制结果）
废话本篇是一个原生js构造函数，加css3实现的抽奖，在app,h5,小程序，小游戏里都可以直接用，都兼容，先看下是不是你们想要的效果吧，h5，app，小程序里普通js,html里说一下，常用的几种抽奖（转盘，老虎机等），在微信小程序，小游戏，app里，现在到处可见，所以抽奖这个东西，不要抱有幻想中大奖，程序是人写的，我让你中啥你就中啥，正文jsbin工具附上代码html <div class="game_wrap"> <div class="game_ite
2021-05-20 14:48:02
4451
19
原创 手写插件之倒计时
废话现在好多项目都可以用vue+element 搭建，看了下vue2.0使用的element，还有vue3.0使用的element3里都没有倒计时组件，就写一个倒计时的demo，虽然PC端不怎么用，哈哈哈，单纯的写着玩，先看下现在市场比较火的手机ui框架里的倒计时，有赞的vant，嘿嘿嘿，单纯的借鉴借鉴，没别的意思在瞅瞅京东的nut，嗯~，里面的api基本也是一样的，有了大概样子，咱们就自己写一个玩玩正文思路：日常需求，都会设置一个结束时间，我们只需要拿结束时间减现在的时间，然后在转换成，你需
2021-04-09 16:22:22
1128
8
原创 从0到1搭建vue3.0项目 第五篇
废话本篇大概讲述，less或者sass安装使用，element3,安装使用，以及后台管理外壳搭建，不熟悉composition Api 的先从第二篇看正文1、less本项目使用less,和2.0基本一致，直接安装cnpm install less less-loader --save完成之后package.json然后在home.vue里试一下结果是ok的，不多说he2.0一样2、element32.0一致，直接安装cnpm i element3 -S引入import
2021-03-03 14:39:35
1551
1
原创 从0到1 搭建vue3.0项目 第四篇
废话本篇重点单独说一下，composition Api 新增的组件通信，重点后面用的比较多,他就是Provide/Inject，翻译是提供/注入，看到这两个关键词的时候你第一想到的是啥，我直接想到了React的createContext，都是创建一个上下文的容器，他的关键词是Provider/Consumer,翻译是生产者/消费者，然后看了下vue的文档介绍，哈哈哈简直就是一个东西，不多说，直接上demo正文provide() 和 inject() 可以实现嵌套组件之间的数据传递。这两个函数只能在 s
2021-03-03 09:52:09
1600
3
原创 从0到1 搭建vue3.0项目 第三篇
废话本篇大概记录一下，vuex 使用，Vue-router 使用，基本与2.0一样（下载安装请移步第一篇）正文默认安装好，里面是只有一个index.js文件，和vue2.0一样，当然你可以直接在index.js里直接去写，像下图这样也可以适当的扩展一下，例如vue2.0的模块化写法是这样的咱么就扩展一下，目录结构如下（就是简单的分开，不像vue2.0 modules那样，感兴趣的可以试试vue2.0 moules那样的）index.jsimport { createStore} f
2021-03-02 11:54:45
2763
6
原创 从0到1 搭建vue3.0 项目 第二篇
废话本篇大概记录一下，vue3.0 Composition Api 目前的一些方法和使用，利于后面，项目使用-首先vue3.0 Composition Api 和
2021-02-26 15:55:27
1761
3
原创 从0到1 搭建vue3.0 项目 第一篇
废话时间飞快，vue3 陆陆续续也有一年时间的了，现在各种文档，五花八门的，官方的，也都基本齐全了，下面就来从0到1，实战一个vue3.0的后台管理系统，后面我会写所有的创建搭建步骤，至于里面的api就不详细说明（会给出具体文档，自行去看），这里直接搭建，给出具体代码vue3.0问题看法和个人理解1、要不要升级项目到3.0个人觉得有必要，新项目建议直接使用3.0，既然都出3.0了，肯定相对2.0有它的过人之处，不需要解释，（ps：项目过大，架构师不想升级可以不升级，我就是划水运动员）2、vue3.
2021-02-26 13:54:57
4891
16
原创 vue中使用i18n
不废话直接上代码（打卡：2021-01-06 ）效果预览一、安装依赖npm i vue-i18n -S二、在src目录下创建i18n文件夹；三、index.js 代码import Vue from 'vue';import VueI18n from 'vue-i18n';Vue.use(VueI18n);// 引入各个语言配置文件import zh from './config/zh';import en from './config/en';// 创建vue-i18n实例i18
2021-01-06 18:25:55
4541
5
原创 vue 三级联动地址选择
不废话直接上代码（打卡：2020-12-30 ）demo<template> <div> <div style="margin:20px">选择值：{{value}}</div> <el-form label-width="80px"> <el-form-item label="活动名称"> <el-cascader v-model="value"
2020-12-30 17:30:41
1599
1
原创 常用正则表达式
不废话直接上代码（打卡：2020-12-29 ）去除前后空格str.replace(/(^\s*)|(\s*$)/g, "")手机号严谨/^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/简单/^[1]([3-9])[0-9]{9}$/密码验证必须包含数字字母符号的正则验证/^(?:(?=.*[0-9].*)(?=.*[A-Za-z].*)
2020-12-29 15:20:17
1565
2
原创 React 基础渲染，方法，属性
React 基础不废话直接上代码（补卡：2020-12-24 ）//为了方便写demo，就直接csdn引用就可以写react了 <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" cros
2020-12-29 14:46:02
1581
1
原创 React 静态属性/方法&实例属性/方法
不废话直接上代码（打卡：2020-12-25 ）函数组件function Person(name,age){ this.name = name this.age = age}// sex属性直接挂载给构造函数，是静态属性Person.sex='男'Person.prototype.say = function(){ console.log('这是person的实例方法')}Person.show = function(){ console.log('这是person的静态方法')
2020-12-25 18:16:33
3096
1
原创 vue 全屏放大缩小方法封装
vue 全屏放大缩小方法封装不废话直接上代码（打卡：2020-12-24 ）一、后台管理全屏按钮html <div class="content_item2 plr8" @click="fullScreen"> <svg-icon style="margin-right:10px" icon-class="全屏"></svg-icon> </div>data data() { return { isfu
2020-12-24 18:18:54
2403
3
原创 vue axios请求封装
vue api请求统一管理，封装不废话直接上demo（打卡：2020-12-23 ）一、安装axioscnpm install axios 二、目录结构he代码user.js import base from '../base'; // 导入接口域名列表 import request from '../http'; // 导入http中创建的axios实例 const user = { //普通json请求 test1(url, params) { return
2020-12-23 17:34:24
2010
1
原创 vue实现短信验证码登录
vue中 发送验证码demo不废话直接上demo（打卡：2020-12-22 ）html <el-form :model="ruleForm" :rules="rules" ref="ruleForm" > <el-form-item prop="mobile"> <el-input v-model="ruleForm.mobile" placeholder="请输入手机号"></el-input> </
2020-12-22 18:11:41
3047
1
原创 中 封装使用自己的js方法
vue中使用自己的js方法不废话直接上过程（打卡：2020-12-21 ）一、src下新建utils（自己命名）文件夹，新建index.js（自己命名）文件二、index.js(推荐三种写法) 1. 第一种写法 export default { aaa(){ return alert('aaa') }, bbb(){ return alert('bbb') } } 2. 第二种写法 function aaa() { return alert('aaa'
2020-12-21 18:44:14
2345
2
原创 vue中使用高德地图
vue中使用vue-amap不废话直接上过程（打卡：2020-12-18 ）一、安装vue-amap//建议使用vue封装好的amapcnpm install vue-amap --save二、在main.js中// 引入地图import VueAMap from 'vue-amap'Vue.use(VueAMap)//初始化VueAMap.initAMapApiLoader({ key: 'your amap key', plugin: ['AMap.Autocomple
2020-12-18 18:22:17
1797
2
原创 vue中使用echarts
vue中使用echarts不废话直接上过程（打卡：2020-12-17 ）一、安装charts// 最新版5.0.0的好像不兼容，建议安装4.9.0的cnpm install echarts@4.9.0 -S二、main.js 中引用import echarts from 'echarts'Vue.prototype.$echarts = echarts三、使用<template> <div id="myChart" style="width:100%;heigh
2020-12-17 18:35:00
1800
1
原创 通用的pc web官网外壳
now预览地址：https://wh-kappa-six.now.sh/pc/index.htmlgithub预览地址：https://hollowshun.github.io/wh/pc/index.html前言：一个基于vue +elementui + router +vue-cli +i18n + axios的官网外壳，简单的用到了通信，用了自己封装的js和使用方法，一些菜单导...
2019-12-11 17:06:22
2287
1
原创 vue项目发布到github上，到线上预览
前言：从你一个本地的html文件到一个github https可访问的https://hollowshun.github.io/wh/pc/index.html页面。1.前提有github，没有的注册一个（基本操作和gitlab,gitee,差不多一样）2.你有一个html，或一个项目，或自己写的一个demo。准备完成进入正题我有一个自己写的demo，先看下我的项目文...
2019-12-11 16:10:30
1615
1
原创 vue项目 npm run build后 在浏览器上打开index.html常见问题
1.打开报错解决方法config文件里的index.js里, assetsPublicPath:'/',改成 ./ 重新build即可2.打开后使用的icon字体图标不显示解决方法build文件里的utils.js里添加publicPath:'../../' ，重新build即可...
2019-12-11 14:12:52
3089
1
原创 js 字符串拼接空格拼不上
摘要：一个很简单拼接字符串，弄的自己都自闭了，需求两个字符串date:2019-11-28,time:17:50，拼接成2019-11-2817:50，就是简单的加个空格，但是被自己的编译器自动规范代码的插件给坑了，撸完ctrl+s时，自动把我空格给删了，然后我的入参就成这样了2019-11-2817:50，然后就是时间格式不正确，下面提一下拼接的几个方法，和HTML提供的几种空格实体...
2019-11-28 18:07:56
3468
3
原创 TypeScript的初次认识和在vscode配置开发环境
（一）、相关介绍1、TypeScript介绍TypeScript是由微软Anders Hejlsberg(安德斯·海尔斯伯格)领衔开发的。(安德斯·海尔斯伯格是Delphi和C#之父，Turbo Pascal编译器的主要作者，.NET概念发起人之一，同时也是TypeScript开源项目的重要领导人)。TypeScript 是 JavaScript 的超集，扩展了 JavaSc...
2019-11-01 17:46:15
672
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人