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 ...
图片无限轮播
用在官网中的多张图片无限滚动播放的效果
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 ...