用gulp4.0搭建一个项目
框架发展到现在，建一个项目用脚手架按照提示一步步操作就创建好了。但如果不用脚手架，还有gulp这种简单的工具，可以很方便的搭起来一个项目。gulp功能也挺强的，学习成本较低。本文介绍用gulp4.0搭建一个可以自动编译sass、处理js、启动服务的项目。
准备安装gulp命令行工具1npm install --global gulp-cli
创建项目并进入1npx mkdirp my-project
1cd my-project
初始化package.json1npm init
安装gulp，作为开发时依赖项1npm install --save-dev gulp
创建gulpfile.js项目结构
编写gulpfilegulp4.0语法和之前的有些不同。
创建任务每个function都是一个任务，任务分为公开任务和私有任务，未导出就是私有任务，导出就是公开任务。function必须接受一个callback作为参数，或者return出stream、promise、event emitter、child process、 observable这五种类型的一个值。
123456789fun ...
结合el-tree和el-transfer做一个树形穿梭框
项目中有个需求是树形穿梭框，element的穿梭框又不支持，所以得想办法。看到一个大佬改造el-transfer的方案，受到很多启发。记录一下自己改造的过程。
1.拷贝el-transfer的源码放到项目中
我用的element的版本是2.15.7（不同版本的源码可能不一样），vue的版本是2.6.11。
具体步骤是在github上搜索element，下载tag是2.15.7的源码zip包，解压，拷贝packages/transfer/src中的vue文件，放到项目的components/tree-transfer目录。
将main.vue文件名改为index.vue方便引用
在项目中引用拷贝的transfer源码的组件，效果和使用el-transfer效果一致
12345678910111213141516171819202122232425262728293031323334353637<my-el-tree-transfer v-model="treeChecked" :data="treeData& ...
nvm或者n管理node版本
一、使用nvm管理node版本1)安装要学会看文档，这个时候就体现到英文的重要性了。打开github把文档仔细读一读。
1sudo curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
或者
1sudo wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
执行完第一步的安装命令，此刻执行nvm并不生效啊，提示找不到命令。nvm command not found
官网上说安装完nvm就会添加以上代码到.zshrc中，但是并没有啊，仔细阅读文档下面有mac不生效的解决办法，balabala，但是英文没那么好，看的一知半解啊。
需要手动添加以下代码到.zshrc中12export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${ ...
正则表达式入门
一、概念语法介绍英文名 regular expression（简写regex），由字母数字特殊符号构成的描述字符串模式的表达式。正则表达式通常被用来检索、替换那些符合某个模式（规则）的文本。
1.功能1.模糊匹配。2.文本的检索。3.替换功能。
2.创建方式构造方法：var reg = new RegExp(‘表达式’)第二个参数修饰符 i忽略大小写 m多行匹配 g全文匹配
字面量 隐式 直接量var reg = /表达式/修饰符
3.正则表达式的常用方法1.test(str)返回true匹配 false不匹配
2.exec(str)找到返回数组，否则返回null
4.支持正则的字符串的方法1.replace() replaceAll()2.split()3.match()12"http://www.baidu.com?name=张三&age=19".match(/(\?|&)\w+=[\u4e00-\u9fa5\w#]+/g)// ['?name=张三', '&age=1 ...
qiankun通信方式及子应用引用百度地图的修改
基座如何修改1.安装qiankunyarn add qiankun2.注册微应用并启动
1234567891011// main.jsimport { registerMicroApps, start } from 'qiankun';registerMicroApps([ { name: 'child', entry: '//localhost:9000', container: '#container', activeRule: '/sub', }]);start()
子应用如何修改具体代码略，可参考官网qiankun 概要如下：
1.src目录下新增public-path.js,并在main.js中引入2.main.js中抛出3个方法 bootstrap mount unmount3.改造main中createapp的方式4.打包配置修改(vue.config.js)
基座 ...
用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 ...