技术

Mock.js是模拟数据生成器，不需要后端来提供接口数据来进行开发，Mock可以根据数据模板生成随机数据，并且拦截Ajax请求返回模拟数据 安装 npm install mockjs 导入 import Mock from 'mockjs' 通过传入数据模板对象生成数据 const data = Mock.mock({ 'list|10': [{ "id|+1": 1, "name": "@cname", "age|18-25": 25 }] }) console.log(data) 配置响应数据（当匹配url的ajax请求时，会根据数据模板生成模拟数据，并且作为响应返回，这里通过axios发送get请求） const Data = Mock.mock('/api/name','get',{ code: 200, data: { 'list|10': [{ "id|+1": 1, "name": "@cname", "age|18-25": 25 }] } }) axios.get('/api/name').then( res => { console.log(res.data) } ) 也可以传入第二个参数，表示匹配的请求是哪个请求方法的 记录数据模板 const Data = Mock.mock('/api/name',(options) => { return { code: 200, options } }) axios({method: 'get', url: '/api/name' , data: {'name':'chenjunlin'}})....

PWA，Progressive Web App（渐进式web应用），PWA技术可以将web应用具备接近原生应用的特性和用户体验，无需额外安装，支持离线缓存，消息推送等功能 PWA由Service Worker，Promise，fetch，cache Api，Notification Api等技术组成 Service Worker：服务工作线程，独立于主线程，常驻内存，代理网络请求，依赖HTTPS通信 注册Service Worker navigator.serviceWorker.register('./sw.js',{scope: '/'}).then( registration => { console.log(registration) },error => { console.error(error) } ) window.onload = function() { document.body.append('PWA!') } sw.js const cachename = 'v1' self.addEventListener('install', function (event) { console.log('install',event) // 安装新的Service Worker脚本时触发，只有Service Worker脚本不同，会认为是不同的Service Worker版本 event.waitUntil(new Promise(resolve =>{ setTimeout(resolve, 1000) // 安装新的Service Worker脚本后等待1秒后激活该脚本 })) // event.waitUntil(self.skipWaiting) // 强制停止老的Service Worker，激活启动新的Service Worker，只要有更新就激活新的 event.waitUntil(caches.open(name).then(cache =>{ cache.addAll([ '/', './1.img' ]) })) // 开启cache api缓存系统 }) self....

ECharts是基于JavaScript的数据可视化图表库 安装 npm install echarts --save 第一个实例 import * as echarts from 'echarts' let app = echarts.init(document.getElementById('app'), null, { width: 800, height: 500 }) let data = { title: { text: '用户管理' }, tooltip:{}, legend: { data: ['用户'] }, xAxis: { data: [ 'root','admin','user1','user2','user3' ] }, yAxis: {}, series: [ { name: '用户权限', type: 'bar', data: [ 10,8,5,1,3 ] } ] } app.setOption(data) 注意：容器必须具备高度和宽度（这里的容器的id为app），要么html指定，要么在初始化时指定一个

Scoop是windows平台下开源的命令行软件包管理器，类似于ubuntu的apt或者macOS的brew scoop仓库里面全部都是通过审核的绿色软件包（前提是不要乱用来路不明的scoop源） 允许执行本地脚本权限 Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser 修改Scoop安装目录（用户级） $env:SCOOP=‘D:\Software\Scoop’ [Environment]::SetEnvironmentVariable(‘SCOOP’, $env:SCOOP, ‘User’) 修改Scoop安装目录（全局） $env:SCOOP_GLOBAL=‘D:\Software\Scoop\Global’ [Environment]::SetEnvironmentVariable(‘SCOOP_GLOBAL’, $env:SCOOP_GLOBAL, ‘Machine’) 目录介绍： apps：通过scoop安装的软件存储的目录 buckets：管理软件的仓库目录（记录了哪些仓库有哪些软件） chache：软件安装包目录 persit：存储用户数据，与软件分离 shims；软链接 安装scoop iwr -useb get.scoop.sh | iex 或者 iex (new-object net.webclient).downloadstring(‘https://get.scoop.sh’) 安装软件 scoop install sudo 查看环境存在的问题 scoop checkup 将一些scoop环境必须的软件安装一下 搜索软件 scoop search git 安装软件 scoop install git 查看软件信息 scoop info git 查看已经安装的软件 scoop list 卸载软件（-p删除配置） scoop uninstall git -p 更新软件 scoop update git 更新全部已安装软件 scoop update *...

Corepack（管理yarn和pnpm的包管理器的管理器） corepack是nodejs官方内置的CLI，nodejs16.9.0版本及其以上版本默认携带corepack一起分发（不需要额外安装corepack，16.9.0版本之下的需要手动安装或者更新nodejs版本） corepack的特点就是不需要安装yarn和pnpm（yarn和pnpm将通过corepack来进行管理安装以及使用），而且还可以限制项目使用特定的包管理器版本（避免一个项目用多个包管理器，而且包管理器的版本还不同的情况） 手动安装 npm install -g corepack 如果全局已经安装了yarn或者pnpm的话，需要先卸载 npm uninstall -g yarn pnpm 启用corepack corepack enable 限制包管理器版本 package.json "packageManager": "yarn@1.22.19" 表示该项目只能使用yarn包管理器的1.22.19版本，使用其他版本或者使用pnpm包管理器的话，会报错，例如Usage Error: This project is configured to use yarn 默认无法限制npm，需要通过corepack enable npm来手动限制，移除限制通过corepack disable npm来处理 修改packageManager的值后，yarn install，会自动安装指定版本 安装包管理器（会根据package.json下的packageManager来下载指定版本的包管理器） yarn install 指定一个新的包管理器 corepack prepare pnpm@7.13.5 --activate 使用本地包管理器（会将本地包管理器存储到一个压缩包里，方便离线使用） 获取 corepack prepare --all -o=D:/demo/test.tgz 启动压缩包内的包 corepack hydrate D:/demo/test.tgz 或者获取完成后立刻使用 corepack hydrate D:/demo/test.tgz --activate