一只正在成长的程序猿-CSDN博客

原创技术总览表

目录Echarts vue总结 GIT命令watch配合computed监听props教程vue技术点 vue中swiper简单教程vue中md5教程vue中animate.css教程vue中v-touch事件用法vue中websocket用法及封装keepAlive使用方法运用百度api实现定位城市左滑动删除组件图片上传组件uplo...

2019-07-26 15:28:29 170

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 317 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 431

原创解决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 1711

原创 vue-element-admin

vscode 插件和配置推荐这是一篇对 vue-element-admin 的学习总结文章。官方文档目录结构├── build # 构建相关├── mock # 项目mock 模拟数据├── plop-templates # 基本模板├── public # 静态资源│ │── favicon.ico # favi

2020-11-20 15:32:17 1960

原创 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

原创 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

原创 nodejs实现发送邮件之(koa篇)

Nodemailer简介Nodemailer是一个简单易用的Node.js邮件发送组件官网地址：https://nodemailer.comGitHub地址：https://github.com/nodemailer/nodemailerNodemailer的主要特点包括：支持Unicode编码支持Window系统环境支持HTML内容和普通文本内容支持附件(传送大附件)支持HT...

2020-01-10 11:03:19 1039 1

原创 koa解决跨域的方法

1.自行添加一个中间件app.use(async (ctx, next)=> { ctx.set('Access-Control-Allow-Origin', '*'); ctx.set('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-...

2020-01-10 11:02:42 516 1

原创 koa设置静态目录

1.先下载npm install koa-static --save2.引入const staticFiles = require('koa-static');const Koa = require('koa');const app = new Koa();app.use(staticFiles(__dirname + '/')); //静态目录...

2020-01-10 11:02:09 435

原创 nodejs实现发送邮件之(express篇)

Nodemailer简介Nodemailer是一个简单易用的Node.js邮件发送组件官网地址：https://nodemailer.comGitHub地址：https://github.com/nodemailer/nodemailerNodemailer的主要特点包括：支持Unicode编码支持Window系统环境支持HTML内容和普通文本内容支持附件(传送大附件)支持HT...

2020-01-10 11:01:37 1249 1

原创 express设置静态目录

app.use(express.static(__dirname + '/'));//静态目录

2020-01-10 11:00:58 773

原创 vue插槽的用法

什么是插槽？插槽就是子组件中的提供给父组件使用的一个占位符，用表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。如下代码：在子组件中放一个占位符在父组件中给这个占位符填充内容：展示的效果现在来看看，如果子组件中没有放插槽，同样的父组件中在子组件中填充内容，会是啥样的：子组件代码无插槽：父组件照常填充内...

2020-01-08 10:49:43 350

原创 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 7569 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 5537

原创前端常用正则

前提在 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

原创 js判断url是否可用的方法

方案一：: XMLHTTP方案 function getURL(url) { var xmlhttp = new ActiveXObject( "Microsoft.XMLHTTP"); xmlhttp.open("GET", url, false); xmlhttp.send(); if(xmlhttp.readyState==4...

2020-01-07 17:43:00 1296

原创 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

原创解决浏览器记住密码input背景色问题

input:-webkit-autofill { -webkit-text-fill-color: #acfff2 !important;/*浏览器记住密码的字的颜色*/ transition: background-color 5000s ease-in-out 0s;/*通过延时渲染背景色变相去除背景颜色*/ caret-color: #acfff2;/*光标颜色*/...

2020-01-06 10:45:19 896

原创 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 1357

原创 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 3284 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 2051 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

原创 css颜色十六进制末尾加两位实现透明度变化

100% — FF99% — FC98% — FA97% — F796% — F595% — F294% — F093% — ED92% — EB91% — E890% — E689% — E388% — E087% — DE86% — DB85% — D984% — D683% — D482% — D181% — CF80% — CC79% — C97...

2020-01-06 10:39:04 577

原创 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 16515 3

原创 vue中返回顶部组件的封装

其实，返回顶部组件在大多数UI都有，为什么会在这里进行自己封装呢？因为我这里有一个需求，就是子组件内部自己的滚动条(不是window的)，要与外层返回顶部不重复，所以就有了以下封装。用法： <div class="main" ref="main">  <backTo...

2020-01-06 10:35:47 661

原创 vue中watch的实战用法

Vue.js 有一个方法 watch，它可以用来监测Vue实例上的数据变动。如果对应一个对象，键是观察表达式，值是对应回调，值也可以是方法名，或者是对象，包含选项。1.简单用法，监听data里面的数据下面这个就浅显易懂了，通过watch来直接监测demo，如果demo的值变化，value的值也会跟着一起变化。<template> <div> &lt...

2020-01-06 10:31:56 340

原创 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 1757 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 163

原创 vue中Promise的实战用法

promise是什么？1、主要用于异步计算2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果3、可以在对象之间传递和操作promise，帮助我们处理队列为什么会有promise？为了避免界面冻结（任务）同步：假设你去了一家饭店，找个位置，叫来服务员，这个时候服务员对你说，对不起我是“同步”服务员，我要服务完这张桌子才能招呼你。那桌客人明明已经吃上了，你只是想要个菜单...

2019-12-31 09:42:30 1665

原创 vue路由钩子函数的实战用法

—— “导航”表示路由正在发生改变。路由钩子函数有三种： 1：全局钩子： beforeEach、 afterEach 2：单个路由里面的钩子： beforeEnter、 beforeLeave 3:组件路由：beforeRouteEnter、 beforeRouteUpdate、 beforeRouteLeave...

2019-12-31 09:41:40 1636 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 11927

原创使用forever管理nodejs应用教程

这篇文章主要介绍了使用forever管理nodejs应用教程,本文介绍了forever的安装、常用命令等,最有用的莫过于文件改动监听并自动重启了,这可以增加开nodejs应用的效率,需要的朋友可以参考下何为foreverforever可以看做是一个nodejs的守护进程，能够启动，停止，重启我们的app应用。官方的说明是说：A simple CLI tool for ensuring ...

2019-09-24 13:45:14 243

原创 koa-generator脚手架的使用

1. 安装koa-generator$ npm install -g koa-generator2 .使用koa-generator生成koa2项目$ koa2 -e project(项目名称) （-e 代表使用模板引擎ejs）3. 进入项目$ cd project $ npm install4 .启动项目，默认端口号是3000$ DEBUG=koa2-learn:*...

2019-09-19 18:19:44 146

原创使用koa做一个简单的接口及获取数据

1.先安装koa-routernpm install koa-router --save-dev2.使用const Router = require('koa-router');const router = new Router();// 启动路由app.use(router.routes()).use(router.allowedMethods())3.定义路由router....

2019-09-19 17:35:42 2190

原创 nodejs控制台打印彩色及使用koa实现端口和ip打印

一、控制台彩色打印下载console-color-mrnpm install console-color-mr --save-dev第一种用法：直接引入 require('console-color-mr');修改了默认颜色。console.info会直接输出红色//use colorconsole.info('------------ default color--------'...

2019-09-19 17:34:13 887

原创 koa-router的使用

Koa中的路由和Express不同，Express是把路由集成在Express中，Koa则需要通过kao-router模块使用。1.安装npm install koa-router --save-dev2.使用const Koa = require('koa');// 直接调用的方式const router = require('koa-router')();// 或单独创建...

2019-09-19 17:31:52 305

原创使用koa搭建一个简单的node服务器

1.新建site文件夹，cmd进入命令行npm init //初始化一份package.json2.下载koanpm install koa --save-dev3.创建一个应用程序新建app.jsconst Koa = require('koa');const app = new Koa();app.use(async ctx => { // ctx.bod...

2019-09-19 17:31:10 899

原创 express脚手架用法

1.全局安装npm install -g express-generator@4或者npm install express-generator -g2. 在一个文件夹里面用express命令创建应用架构express testcd test3. 进入test文件夹安装依赖，推荐cnpm安装所有依赖npm install4. 启动应用SET DEBUG=test:* np...

2019-09-19 17:29:26 257

空空如也

空空如也