1499825149 #秒级时间戳,10位
1499825149257 #毫秒级时间戳,13位
1499825149257892 #微秒级时间戳,16位//没见过
NVM(方便切node版本//携带的npm版本)
- github.com/coreybutler… 装exe
- 安装过程中指定的两个文件夹对应的作用
//nvm存所有安装的nodejs,nodejs里存当前使用的nodejs - nvm文件位置,点开setting 添加下面内容
node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/
- 查看/下载/切换
nvm ls // 看安装的所有node.js的版本
nvm list available // 查显示可以安装的所有node.js的版本
nvm install 版本号 // 例如:nvm install 14.19.0
nvm use 版本号 // 切换到使用指定的nodejs版本
node -v
- nvm安装前装的有node,安装过程中会提示 是否加入版本库,确认就行,不用再装该版本了
pnpm
- 使用pnpm和npm 主要区别是包安装到node_modules里的模式不同,也就是说 项目拿到手后 下面这两种都能跑起来用。pnpm.io/zh/cli/add
- 使用npm install / npm install xxx -S /npm uninstall xxx
- 使用pnpm install/ pnpm add xxx -S /pnpm remove xxx
-----安装与切换镜像------------------------------------------------------------------------
npm install pnpm -g
//查看源
pnpm config get registry
//淘宝新镜像 老 http://npm.taobao.org 和 http://registry.npm.taobao.org 域名将于 2022 年 05 月 31 日零时起停止服务。 设置源为淘宝镜像
pnpm config set registry https://registry.npmmirror.com/
-----使用-------------------------------------------------------------------------------
# 根据package.json下载包(XXX)//npm install 一样能用,只是node_modules目录里一级目录下文件太多,不好找
pnpm install XXX
pnpm i XXX
****虽然官网这么写 实测 pnpm install xxx -S pnpm uninstall xxx也行*****************************************
# 写入dependencies
pnpm add xxx
# -D 写入devDependencies
pnpm add -D xxx
# 移除包(XXX)
pnpm remove XXX
# 更新所有依赖项
pnpm up
# 更新包(XXX)
pnpm upgrade XXX
# 更新全局包(XXX)
pnpm upgrade XXX --global
jwt编码token
token中可在第二部分携带信息,解析时 jwt.io/
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9 .eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ .SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c
npm install js-base64 -S
let Base64 = require('js-base64').Base64
let encodeString = getToken().split('.')[1]
let name = Base64.decode(encodeString).name
{
"sub": "1234567890",
"name": "John Doe",
"iat": 1516239022
}
-------------------------------------------------
npm install jwt-decode --save//据说也行
import jwtDecode from 'jwt-decode'
const code = jwtDecode(token)
$on('hook:生命周期')来简化window监听
- 实际使用
先来看一下平常的使用方法,
mounted () {
window.addEventListener('resize', this.resizeHandler);
},
beforeDestroy () {
window.removeEventListener('resize', this.resizeHandler);
}
复制代码
改写以后的代码为,相比于上面的写法,这个写法的好处在于可以开启一个事件监听器的同时,就在beforeDestroy
生命周期中挂载一个删除事件监听器的事件。比上面的写法会更加安全,更加有助于避免内存泄露并防止事件冲突
mounted () {
window.addEventListener('resize', this.resizeHandler);
this.$on("hook:beforeDestroy", () => {
window.removeEventListener('resize', this.resizeHandler);
})
}
子组件@hook:生命周期
监听子组件的生命周期回调
- 实际使用
<child @hook:mounted="listenChildMounted" />
document.body.contentEditable
- 操作方法
打开控制台,输入document.body.contentEditable=true
,然后敲回车,网页可以像word一样编辑,很方便对于页面的布局抗压能力做测试
作者:我在纽约写程序
链接:juejin.cn/post/716643…
权限控制时路由树pid和id作用
//路由结构
{
id: '2000',
pid: '0',
component: null,
type: 1,
path: '/content',
redirect: '/content/tag',
name: 'content',
title: '内容管理',//选择权限时 树里显示的内容
meta: '{ "title": "内容管理", "icon": "el-icon-folder"}',
alwaysShow: true,
children: [
{
id: '2100',
pid: '2000',
type: 1,
path: 'tag',
name: 'Tag',
title: '标签管理',
component: '@/views/content/tag/index.vue',
meta: '{"title": "标签管理", "icon": "el-icon-price-tag","componentUrl": "@/views/content/tag/index.vue"}',
children: [
{
//element的树图
this.originList = this.$refs.tree.getCheckedNodes(false, true)
// 由于数组里都是对象,且后续也都是处理对象 暂时以此形象存在,之后把它的children爆破出来 就是选中的新树
let rootObj = { id: '0' }
this.format(rootObj)
//selTree即为选中的树,可发给后端,需要时 后端完整再发回来
let selTree = rootObj.children
//可通过id和pid来把选中的树图对应项组成的数组 重新构建成树
format(father) {
// 先把亲儿子 从源数组里过滤出来
let sonList = this._.cloneDeep(
this.originList.filter((el) => el.pid === father.id)
)
if (sonList.length > 0) {
// 由于儿子的儿子由源数组决定,把亲儿子的children删了
sonList.forEach((el) => {
delete el.children
})
// 缀到父亲下边
father.children = sonList
// 删除源数组里已经缀到父后面的项
sonList.forEach((el) => {
this.delFuc(el)
})
// sonList要找自己的儿子拼后面
sonList.forEach((el) => {
this.format(el)
})
}
},
delFuc(target) {
let idx = this.originList.findIndex((el) => el.id === target.id)
this.originList.splice(idx, 1)
},