转 Mac下安装nvm及常见问题
前言：(这一步是可选，如果是windows 用户最好是删除已安装的node和npm)
1.卸载已安装到全局的 node/npm
如果之前是在官网下载的 node 安装包，运行后会自动安装在全局目录，其中

1

node 命令在 /usr/local/bin/node ，npm 命令在全局 node_modules 目录中，具体路径为 /usr/local/lib/node_modules/npm

安装 nvm 之后最好先删除下已安装的 node 和全局 node 模块：

栈 就是先进后出FILO (First-In-Last-Out); 像一个杯子 喝到的始终是最上面的水；
队列 就是 先进先出FIFO(First-In-Lsat-Out); 像吸管喝到的始终是底部的水；

使用背景： vue项目 axios
使用详情：
1、首先安装

1
2

# 在项目中安装
   npm install mockjs

2、在项目中使用
在项目中src文件夹下 新建mock文件夹 新建mock.js 和index.js文件 这里面用来生成基础的接口
项目结构截图：

数据

记录使用canvas 制作文字背景水印

render()函数通过虚拟DOM 来渲染页面

因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点，及其子节点。我们把这样的节点描述为“虚拟节点 (Virtual Node)”，也常简写它为“VNode”。“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。
–来源：https://cn.vuejs.org/v2/guide/render-function.html#%E8%99%9A%E6%8B%9F-DOM

如果开发过程中出现使用v-if-else来切换组件时发现数据没有更新，那么就是因为元素被复用具体可以参考vue官网-组件

1
2
3
4
5
6

<template v-if="loginType === 'username'">
  <input placeholder="Enter your username">
</template>
<template v-else>
  <input placeholder="Enter your email address">
</template>

正则匹配身份证号 分为18位和15位
首先写正则之前我们先明白身份证号的结构 18位

1
2
3
4
5
6
7
8
9

地区： ([1-6][1-9]|50)\d{4}  // 补充重庆地区50
年的前两位： (18|19|20)            1800-2399
年的后两位： \d{2}
月份：((0[1-9])|10|11|12)
天数： (([0-2][1-9])|10|20|30|31)      闰年不能禁止29+
三位顺序码： \d{3}
校验码： [0-9Xx]
// 校验18位的身份证
let _IDRe18 =  /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/

在开发过程中难免会遇到点击分享的需求，这里有两种实现方式：
第一种： 通过原生js 的方法用（存在兼容性）：

document.execCommand( aCommandName, aShowDefaultUI, aValueArgument)
参数说明：
aCommandName
      命令的名称：常用的为”copy”,”cut”等；

注：”copy” 拷贝当前选中内容到剪贴板

在编写组件时 使用rander函数编写组件 发现事件没有被触发后来发现写的方式不对
错误的使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

// js
render(h){
	return h(
	'div',
	{
	  'class': {
        foo: true,
        bar: false
      },
      style: {
        // color: 'red',
        fontSize: '14px',
        width: '100px',
        // height: '20px',
        backgroundColor: '#bf0000'
      },
      attrs: {
        id: 'foo'
      },
      // 需要手动匹配 keyCode。
      on: {
        click: (data)=>{
       		this.$emit("click",data)
       	 },
        visiableChange:value => {
        	 //这里有一个事件名称不是单单词 但是我们on监听时候发现就触发不了emit
            this.$emit('visible-change', value);
        }
      },
    },
    [
      '一些内容',
      createElement('h1', '一条文字')
    ]
  )
}

vue开发 cross-env跨平台设置环境变量

vue开发过程成中使用环境变量 以便在不同的环境里面查看不同的数据。
cross-env可以很方便帮我们解决
关于介绍 cross-env

首先安装 cross-env

1

npm install cross-env --save-dev