![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
一只正在成长的程序猿
https://wgjh5.github.io/
展开
-
vuepress+koa搭建博客详解
vuepress搭建详解前言:上一篇我们讲到vuepress搭建的过程,这里我们要继续讲,当vuepress打包之后的操作1.在.vuepress新建app.js/.vuepress/app.js/* * @Author: wgj * @Date: 2021-04-26 17:43:01 * @LastEditTime: 2021-04-26 17:53:53 * @LastEditors: wgj * @Description: */const Koa = require原创 2021-04-27 17:41:12 · 310 阅读 · 2 评论 -
vuepress搭建博客详解
文章目录一、介绍二、文件目录二、快速开始三、搭建过程详解1. 下载2. 新建project文件夹3. 在project文件夹,新建如下内容4.执行命令5. 在packeage.json里面,新增6.执行命令7. 启动项目8. 打包四、源码克隆相关链接:一、介绍VuePress 由两部分组成:第一部分是一个极简静态网站生成器 (opens new window),它包含由 Vue 驱动的主题系统和插件 API,另一个部分是为书写技术文档而优化的默认主题,它的诞生初衷是为了支持 Vue 及其子项目的文档需原创 2021-04-27 17:35:03 · 430 阅读 · 0 评论 -
解决element-message弹出多次的问题
目的message弹出多次,用户体验不好重写resetMessage.js在/utils/文件夹新建resetMessage.js/**重置message,防止重复点击重复弹出message弹框 */import { Message} from 'element-ui';let messageInstance = null;const resetMessage = (options) => { if (messageInstance) { mes原创 2021-03-09 16:46:50 · 1696 阅读 · 0 评论 -
vue-element-admin
vscode 插件和配置推荐这是一篇对 vue-element-admin 的学习总结文章。官方文档目录结构├── build # 构建相关├── mock # 项目mock 模拟数据├── plop-templates # 基本模板├── public # 静态资源│ │── favicon.ico # favi原创 2020-11-20 15:32:17 · 1952 阅读 · 0 评论 -
vuex持久化+模块化实战用法(进阶篇)
上一篇:vuex刷新数据消失不见解决方案Vuex模块化模块化后的 store 大概长这样,如果画的不对,欢迎留言这样经过模块化的vuex,每个模块维护着不同组件的数据,清晰直观编码实现创建store文件夹, 创建index.js 作为vuex的入口jsimport Vue from "vue";import Vuex from "vuex";import createPersi...原创 2020-01-10 18:14:37 · 490 阅读 · 0 评论 -
vuex持久化+模块化实战用法(进阶篇)
上一篇:vuex刷新数据消失不见解决方案Vuex模块化模块化后的 store 大概长这样,如果画的不对,欢迎留言这样经过模块化的vuex,每个模块维护着不同组件的数据,清晰直观编码实现创建store文件夹, 创建index.js 作为vuex的入口jsimport Vue from "vue";import Vuex from "vuex";import createPersi...原创 2020-01-10 18:10:37 · 273 阅读 · 0 评论 -
vue插槽的用法
什么是插槽?插槽就是子组件中的提供给父组件使用的一个占位符,用 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的标签。如下代码:在子组件中放一个占位符在父组件中给这个占位符填充内容:展示的效果现在来看看,如果子组件中没有放插槽,同样的父组件中在子组件中填充内容,会是啥样的:子组件代码无插槽:父组件照常填充内...原创 2020-01-08 10:49:43 · 348 阅读 · 0 评论 -
vue结合CSS3实现超炫3D翻书效果(二)
效果预览上回书,我们已经简单实现如何翻一页。好,现在我们复习一下。翻书效果的基本原理,请看下html布局: <div id="box" @click="turningPage"> <div class="page"> <div class="front"></div> <div class="back"></...原创 2020-01-07 17:44:36 · 7539 阅读 · 9 评论 -
vue结合CSS3实现超炫3D翻书效果(一)
效果预览基础知识储备-transform:CSS3新增的变形功能,其优点是全过程不改变DOM性能更高。在transform下有如下几个变形样式:1).translate() — 位置改变(平移)2).scale() — 缩放比例3)rotate() — 旋转角度4)skew() — 倾斜(斜切)以上的几个形式都支持X轴、Y轴、Z轴的变换方向。但需要注意...原创 2020-01-07 17:43:56 · 5503 阅读 · 0 评论 -
前端常用正则
前提在 vue开发中,难免遇到各种表单校验,这里整理了网络上和自己平时高频率用到的一些校验方法。1、是否合法IP地址export function validateIP(rule, value,callback) { if(value==''||value==undefined||value==null){ callback(); }else { const re...原创 2020-01-07 17:43:34 · 196 阅读 · 0 评论 -
vue路由跳转页面不刷新的解决方法
解决vue路由跳转页面不刷新的问题通过路由传参跳转界面,页面没有刷新解决方法:在 router-view 中加 :key="$route.fullPath"<router-view :key="$route.fullPath"></router-view>...原创 2020-01-07 17:41:40 · 2708 阅读 · 3 评论 -
vue-cl3.0搭建脚手架过程详解
1.安装vue-cli 3.0npm install -g @vue/cli# oryarn global add @vue/cli安装成功后查看版本:vue -V(大写的V)2.命令变化vue create --help用法:create [options] <app-name>创建一个由 `vue-cli-service` 提供支持的新项目选项: ...原创 2020-01-06 10:49:14 · 417 阅读 · 0 评论 -
vue添加回车事件
1.普通input版//js<input v-on:keyup.13="submit">//vue<input @keyup.enter="submit">2.如果按钮不是input的时候如果按钮不是input,可以直接绑定在document上即可 created() { var _this = this; docum...原创 2020-01-06 10:44:27 · 1353 阅读 · 0 评论 -
vue解决打开新窗口被拦截的的实战方法
解决方案:1. 使用a标签替代给出如下函数,将此函数绑定到click的事件回调中,就可以避免大部分浏览器对窗口弹出的拦截。 newLink(url) { let a = document.createElement(‘a‘); a.setAttribute(‘href‘, url); a.setAttribute(‘target‘, ‘_blank‘); ...原创 2020-01-06 10:43:21 · 3275 阅读 · 2 评论 -
particles.js在vue中的实战用法
先看一下效果吧,以便有充分的兴趣读下去!用法:1. 先下载npm install --save particles.js2.引入如果多个文件要用的话,可以用如下引入,单文件则只需import particles from 'particles.js'import particles from 'particles.js'Vue.use(particles)3. tem...原创 2020-01-06 10:42:07 · 2045 阅读 · 7 评论 -
vue3.0vue-router报错解决方案
VUE.js项目中控制台报错: Uncaught (in promise) NavigationDuplicated解决方法问题愿意:依赖包中vue-router出现问题(猜测为版本问题);解决方法:在项目目录下运行 npm i vue-router@3.0 -S这条指令就可以解决了。(更换版本)或者在main.js中添加以下代码:import Router from 'vue-...原创 2020-01-06 10:40:19 · 1998 阅读 · 0 评论 -
Error in nextTick TypeError Cannot read property 'children' of undefined 解决
Error in nextTick: “TypeError: Cannot read property ‘children’ of undefined” 解决报错 Error in nextTick: “TypeError: Cannot read property ‘children’ of undefined”解决:加一个判断 if (数据存在),再执行this.nextTick()方法...原创 2020-01-06 10:36:49 · 16511 阅读 · 3 评论 -
vue中返回顶部组件的封装
其实,返回顶部组件在大多数UI都有,为什么会在这里进行自己封装呢?因为我这里有一个需求,就是子组件内部自己的滚动条(不是window的),要与外层返回顶部不重复,所以就有了以下封装。用法: <div class="main" ref="main"> <!--直接传入有滚动条的组件的ref,如果正常用则不用传参数--> <backTo...原创 2020-01-06 10:35:47 · 661 阅读 · 0 评论 -
vue中watch的实战用法
Vue.js 有一个方法 watch,它可以用来监测Vue实例上的数据变动。如果对应一个对象,键是观察表达式,值是对应回调,值也可以是方法名,或者是对象,包含选项。1.简单用法,监听data里面的数据下面这个就浅显易懂了,通过watch来直接监测demo,如果demo的值变化,value的值也会跟着一起变化。<template> <div> <...原创 2020-01-06 10:31:56 · 339 阅读 · 0 评论 -
vue中sass报错解决办法
Error: Missing binding G:\vuesystem\vue-elemadmin\node_modules\node-sass\vendor\win32-x64-64\binding.nodeNode Sass could not find a binding for your current environment: Windows 64-bit with Node.js...原创 2019-12-31 09:44:36 · 1749 阅读 · 3 评论 -
vue父子组件的传值与方法互调
一、传值1.父传子<!--父组件--><template> <child :msg="msg"></child></template><script> import child from "./child.vue" export default { components:{chil...原创 2019-12-31 09:44:02 · 162 阅读 · 0 评论 -
vue中Promise的实战用法
promise是什么?1、主要用于异步计算2、可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果3、可以在对象之间传递和操作promise,帮助我们处理队列为什么会有promise?为了避免界面冻结(任务)同步:假设你去了一家饭店,找个位置,叫来服务员,这个时候服务员对你说,对不起我是“同步”服务员,我要服务完这张桌子才能招呼你。那桌客人明明已经吃上了,你只是想要个菜单...原创 2019-12-31 09:42:30 · 1663 阅读 · 0 评论 -
vue路由钩子函数的实战用法
—— “导航”表示路由正在发生改变。路由钩子函数有三种: 1:全局钩子: beforeEach、 afterEach 2:单个路由里面的钩子: beforeEnter、 beforeLeave 3:组件路由:beforeRouteEnter、 beforeRouteUpdate、 beforeRouteLeave...原创 2019-12-31 09:41:40 · 1632 阅读 · 2 评论 -
vue中qrcode的使用方法
1.先下载npm install qrcode --save-dev 2.引入import QRCode from "qrcode"; //引入生成二维码插件3.生成二维码<template> <canvas id="QRCode_header"></canvas></template> <script> i...原创 2019-12-31 09:40:30 · 11899 阅读 · 0 评论 -
vue cli3=>vue cli2桥接
vue cli3=>vue cli2桥接vue cli3=>vue cli2桥接1.先安装npm install -g @vue/cli2.再安装npm install -g @vue/cli-service-global3.最后安装桥接npm install -g @vue/cli-init//2.xvue init webpack my-project...原创 2019-07-26 15:03:58 · 381 阅读 · 0 评论 -
vue中websocket用法及封装
vue中websocket用法及封装1.先下载cnpm install vue-socket.io --save-dev2.在src文件夹里面新建lib文件夹,在lib文件夹里面新建socket.jsimport Vue from 'vue'import VueSocketIO from 'vue-socket.io'import axios from 'axios';var ...原创 2019-07-26 14:27:48 · 7506 阅读 · 0 评论 -
Vue中Echart用法
Vue中Echart用法一、先下载echartscnpm install echarts --save-dev二、在main.js中引入import echarts from 'echarts'Vue.prototype.$echarts = echarts三、新建hours.vue组件 <div> <div id="myChart" :...原创 2019-07-26 15:18:29 · 593 阅读 · 0 评论 -
vue给js添加版本号
vue给js加版本号在build文件里面的webpack.prod.conf.js文件里面加如下代码 // 版本号const Version = new Date().getTime();//把output那段改成如下代码output: { path: config.build.assetsRoot, filename:...原创 2019-07-26 14:43:10 · 3892 阅读 · 0 评论 -
vue图片上传及压缩组件的封装
vue图片上传及压缩组件的封装源码地址使用方法:先去上面的链接把组件,复制到自己的components文件夹内1.先下载cnpm install compressorjs --save-dev //压缩2.引入组件<script>import uploadPictures from "../../components/uploadPictures";export...原创 2019-07-26 14:38:54 · 1232 阅读 · 0 评论 -
vue中animate
vue中animate.css用法1.先下载cnpm install animate.css --save2.引入import animated from 'animate.css' Vue.use(animated)3.用法 <div v-if="nextStatus==false" ref="statusOne" <!--添加类名的方式-->...原创 2019-07-26 14:34:30 · 345 阅读 · 0 评论 -
vue中scss的用法
vue中scss的用法1.在src文件夹里面新建assets文件夹2.在asstes文件夹里面新建css文件夹3.在css文件夹里面新建mixin.scss和reset.scss,如下图4.在app.vue的mounted里面写mounted(){ // 设置html的font-sizedocument.addEventListener("DOMContentLoaded"...原创 2019-07-26 14:32:51 · 913 阅读 · 0 评论 -
vue中v-touch事件用法
vue中v-touch事件用法1.先下载cnpm install vue-touch@next --save dev2.在main.js引入import VueTouch from 'vue-touch'Vue.use(VueTouch, { name: 'v-touch' })3.用法<v-touch v-on:swipeup="goRegister"> &l...原创 2019-07-26 14:29:11 · 13124 阅读 · 2 评论 -
关于watch和computed的结合监听props
需求如果你要根据props传过来的值,来执行函数,你就需要监听,props传过来的值的变化<template> <div class="logo" ref="logo"> <img :src="src" alt=""> <p v-if="status==true">注册成为英皇宝代理</p>...原创 2019-07-26 14:24:04 · 5318 阅读 · 0 评论 -
左滑动删除组件
HTML <div class="container" v-if="this.checkIndex==0"> <!-- <div class="page-title">滑动组件</div> --> <ul> <li class="list-item " v-if="li...原创 2019-07-26 14:22:19 · 430 阅读 · 0 评论 -
解决keepAlive缓存bug
vue keepAlive移除缓存(代替this.$destroy())需求注册页面有一个,点击去查看协议的入口,此时当客户填写了数据,从协议页面回来之后数据就会清空,所以我选择了用keepAlive,但是用第一种方式发现缓存的始终都是第一次填写的东西,如果用this.$destroy()就再也不能缓存了,所以经过多方探查,用了第二种方案完美解决。router.jsimport Vue...原创 2019-07-26 14:20:59 · 4077 阅读 · 1 评论 -
解决vux刷新消失问题
解决Vuex持久化插件-在F5刷新页面后数据不见的问题vuex优势:相比sessionStorage,存储数据更安全,sessionStorage可以在控制台被看到。vuex劣势:在F5刷新页面后,vuex会重新更新state,所以,存储的数据会丢失。为了克服这个问题, vuex-persistedstate出现了~~使用方法:1.安装cnpm install vuex-persi...原创 2019-07-26 14:18:34 · 1283 阅读 · 2 评论 -
运用百度api实现定位城市
运用百度api实现定位城市1.在index.html中写<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>2.在lib里面封装一个getLocation.jslet getCurrentCityName = function()...原创 2019-07-26 14:13:57 · 1136 阅读 · 0 评论 -
vue判断手机移动端
vue判断手机移动端//App.vue,判断是否为移动端_isMobile() { let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|...原创 2019-07-26 14:45:24 · 4027 阅读 · 0 评论 -
vue动态绑定类名的几种方法
一、class的绑定单个判断推荐1,两个条件动态切换推荐5,多个推荐41.我们可以传给 `v-bind:class` 一个对象,以动态地切换 class根据isActive的true,false变化,动态绑定单个class<div :class="{ active: isActive==true }"></div>2.你可以在对象中传入更...原创 2019-07-26 14:47:33 · 14025 阅读 · 5 评论 -
git用法
创建github账户github官网注册github,创建个人账户[有需要可使用谷歌的页面翻译]需要验证邮箱,此时注意邮箱信息,(验证信息可能在邮箱垃圾箱中)[[外链图片转存失败(img-gCdFmSZf-1564125091637)()]建立本地仓库与远程仓库的连接在本地创建一个ssh key相当于在你的电脑中获取一个密匙,类似平常的验证码,获取后,输入到github账户...原创 2019-07-26 15:14:45 · 1645 阅读 · 0 评论