weixin_39520640的博客

原创 vue-cli2与vue-cli3 新建项目

1、新建项目vue init webpack test2、安装axios，qsnpm install axiosnpm i qs 在main.js中 //1、引入 import axios from 'axios' import qs from 'qs' //2、将axios，qs配置成vue的原型 Vue.prototype.$axios...

原创 电脑录屏开源软件Captura

Captura 介绍Captura是一款免费开源的屏幕录制工具，它能够将屏幕上的任意区域、窗口录制成视频。可以选择是否显示鼠标、记录鼠标点击、键盘按键、计时器、声音（captura 录制视频默认不带声音，如果需要声音，在软件界面自己勾选你想要的声音开启）。也可以从网络摄像头捕获。Github下载地址Captura 缺少 FFMPEG确保 Captura 已安装下载FFmpeg 的 release 版本，地址。步骤如图：（按照红框顺序依次点击）解压下载的文件 ffmpeg-4.3.

原创 cesium获取鼠标位置的几种api

cesium 写鼠标点击事件时，想获取鼠标点击位置，发现不同场景对坐标需求不一致，获取出来的坐标也不一致。比如以下情形：获取点击处屏幕坐标获取鼠标点的对应椭球面位置 获取加载地形后对应的经纬度和高程获取加载地形后对应的经纬度和高程获取倾斜摄影或模型点击处的坐标1、屏幕坐标通过 movement.position 获取，鼠标点击位置距离canvas左上角的像素值。let viewer = new Cesium.Viewer('cesiumContainer');let handler=

原创 yarn vs npm

yarn:npm:cnpm:啥都别说了，以后改用yarn。yarn介绍：1、离线下载：Yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。 如果您之前下载了软件包，则可以在没有任何互联网连接的情况下安装。2、速度更快：同时利用并行下载以最大化资源利用率，因此安装速度更快。单个请求失败不会导致安装失败。 请求在失败时会自动重试。3、在执行代码之前，Yarn 会通过算法校验每个安装包的完整性。4、使用详细、简洁的**锁文件 (lock file，默认生成，记录了被确切安装上的模块的

原创 记vue分步引导的坑 driver.js 与 vue-tour html2canvas 与 dom-to-image

由于项目需要加入用户指引，于是我就找了下相关的插件。一开始使用driver.js做了个demo感觉还是不错的，于是就准备使用driver.js，修改下样式就行了。但是真正用设计图来设置时却发现了问题，由于项目是用vue编写的，根据设计图拆分了很多可复用的组件。设计图中很多需要高亮的dom节点都是在好几个组件之下的，driver.js获取不到，而且部分dom高亮时只有一个白色的框框覆盖，整了两天发现搞不定于是准备换插件。在帖子上看到有人使用vue-tour插件，缺点是他的高亮跟没高亮一样，完全看不出来，但

原创 NProgress加载进度条插件vue

1、安装：npm install --save nprogressimport NProgress from 'nprogress'; // Progress 进度条import 'nprogress/nprogress.css';// Progress 进度条 样式或直接引入js、css或者通过cdn引入：<script src='nprogress.js'></script><link rel='stylesheet' href='nprogress.css

原创 code ELIFECYCLE npm ERR! errno 1

最近遇到一个项目，npm下来报错errno -40048。网上帖子有的说npm降级到5.3.0就行，试了直接errno -5 ，也还是不行。又有人说下载新的node.js覆盖就行，这里吐槽一下新版的node（node-v14.15.1-x64），居然要win8及以上才行，我们win7居然安装不了（公司比较多的都是win7），最后装了旧的node-v12.16.2-x64。折腾了半天还是不行，但我的同事就直接可以跑起来的，我以为我们配置不一样，但node和npm、vue版本都是一样的。最后没办法用土方

原创 vue postcss-px-to-viewport插件 px转vw

npm install postcss-loader postcss-px-to-viewport --save-devvue-cli3：vue.config.js：module.exports = { devServer: { port: 8080, disableHostCheck: true, }, css: { loaderOptions: { postcss: { plugins: [ require("p

原创 qrcodejs生成二维码

QRCode.js 是一个用于生成二维码图片的插件。1、安装qrcodejs2npm install qrcodejs2 --save2、在页面中引入import QRCode from "qrcodejs2"3、在html中设置div，用来存放生成的二维码。id为标识容器的依据。<div id="qrcode"></div>4、js生成微信二维码//生成微信二维码 qrcode(){ let url = location.hr

原创 vue v-if transition不起作用

<transition name="动画名"></transition>ps：过渡的元素只能是以下之一：条件渲染 (使用 v-if)条件展示 (使用 v-show)动态组件组件根节点自定义过渡动画的，记得在css中修改以下的类名：动画名-enter 进入前效果动画名-enter-active 进入的过渡时间和函数动画名-enter-to 进入后效果动画名-leave 离开前效果动画名-le

原创 vscode打开中文文件乱码

设置Settings --> 搜索框搜索 “files.autoGuessEncoding” --> 勾选即可。

原创 word文档在线预览

//方法一：使用iframe。字体按钮大小受影响 <div class="content"> <iframe class="filename" id="pdfUrl" src="" frameborder='0' ></iframe> </div> let pdfBox = document.getElementById('pdfUrl'); let office = 'https://v..

原创 cesium 剖面分析，仿火星

原创 openlayers 路径动画 运动轨迹

原创 vuex基础知识

一、介绍Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。试想一下，如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值，一旦项目变得很庞大，管理和维护这些值将是相当棘手的工作。为此，Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在具有VueX的Vue项目中，我们只需要把这些值定义在VueX中，即可在整个Vue项目的组件中使用。vue-bus可用于不是特别复杂

原创 vue bus总线 解决非父子组件通信问题

使用vue-bus有两点需要注意：第一是 $ bus.on 应该在 created 钩子内使用，如果在mounted使用，它可能接收不到其他组件来自created钩子内发出的事件；第二点是使用了 $ bus.on 在 beforeDestory 钩子里应该需要使用 $ bus.off解除，因为组件销毁后，就没有必要把监听的句柄存储在vue-bus里面了。在实际的开发项目中，如果数据和业务逻辑不是特别复杂，没有必要使用Vuex，那么我们就可以通过这种方式，实现我们再实际业务逻辑中的组件间数据传递，而且代

原创 记小程序上传文件遇到的坑

1、Andrio手机，拍照时选原图，出现"unknown"扩展名，不选原图正常。2、header不设置’content-type’: ‘multipart/form-data’，上传的是临时路径，没有文件。// 选择图片chooseImage(){ let that=this uni.authorize({ scope: 'scope.camera', success() { console.log('camera授权成功') uni.chooseImage({ cou

原创 真机调试高度100%禁用滑动，但ios还是滑动

position换成fixed.main width 100vw height 100vh position fixed left 0 top 0

原创 uni真机showToast不显示

真机测试发现调用 showToast 不显示，或者闪一下就没了。可能是与 wx.showLoading 冲突了，两者调用的是同个框。封装请求时，hideLoading不要写在complete里。export const get = (url, data, callback) => { uni.showLoading({ title:'加载中' }) uni.request({ url: url, header: { 'Accept': 'application/json'

原创 vue 监听窗口分辨率去不同的网址

APP.vue：export default { name: 'App', data(){ return{ } }, created() { console.log(screen.width ) if(screen.width<768){ // 768，ipad window.location.href="http://localhost:9090"; // 去移动端页面 } }, mounted() { wind

原创 Driver.js 引导

一、介绍Driver.js 是一个轻量级（~ 4kb gzip），无需依赖但功能强大的原生 JavaScript 。兼容所有主流浏览器，可帮助你将用户的注意力集中在页面上。特色功能：突出显示页面上的任何任何项目锁定用户交互创建功能介绍为用户添加聚焦器高度可定制 – 可在任何地方使用，可覆盖界面友好 – 可通过按键控制轻量级 – gzip 压缩后只有约4kb在所有主流浏览器中保持一致的行为https://github.com/kamranahmedse/driver.jshttps:/

原创 css 常用方法

1、超出部分隐藏 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;

原创 javascript基础（内置对象、BOM、DOM、JSON、AJAX）

一、窗口交互1、confirm 确认，confirm(显示内容)，返回布尔值。function rec(){ var mymessage= confirm("你是女士吗？") ; if(mymessage==true) { document.write("你是女士!"); } else { document...

原创 webSocket基础

一、介绍WebSocket 是一种网络通信协议，很多高级功能都需要它。它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。其他特点包括：（1）建立在 TCP 协议之上，服务器端的实现比较容易。（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。（3）数据格式比较轻量，性能开销小，通信高效。（4）可以发送文本，也

原创 vue-cli2改vue-cli3报错npm install --loglevel error --registry

1、卸载vue-cli2npm uninstall vue-cli -g2、安装vue-cli3npm install -g @vue/cli注：需将 Node 版本升级至 8.9 及以上。3、vue create创建项目失败报错：npm install --loglevel error --registry1）出现这个错误，首先需要排除，node，npm的版本问题。2）然...

原创 vue devtools安装

1、到github下载：https://github.com/vuejs/vue-devtools2、在vue-devtools目录下安装依赖包：npm i3、修改shells->chrome->manifest.json文件把"persistent":false改成true4、打包npm run build5、打开谷歌浏览器，设置—>扩展程序，勾选开发者模式...

原创 cookie

Chrome现在只在设置为“SameSite=None”和“Secure”时才提供带有跨站点请求的cookie。1、什么是cookieHTTP协议本身是无状态的。什么是无状态呢，即在服务器端不保留连接的有关信息，服务器无法判断用户身份。无状态是指Web浏览器与Web服务器之间不需要建立持久的连接，这意味着当一个客户端向服务器端发出请求，然后Web服务器返回响应（Response），连接就被关...

转载 发起http请求

1、参数都在URL里，是get请求1、请求头: Query String Parameters当发起GET请求时，参数会以url string的形式进行传递，即问号后的字符串就是请求参数，用&进行分割。2、请求头: Form Data当发起post请求时，若未指定Content-Type或者传递的参数为字符串，其值默认为application/x-www-form-urlenc...

转载 vue mixins混用

mixins就是定义一部分公共的方法或者计算属性,然后混入到各个组件中使用,方便管理与统一修改。一个混入对象可以包含任意组件选项。同一个生命周期，混入对象会比组件的先执行。1.创建一个test.js，用export暴露出mixins对象export const mixinsTest = { methods: { hello() { consol...

原创 uni-app

一、框架简介1、目录结构┌─components 组件目录├─common 公共资源├─hybrid 本地网页├─platforms 各平台专用页面├─pages 业务页面文件├─static ...

原创 element全局消息提示组件自定义

有次开发想用element消息提示组件，但用不上其他组件就不想引入element，于是就自己写了，以下是方法。1、文件目录2、message.vue<template> <transition name="fade"> <div class="message" :class="type" v-if="visible"> <i...

原创 es6基础

在 ECMAScript 中，变量可以存在两种类型的值，即原始值和引用值。原始值：存储在栈（stack）中的简单数据段，也就是说，它们的值直接存储在变量访问的位置。引用值：存储在堆（heap）中的对象，也就是说，存储在变量处的值是一个指针（point），指向存储对象的内存处。一、原始类型ECMAScript 有 5 种原始类型（primitive type），即 Undefined、Nul...

原创 javascript时间戳转换

function add0(m){return m<10?'0'+m:m } function format(shijianchuo){ var time = new Date(shijianchuo); var y = time.getFullYear(); var m = time.getMonth()+1; var d = time.get...

原创 正则表达式

正则表达式(regular expression)描述了一种字符串匹配的模式（pattern），可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。正则表达式的组件可以是单个的字符、字符集合、字符范围、字符间的选择或者所有这些组件的任意组合。正则表达式是由普通字符（例如字符 a 到 z）以及特殊字符（称为"元字符"）组成的文字模式。一、非打印字符非打...

原创 es6（一）：let和const

一、let，const命令1、基本用法var 全局变量,可在声明之前使用，值为undefined。let局部变量，只在代码块内有效，必须声明后使用，否则报错。// var 的情况console.log(foo); // 输出undefinedvar foo = 2;// let 的情况console.log(bar); // 报错ReferenceErrorlet bar = ...

原创 css3 animation

animation: name duration timing-function delay iteration-count direction fill-mode play-state;参数：name 动画名称，duration 时长，timing-function速度曲线， delay启动延迟（s/ms），iteration-count播放次数（infinite无限），direction...

转载 !important

!important提升指定样式规则的应用优先权。ps:IE6及更早浏览器下，!important在同一条样式内不生效。div{color:#f00!important;color:#000;}在上述代码中，IE6及以下浏览器div的文本颜色为#000，!important并没有覆盖后面的规则；其它浏览器下div的文本颜色为#f00。div{color:#f00!important;}...

原创 vue 配置vue-devtools调试工具

1、到github下载：https://github.com/vuejs/vue-devtools2、 进入到 vue-devtools 所在目录，然后运行以下两个指令 npm install npm run build3、修改安装目录vue-devtools\shells\chrome 中 的manifest.json文件。 将 persistent 参数改为 true4、将扩展程...

原创 vue单页面转多页面

一、调整目录调整前：1、进入src文件夹中，新建一个文件夹，取名pages，用于存放页面文件，然后在pages里面新建一个文件夹叫index用于存放首页，然后将下图红框内的文件(文件夹)都拉进index文件夹里面，还有最外层的index.html也拉进去2、这时候的src文件夹里面只有两个文件夹一个是components用于存放组件文件，pages用于存放页面，然后新建一个module...

原创 vue报错总结

1、building modules 1/1 modules 0 activeevents.js:174 throw er; // Unhandled ‘error’ event没有设置host，或者host不对。在 \config\index.js里面更改const path = require('path')module.exports = { dev: { /...