用vuepress搭建一个文档项目的踩坑记录
介绍一下vuepressvuepress由两部分组成，第一部分是一个极简静态网站生成器 (opens new window)，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。
快速上手在此不赘述，可以查看官网vuepress
踩坑记录本着只是做一个技术文档的初衷，也不需要把网站做的多漂亮，因此只需要配置好默认主题就可以了。为什么用vuepress做这件事呢，主要是因为我的技术栈是vue，vuepress是基于vue的，在markdown中可以直接引vue组件，使用vue语法，特别方便，学习成本低。编写文章的时候项目已经开发完了，写文章是用回忆的方式记录项目中的问题，难免遗漏一些，没有办法，下次尽量开发时同步记录文章。关键点有以下几点：
默认主题配置1.默认的主题提供了一个首页（Homepage）的布局 (用于 这个网站的主页)。想要使用它，需要在根级 README.md 的 YAML front matter 指定 home: true2.多个侧边栏配置
12345678910111213 ...
vue-quill-editor添加一个全屏功能
用自定义指令给vue-quill-editor添加一个全屏的功能思路：1.点击全屏按钮修改quill-editor的样式，使其全屏2.点击缩小恢复quill-editor的样式，退出全屏3.有两点需要注意1.获取dom结构不能用getElementById,如果一个页面有两个富文本框就会出问题。2.全屏后ql-container的默认高度是100%继承了父盒子，但是上面还有个ql-toolbar，所以高度会有遮挡，需要把高度减少一点。
代码如下：定义自定义指令12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667// maxWindow.jsimport Vue from "vue";const domList = [ { dom: `<svg t="1637824425355" class="icon& ...
创建一个vue的UI组件库
为什么要创建组件库1.大量重复或相似的业务代码重复code浪费了时间人力，如果把这些业务代码封装成组件则可以解决如上问题。2.统一了代码规范，统一了产品风格。3.沉淀自己的技术，提升技术水平。
怎么做创建一个vue项目我习惯用界面配置的方式，用vue ui命令创建一个vue项目。具体步骤略。创建完的目录结构为
12345678> packages // 新增packages目录用于存放组件> src // 用作示例demo> publicpackage.jsonREADME.mdvue.config.js...
新增vue.config.jsvue cli3 提供一个可选的 vue.config.js 配置文件。这个文件存在则他会被自动加载，所有的对项目和webpack的配置，都在这个文件中。修改vue.config.js的目的有两个：1.修改项目的入口，实现对src目录的编译，使demo可以访问。2.提供对packages目录的编译构建处理。
1234567891011121314151617181920212223242526module.exports = ...
一个简单的大转盘
点击按钮调接口，当返回奖品index时，使转盘转出相应的角度。动效是利用了transition过渡动画。当奖品是固定的时候，就少了绘制奖品转盘的步骤。否则得绘制奖品转盘。
dom123456<div class="turn-wrapper"> <!-- 转盘 --> <div class="panel" :style="rotateStyle"></div> <!-- 指针 --> <div class="pointer" @click="rotateHandle"></div></div>
js1234567891011121314151617181920212223242526272829303132333435363738394041424344454647export default { computed: { // 核 ...
图片拖住滚动(vue指令实现)
适用于内容超出展示范围，出现滚动条，但是不拖动滚动条而是拖内容让其移动的场景。利用了dom的scrollTo方法
dom12345678<div class="yule-wrapper" v-move> <img src="@/assets/partnerHome/yule1.png" class="yule-item" alt=""> <img src="@/assets/partnerHome/yule2.png" class="yule-item" alt=""> <img src="@/assets/partnerHome/yule3.png" class="yule-item" alt=""> <img src="@/assets/partnerHome/yule4.png" cla ...
图片无限轮播
用在官网中的多张图片无限滚动播放的效果
dom结构要注意的是wrapper代表的展示部分，宽度1200px（根据设计来），inner是多张图片的实际宽度，图片要多来一份，因为图片是往左一直移动的。当第6张图片也移动出屏幕时后面要接上第一张图片，才能有无限循环的效果。
1234567891011121314151617<div class="life-wrapper"> <div class="life-wrapper-inner" ref="wrapperInner"> <img src="@/assets/partnerHome/shenghuo1.png" class="shenghuo-item" alt=""> <img src="@/assets/partnerHome/shenghuo2.png" class="shenghuo-item" ...
npm发布一个自己的包
做个简单的实例演示如何发布自己的npm包
1.创建一个包1.1 npm init创建一个项目根据提示可以配置入口文件为index.js（默认）,配置git地址，等等，具体步骤略配置完生成一个package.json
1.2 在index.js编写自己的代码这里以一个转化时间戳为时间格式的字符串为例
123export function formatTime(time, format) { // 代码略}
1.3 项目创建完毕项目中必须有index.js及package.json，有这两个文件这个项目的雏形就有了。
2.发布这个包2.1 申请一个npm账号可以在npm官网创建账号 npm官网地址，或用命令npm adduser创建
2.2 黑窗口登录账号npm login
发布之前必须登录不然发到哪里？ npm whoami 命令可以检验是否已经登录，如果已经登录无需重复登录。
2.3 黑窗口发布项目npm publish
完毕，到此处事情已经完成了。可以登陆官网看自己发的包
3.使用自己的npm包本人只试了在vue项目中如何使用自己的包
3.1 安装12n ...
H5微信内分享自定义标题图标
以下两图一个是默认的分享样式，一个是自定义的分享样式
在微信环境中分享一个H5，分享出来的卡片默认是没有文案和图标的。若想添加文案和图标需要借助微信的js-sdk
1.公众号的设置首先得有一个公众号，这个是前提。微信内分享的这个H5页面可以和公众号没有关系，但是自定义图标的这个功能相当于借助了公众号的能力。
1.1登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”按照提示下载校验文件放置到H5的域名根目录下，可在浏览器访问校验文件验证成功与否。
2.引入js文件<script></script>标签引入js文件即可
3.通过config接口注入权限验证配置主要参照微信js-sdk说明文档
12345678wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: '', // 必填，公众号的唯一标识 timestamp: , // 必填， ...
数据结构中的堆、栈、堆栈、队列
堆：在程序运行时，而不是在程序编译时，申请某个大小的内存空间。堆是程序程序运行时申请的内存空间，而栈只是一种使用堆的方法。
栈：也叫堆栈，先进后出，有栈底和栈顶的概念。
队列：一种特殊的线性表，只允许在表的前端进行删除，在表的后端进行插入。建立队列结构必须为其静态分配或动态申请一片连续的存储空间，并设置两个指针进行管理，一个对头指针front，一个对尾指针rear。先进先出。不会内存溢出。
参考文章：https://www.cnblogs.com/guoxiaoyan/p/8664150.html
h5调用原生app的方法
分安卓和IOS，安卓可以直接调用，iso需要通过桥来调用
12345678910111213var u = navigator.userAgent;if(u.indexOf('Android') > -1 || u.indexOf('Adr') > -1){ //android终端 let appData = window.android.原生方法(参数); if (appData) {//返回值 }}else if(!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){ //ios终端 utils.setupWebViewJavascriptBridge((bridge)=>{ bridge.callHandler('原生方法',参数, function (response) { // response返回值 }); })}
ISO的 ...