vue
文章平均质量分 65
郭顺杰
CRUD搬运工
展开
-
身为前端,你真的会mock数据吗
前端如何mock数据,真的都能满足需求吗?原创 2022-08-25 15:42:19 · 1352 阅读 · 1 评论 -
vue拖拽排序库(SortableJS与vuedraggable)关系介绍对比, 用法, 及使用场景
实现 element tabel 拖拽排序 以及其他常用拖拽js库对比及使用场景原创 2022-06-08 16:26:37 · 3436 阅读 · 2 评论 -
vue 管理系统顶部tags浏览历史实现 tab版
管理系统顶部tags浏览记录封装原创 2022-03-11 18:31:23 · 2582 阅读 · 13 评论 -
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 · 2058 阅读 · 5 评论 -
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 · 2743 阅读 · 2 评论 -
vue 管理系统顶部tags浏览历史实现
废话demo预览完成了哪些默认有首页,不能关闭点击路由菜单,判断有无存在,没有就添加,有就定位到上面点击跳转,点击X可关闭关闭当前页,自动跳到下一个tag页面如果当前页在最后一个,默认跳到上一个tag页面右键菜单,刷新,关闭右侧,关闭所有动态判断tags长多,放不下时,出现左右两侧按钮,减少时自动消失动态判断窗口放大缩小,自动判断有无左右两侧按钮正文不用任何vuex,乱七八糟的方法,全在一个文件,粘贴即用放到你想要的位置即可(此demo,放在了面包屑上面)先安装 (监原创 2021-12-22 18:34:46 · 4390 阅读 · 5 评论 -
vue 弹框子组件关闭时报错(子组件修改父组件传过来的props报错)
废话常见报错大概意思就是子组件不能直接更改父组件props的数据常见场景,点击弹出子组件,你在取消和确定上,写了emit,不会报错,但是点空白处,或者X,时,就会报错正文普通写法父组件子组件看似没问题,但是就会报错解决方法第一种子组件父组件不动,子组件,关闭前去触发父组件的cancel 方法,将props传的改为false,方便 :before-close=" () => { $emit('cancel', false);原创 2021-12-22 17:47:50 · 1776 阅读 · 1 评论 -
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 · 1074 阅读 · 1 评论 -
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 · 1480 阅读 · 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 · 1111 阅读 · 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 · 4150 阅读 · 19 评论 -
手写插件之倒计时
废话现在好多项目都可以用vue+element 搭建,看了下vue2.0使用的element,还有vue3.0使用的element3里都没有倒计时组件,就写一个倒计时的demo,虽然PC端不怎么用,哈哈哈,单纯的写着玩,先看下现在市场比较火的手机ui框架里的倒计时,有赞的vant,嘿嘿嘿,单纯的借鉴借鉴,没别的意思在瞅瞅京东的nut,嗯~,里面的api基本也是一样的,有了大概样子,咱们就自己写一个玩玩正文思路:日常需求,都会设置一个结束时间,我们只需要拿结束时间减现在的时间,然后在转换成,你需原创 2021-04-09 16:22:22 · 1098 阅读 · 8 评论 -
从0到1 搭建vue3.0 项目 第二篇
废话本篇大概记录一下,vue3.0 Composition Api 目前的一些方法和使用,利于后面,项目使用-首先vue3.0 Composition Api 和原创 2021-02-26 15:55:27 · 1756 阅读 · 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 · 4876 阅读 · 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 · 4527 阅读 · 5 评论 -
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 · 2390 阅读 · 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 · 2000 阅读 · 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 · 3018 阅读 · 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 · 2320 阅读 · 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 · 1786 阅读 · 2 评论 -
通用的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 · 2279 阅读 · 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 · 1588 阅读 · 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 · 2987 阅读 · 1 评论