教程/总结

npm包管理命令

[toc]发布npm包注册npm使用npm 命令注册：npm adduserUnable to authenticate, need：Basic // 用户名已被注册账号登录npm login发布包，上传到npm包服务器npm publish注意：如果报错：'You do not have permission to publish "mypackage1". Are you logged in as the correct user?'表示包’mypackage1‘已经在包管理器已经存在被别人用了，需要更该包名称注意：如果发布时报错：‘no_perms Private mode enable, only admin can publish this module:’表示当前不是原始镜像，可能用的是其他镜像，如淘宝镜像，要切换回原始的npm镜像，命令：npm config set registry https://registry.npmjs.org/，如果用了nrm工具，使用命令：nrm use npm 切换更新包 npm version patch 该命令在原来的版本上自...

2019-07-24

4分钟阅读

Vue/总结

前端团队代码评审 CheckList 清单

前端团队代码评审 CheckList 清单前言前端团队有评审代码的要求，但由于每个开发人员的水平不同，技术关注点不同，所以对代码评审的关注点不同，为了保证代码质量，团队代码风格统一，特此拟定一份《前端团队代码评审 CheckList 清单》，这样代码评审人员在评审代码时，可以参照这份清单，对代码进行评审。从而辅助整个团队提高代码质量、统一代码规范。如果你的团队还没有这么一份代码评审 CheckList 清单，也许这正是你需要的；如果你的团队已经有了代码评审参照标准，这份清单也许能起到锦上添花的效果。一、代码静态检查工具1、使用 eslint 工具对 javascript 代码进行检查检查的规范继承自 eslint-config-standard 检验规则，具体的规则介绍参照链接：https://cn.eslint.org/docs/rules/ ，这里及以下部分不再重复介绍这些检验规则。2、使用 stylelint 工具对 css 样式代码进行检查检查的规范继承自 stylelint-config-standard 检验规则，具体的规则介绍参照链接：https://www.npm...

2019-07-09

50分钟阅读

教程/总结/Vue

前端优化

Object.freeze这算是一个性能优化的小技巧吧。在我们遇到一些 big data的业务场景，它就很有用了。尤其是做管理后台的时候，经常会有一些超大数据量的 table，或者一个含有 n 多数据的图表，这种数据量很大的东西使用起来最明显的感受就是卡。但其实很多时候其实这些数据其实并不需要响应式变化，这时候你就可以使用 Object.freeze 方法了，它可以冻结一个对象(注意它不并是 vue 特有的 api)。 当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter，它们让 Vue 能进行追踪依赖，在属性被访问和修改时通知变化。 使用了 Object.freeze 之后，不仅可以减少 observer 的开销，还能减少不少内存开销。相关 issue。 使用方式：this.item = Object.freeze(Object.assign({}, this.item)) 这里我提供了一个在线测速 demo，点我。 通...

2019-05-09

5分钟阅读

教程/总结

moment

计算两个时间段的时间差const diff = moment(endTime).diff(moment(startTime), 'days') // 天数差

2019-04-29

1分钟阅读

总结

第二阶段总结

总结经过两个阶段的培训增强了领悟、创新和推断能力。掌握自学的方法，学会条理、耐心的处理和完成任务。思考方式逐渐成熟，逻辑性逐渐规范明确。完成每个阶段的任务都能学到很多，在编程中代码不断符合规范，积累了很多代码片段。在任务中发现问题、解决问题并总结生命周期函数/methods/watch里面不应该使用箭头函数vue中生命周期函数, methods, watch 自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。对computed、watch、methods的认知computed属性的结果会被缓存，依赖的属性如果发生变化才会重新计算，把他当做普通属性来使用；watch属性，主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作，可以把他看作是computed和methods的结合体；methods方法表示一个具体的操作，主要书写业务逻辑；关于数据的请求如果可以的话，最好能在局部根组件里请求一次ajax数据，然后从局部根组件里把接收到的数据分别传给各个局部的子组件，而不是每个局部的子组件都发送一次ajax请求。localStorage可能用户会有不小...

2019-03-11

4分钟阅读

总结

2019-03-08总结

今日目标完善项目已完成投票活动、调查问卷页修改原有代码实现根据路由请求数据顶部导航使用sessionStorage记录侧边菜单选中项api params 修改

2019-03-09

1分钟阅读

总结

2019.03.07总结

问题element-ui 自定义主题在项目中改变 SCSS 变量按照官方的方法新建 element-variables.scss 写入以下内容：/* 改变主题色变量 */ $--color-primary: #46c37b; /* 改变 icon 字体路径变量，必需 */ $--font-path: '~element-ui/lib/theme-chalk/fonts'; @import "~element-ui/packages/theme-chalk/src/index";重编译后无效目前解决方法使用 element-ui 官方 在线主题生成工具 下载生成的文件并修改 .babelrc 的配置{ "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "~theme"...

2019-03-07

3分钟阅读

总结

2019-03-06总结

GitLab今日目标划分功能组件与业务组件修改目录命名修改样式细节部分优化axios封装已完成1.划分功能组件与业务组件业务组件由功能组件组成2.目录命名采用驼峰命名3.利用sessionStorage记录底部APP下载的显示与隐藏4.修改顶部下拉菜单动画，与B站官网一致5.课程表页面BEM规范6.优化axios封装待完成untils.js 代码抽取查看vue官方文档，学习渲染函数 & JSX

2019-03-06

2分钟阅读

总结

第一阶段总结

bilibili 临摹静态页面项目问题下拉菜单的动画未能实现一致，存在差异课表页面功能默认加载当前周期课表根据选择的学期时间，显示课程月份，并加载相应数据不同课程背景不同，相同课程的颜色值相同由于 api 接口返回数据问题，可点击右上角...图标请求 mock 数据问题yarn run build执行命令打包后 CSS 多行省略失效 (-webkit-box-orient 失效)原始代码为：@mixin ellipsis($count: 1) { display: inline-block; text-align: left; display: -webkit-box; -webkit-line-clamp: $count; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }编译后,会过滤-webkit-box-orient: vertical;解决方法关闭 autoprefixer 然后再开启，用注释就可以做到，简直黑科技@mixin ellipsis(...

2019-03-04

5分钟阅读

总结

2019.03.01总结

遇到的问题使用 yarn 安装项目的所有依赖时每到安装 node-sass 总会报错 Command failedyarn install解决方法经过 Google yarn安装node-sass失败的解决方案//修改yarn 淘宝镜像 yarn config set registry http://registry.npm.taobao.org // 只指定node-sass的下载源 yarn config set sass-binary-site http://npm.taobao.org/mirrors/node-sassmap实例的属性和操作方法size属性 返回成员总数set(key,value) 设置键值对，返回Map结构get(key) 读取key对应的值，找不到就是undefinedhas(key) 返回布尔值，表示key是否在Map中delete(key) 删除某个键，返回true，失败返回falseclear() 清空所有成员，没有返回值遍历方法Map 结构原生提供三个遍...

2019-03-01

4分钟阅读