qq_30758077的博客

原创 使用Express部署Vue项目

发现官方推荐的部署在Express上的方案是使用connect-history-api-fallback中间件。但是dist文件夹下的index.html我们通过本地浏览器是打不开的，所以我们需要一个Node.js服务器，我使用的是Express。但我在尝试根据网络上的一些教程将Vue.js构建好的项目部署到Express上时，发现页面总是显示不出来，HTML里的提示是。这个默认的设置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项，它们是面向生产的项目更加需要的。

原创 nginx跨域配置

sudo vi /opt/homebrew/etc/nginx/nginx.conf;mac. sudo 管理员proxy_pass http://localhost:8001; #请注意此处端口号不能与虚拟主机监听的端口号一样（也就是server监听的端口8081）1，修改结束要测试是否成功sudo nginx -t2，启用nginxsudo nginx//强制停止nginx服务器，如果有未处理的数据，nginx -s stop//停止nginx服务器，如果有未处理的数据，等待处

原创 mysql

mysqlError: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL clientat Handshake.Sequence._packetToError (/Users/lili-files/Desktop/lili-code/vue-music/my-pro/mysql-test/node_module

原创 【无标题】brew和nvm的安装

NODEJS开发mac安装brew安装确认brew安装nvmmac安装brewHomebrew是一款Mac OS平台下的软件包管理工具，拥有安装、卸载、更新、查看、搜索等很多实用的功能。简单的一条指令，就可以实现包管理，而不用你关心各种依赖和文件路径的情况，十分方便快捷。安装/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"选用的是清华下载源，安装过程中需要输入一次用户密码

原创 ckeditor 编辑器

链接地址：https://ckeditor.com/docs/ckeditor5/latest/features/export-word.html

原创 git命令，回退版本

git把某次提交合并到另一个分支将dev的分支上的某次提交c0a5abda8ed500aeb16a120f85d930a3b194fa4c 提交到audit git checkout audit git cherry-pick c0a5abda8ed500aeb16a120f85d930a3b194fa4c回退命令 $ git reset --hard HEAD^ 回退到上个版本 $ git reset --hard HEAD~3 回退到前3次提交

原创 el-table可编辑/输入框 卡顿性能问题解决案

问题用el-table配合el-input直接渲染可编辑行，在数据量大的情况下，会出现输入卡顿的问题。原因分析el-input组件实例数量过多。el-input的v-model在表单输入时频繁触发更新事件。解决思路用原生input替换el-input，以减少el-input组件实例。并在原生input上应用el-input的样式，使前者后者外观一致。在v-model指令上追加.lazy修饰符，使实例数据仅在失去焦点时更新，减少触发次数。优缺点优点：解决了可编辑el-tabl

原创 GIT命令

忘记切换分支，但只能将最近一次的提交返回，放在暂存区，并取消此次的提交， # 1. 回滚提交 reset, 将最近一次提交放回暂存区, 并取消此次提交. $ git reset HEAD~1 # 2. 将被跟踪的内容stash，即暂时将未提交的变化移除，稍后再移入 $ git stash # 3. 创建并切换到新分支 $ git checkout -b dev-myname # 4. 将stash的内容pop出来 $ git stash pop # 5. 重新commit $.

原创 npm, github上传包

npm打包npm loginnpm initpackage name：填写你这个包的名字，默认是你这个文件夹的名字（nodeadd）version：填写你这个包的版本，默认1.0.0license:MITnpm publish最后安装的时候npm install [email protected] --save(带上版本号)github上传包git initgit add .git commit -m '' git remote add o

原创 2021-07-07 vue 递归组件的调用

递归组件的调用1，递归的组件，在调用自身的时候，可以通过 export default 里面的 name 来调用自身eg: 子组件，child组件<template> <ul v-for="(item,index) in list" :key="index"> <li>{{item}}</li> <child v-if='index==5' :list='item.clist'></child> /* 通过

原创 关系图谱

今天开始了解蚂蚁金服的关系图谱，之前一直在用gojs，从今天开始踩坑x6。

原创 vue 进入详情页之后，一级菜单不高亮

vue 进入详情页之后，一级菜单不高亮问题详情：尝试解决：分析原因：最终解决问题：解释：问题详情：在使用element-ui的NavMenu组件作为导航菜单的时候，我是通过遍历router/index.js里的路由json数组（已定义成常量）来作为NavMenu的渲染数据的。但是我发现刷新页面之后NavMenu就失去了高亮。尝试解决：初步Google搜索之后发现原来NavMenu组件有这么一个参数配置用来管理当前激活的菜单：default-active 说明：当前激活菜单的 index 类型：St

原创 nginx入门

nginx反向代理负载均衡动静分离反向代理如果局域网想访问internet

原创 vue table

最近写一个小的功能真的是掉进坑里，迟迟写不下去，索性放弃，今早1小时全部搞定。<template> <!-- 上传文件加进度条 --> <el-form ref="ruleForm" label-width="200px" class="demo-ruleForm"> <el-form-item label='上传文件'> <...

原创 vuex 数据持久化

之前在做vue的时候组件传值的时候都是用vuex来进行传值，但是往往会遇到一个问题就是，页面刷新的问题，页面一旦刷新，数据将不能持久化，所以通常我的解决办法就是保存在本地，localstorage，或者sessionstorage，今天看到vue出了一个新的方法，不用保存在本地，数据将实现持久化，安装vuex-persistedstate这个插件 import createPersis...

原创 el-input只能输入数字验证

<el-input size="mini" v-model.number="num" @keydown.native="inputLimit" />inputLimit 方法，只能输入数字，inputLimit (e) { let num = e.target.value || '' let code = e.which || e.keyCode let str = ...

原创 websocket

第一次写websocket，历经艰难，但最终还是完成了，<template> <div class="list"> <input type="text" v-model="text"> <button @click="send()">发送消息</button> <br> <button @cli...

原创 this 词法作用域和动态作用域的理解

this作用域的指向问题this 的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式词法作用域：属于静态作用域，当我们一开始在编辑代码的时候就已经确定的。动态作用域：function foo() { console.dir(this); // 当前this指向全局}// 改变作用域var a ={a: name}foo.call(foo, a); // foo函...

原创 http 跨域请求请求不到数据

官网地址https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/OPTIONS很多情况下，当我们ajax调用请求的时候，浏览器会检测到发送两次请求，一次是Request Method参数是OPTIONS，另外一次才是我们发送的get或者post请求这是浏览器对复杂跨域请求的一种处理方式问题的根源,在于,我们发出去的请求,不是"s...

原创 对promise的理解

promise的兼容性，考虑BlueBrid，promise polyfill，兼容各个平台then的执行是一步一步执行，等上一个then执行结束之后在执行下一个then，将上一个then返回的结果作为下一个then接收的结果。then和catch返回的都是promise对象，可以在每一个then的后面加上catch可以即使捕获到错误。then和catch返回的都是promise对...

原创 唤醒原生app

wakeApp:function(schem, type) { var urlStr = ''; if (type === 'cate') { urlStr = schem; } else { urlStr = 'tticarstorecall://' + schem; } // 判断机型 var u = navigator.userAgent; v...

原创 h5页面与原生的交互

getModel: function() { var u = navigator.userAgent; if(u.indexOf('Android') &amp;gt; -1 || u.indexOf('Linux') &amp;gt; -1) { //安卓手机 document.getElementsByTagName('body')[0].className = 'Android'; re...

原创 微信公众号配置

自定义菜单：1，设置 / 公众号设置 / 功能设置，配置接口域名，2，自定义菜单配置，配置链接是我url地址

原创 js原型以及原型链之间的关系

在函数中，我们定义一个函数Foo，function Foo() { console.dir('Foo');}当我们new这个函数的时候，Foo这个函数就会作为一个构造函数进行调用，var a1 = new Foo();此时，将a1.__proto__关联到Foo.prototype,也就是两个是同一个，一个改变另一个也会随之改变。a1.__proto__ &lt;===&gt...

原创 iframe，tab切换

1，点击a标签，每次出现页面跳转，想要嵌套一个iframe，让当前a标签所指定的页面在当前iframe里面进行切换，a标签添加target === iframe标签添加name，&lt;a href="demo.html" target="iframeName"&gt;demo.html&lt;/a&gt;&lt;a href="contain-click-event.html" targ...

原创 cookie的整理

原创 深入理解webpack的原理和使用

重新开始一个基于webpack的vue项目，npm initnpm install webpack vue启动 npm run build/dev在编译图片的时候进行安装npm install style-loader url-loader flie-loader1，webpack.config.jsmodule.exports={ entry:path.join(_dirnam...

原创 h5和原生的交互

&lt;button id="subBtn"&gt; button 按钮与原生的交互 &lt;/button&gt;var btn = document.getElementById("subBtn");var u = navigator.userAgent;btn.onclick = function() { transmit('bigPay', '', '');} fu...

原创 vue component :is实现多个组件之间的切换

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Vue Component 标签&lt;/title&gt; &lt;script type="text/javascript&quo

原创 深入理解了一下vue生命周期

https://segmentfault.com/q/10…http://www.cnblogs.com/gagag/…https://segmentfault.com/a/1190000008010666

原创 vconsole调试工具

1，npm install vconsolelet VConsole = require('../../node_modules/vconsole/dist/vconsole.min');let vConsole = new VConsole();2，&lt;script src="http://wechatfe.github.io/vconsole/lib/vconsole.min....

原创 格式化换算时间

2018-09-27，今天的日期格式，function formatDate(dt){ if(!dt){ dt = new Date(); } var year = dt.getFullYear(); var month = dt.getMonth() + 1; var date = dt.getDate(); if(month&l...

原创 vue-axios

UI组件element&amp;amp;amp;nbsp;★9305 –&amp;amp;amp;nbsp;饿了么出品的Vue2的web UI工具套件Vux&amp;amp;amp;nbsp;★6802 –&amp;amp;amp;nbsp;基于Vue和WeUI的组件库mint-ui&amp;amp;amp;nbsp;★4776 – Vue 2的移动UI元素iview&amp;amp;amp;nbsp;★4458 –&amp;amp;amp

原创 vue-cli + elementUi

vue-cli + elementUi1，搭建一个新的项目，两种解决方案。先使用vue-cli搭建一个新的项目，再使用 npm install 安装一些模块和插件，在webpack.conf.js中进行配置各种文件的加载器，再去.babelrc 中配置插件使用git项目git clone https://github.com/ElementUI/element-starter.git，...

原创 vue 懒加载

一、定义：懒加载也叫延迟加载，即按需加载，二、为什么需要懒加载： 在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。三、如何与webpack配合实现组件懒加载在webpack配置文件中的o...

原创 clientHeight，offsetHeight，scrollHeight，offsetTop，scrollTop之间的区别

clientHeight，offsetHeight，scrollHeight，offsetTop，scrollTop之间的区别clientHeight和offsetHeight属性和元素的滚动、位置没有关系clientHeight：包含元素的width + padding，不包含border，不包含横向的滚动条，对于行内元素，clientHeight的数值为0.offsetHeight...

原创 css样式，垂直居中

垂直居中1，使用transform: translateY(-50%);实现垂直居中&lt;div class='center'&gt; &lt;p&gt; 1,你好，我是第一行。 2，你好，我是第二行 &lt;/p&gt;&lt;/div&gt;.center { height: 500px; ba...