1. 项目工具相关
1.1. npm包管理器
npm是Node.js的包管理工具，用于管理javascript包。
npm由三个部分组成：网站、注册表、命令行工具。
npm太慢，还可以使用淘宝镜像cnpm。
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install 切换到项目目录后下载所有依赖
npm 指令：
npm version
npm install npm@latest -g 给npm项目添加依赖模块
npm [install/i] [package_name]
npm uninstall
npm init webpack my-project
npm list 根据 package.json 查询模块状态
npm run [npm脚本名]
npm与vue:
npm安装vue-cli：npm install -g @vue/cli
使用vue创建一个项目：vue create my-project
package.json 是 npm仓库的描述文件, 其中包括项目依赖, 脚本执行, 版本号，依赖环境等说明.
npm 允许在package.json文件里面，使用scripts字段定义脚本命令。
详见阮一峰npm scripts 使用指南
1.2. git基本操作
git init 初始化仓库
git remote add [-t <branch>] [-m <master>] <name> <url> 从url地址添加远程仓库并命名为name。
git push/pull 远程仓库名 本地分支名:远程分支名 推送、拉取
（如果config配置文件中只有一个远程仓库一个分支，则可以省略指定名字）
git add .添加文件到暂存区(stage)
git commit -m "describ" 将暂存区内容提交到分支
git status
git diff
git log查看提交历史（历史版本）
git log --graph查看分支合并图
git reset --hard HEAD^
git checkout -- benchmarks.rb取消对指定文件的修改
git reset HEAD benchmarks.rb取消已暂存的文件
$ git checkout -b dev 创建并切换到dev分支
git branch 查看当前本地分支
git branch -r 查看远程分支
git branch dev创建dev分支
git branch -d dev删除dev分支
git merge dev合并dev分支到当前分支
git rebase
git stash将工作储藏到栈上，储藏后工作目录是干净的
git stash list 查看储藏列表
git stash apply <储藏名>将储藏恢复到工作区
1.3. git多仓库、多身份
要管理多仓库、多身份，首先就要认识git的配置。
使用git config 配置git,它会修改相应的配置文件。
$ git config --global user.name "John Doe"
$ git config --global user.email johndoe@example.com
| 文件位置 | git config 选项 | 生效范围 |
|---|---|---|
| /etc/gitconfig | --system | 对系统上所有用户及他们所拥有的仓库都生效 |
| ~/.gitconfig | --global | 对当前用户生效 |
| .git/config | --local | 对当前仓库有效 |
使用git config --help 查看所有的可配置项。
一个配置文件的大致格式如下：
给[remote "origin"]设置多个url就可以使用"origin"仓库名同时提交/拉取多个仓库。
如果管理的仓库很多，一个个手动配置比较麻烦，可以利用初始模板+钩子函数+本地配置来做一个git自动化小工具来自动生成配置文件。详见：文章 和 github地址。
1.4. SASS基本使用
Sass css预处理器 文件后缀名.sass
- 插值 #{}
- 变量$
变量需嵌入字符串时，要放在#{}中，如#{$side}
支持6种数据类型：数字、字符串、颜色、布尔值、空值、值列表 - 计算
如：right: $var * 10%;
颜色运算时分段运算，rgba运算必须alpha相同。 - 嵌套
支持选择器嵌套和属性嵌套(-前加冒号)
如属性border-color可写成：sass border: { color: red; } - 引用父元素&
- @extend样式继承
例如：.error { border: 1px #f00; background-color: #fdd; } .seriousError { @extend .error; border- 3px; } - @mixin混入指令
混入指令可以定义一个代码段的名称、参数。
@mixin 名称 （arguments）@mixin sexy-border($color, $width) { border: { color: $color; $width; style: dashed; } } - @include 引用混合样式
p { @include sexy-border(blue, 1in); }
1.5. BEM
BEM是CSS的书写规范。BEM Tencent github wiki
组件之间的完全解耦，不会造成命名空间的污染。
BEM 命名会使得 Class 类名变长，但经过 gzip 压缩后这个带宽开销可以忽略不计。
BEM代表 “块（block）,元素（element）,修饰符（modifier）”。
- 块
块的CSS类名会加一些前缀（ ui-），这些前缀在CSS中有类似命名空间 的作用。
一个块的命名规则如下：
CSS中只能使用类名（不能是ID）。
每一个块名应该有一个命名空间（前缀）
每一条CSS规则必须属于一个块。 - 元素
一个块中元素的类名必须用父级块的名称作为前缀。 - 修饰符
使用单下划线来连接一个修饰符。
在选择器中，由以下三种符号来表示扩展的关系：
- 中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。
__ 双下划线：双下划线用来连接块和块的子元素
_ 单下划线：单下划线用来描述一个块或者块的子元素的一种状态
type-block__element_modifier
1.6. 其他工具
- cmder
在windows中使用的Linux终端，开发 必 备。 - 图床工具
自动把本地图片转换成网络链接的一类工具，云服务器+一键上传工具。
使用了图床工具PicGo， 算得上一款比较优秀的图床工具。它是一款用 Electron-vue 开发的软件，可以支持微博，七牛云，腾讯云COS，又拍云，GitHub，阿里云OSS，SM.MS，imgur 等8种常用图床，功能强大，简单易用。 - markdown编辑器:Typora
界面清爽，功能齐全，支持图片拖拽。 - google浏览器插件：Momentum
Replace new tab page with a personal dashboard featuring to-do, weather, and inspiration
2.阅读列表
3.代码相关
3.1. flex弹性布局
使用display:flex|inline-flex将元素申明为弹性容器，flex是块级，inline-flex是行内。
flex container
属性的global values 有 inherit initial unset，下表近列出Default value
| 属性 | 值 | 意义 |
|---|---|---|
| flex-direction | row column row-reverse column-reverse | 决定主轴方向 |
| flex-wrap | nowrap wrap wrap-reverse(向上换行) | 决定主轴上的换行方式 |
| flex-flow | 简写，默认为row nowrap | |
| justify-content | start center end space-between space-around strench | 主轴上的对齐方式 |
| align-items | start center end strench baseline | 侧轴上的对齐方式 |
| align-content | start center end space-between space-around strench | 多主轴间的对齐方式 |
flex item
| 属性 | 值 | 意义 |
|---|---|---|
| order | 定义项目的排列顺序 | |
| align-self | auto start center end strench baseline | 覆盖容器的align-items属性，决定当前项目的侧轴对齐方式 |
| flex-grow | 项目的放大比例，默认0（不放大） | |
| flex-shrink | 项目的缩小比例，默认1 | |
| flex-basis | 项目在主轴上的初始大小（基准） | |
| flex | flex-grow, flex-shrink 和 flex-basis的简写 |
3.2. 固定与自适应
需要定长定宽的组件，要考虑内容溢出。
自适应的组件，要考虑子元素变化时组件高宽变化的影响,比如当某些子元素加载后更改了宽高，就会使组件闪烁。
比如常用的单行文本:
.title{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
3.3. 去除小程序button组件的边框
因为源码里button的边框不是直接用border实现的。
使用 button::after{ border: none; }
组件边框的实现方法有多种，如border、outline、box-shadow、底层遮罩
3.4.CSS变量
css变量使css更加灵活，能更方便的做响应式布局。
变量表示，sass用$，less用@，官方css用--。
变量的声明：
body {
--fontColor:gray;
--bar: "hello ";
}
读取变量，使用var()函数：
变量值只能用作属性值，不能用作属性名
.text{
color:var(--fontColor,black);
content:var(--bar)'world'
}
- 如果变量值是一个字符串，可以与其他字符串拼接。
- 如果变量值是数值，不能与数值单位直接连用,可用calc()函数来连接。
- 变量带有单位值，不能写成字符串。
变量的作用域就是它所在选择器的有效范围，变量多次声明读取时的优先级与css的层叠规则一致。
js操作css变量
// 设置变量
document.body.style.setProperty('--primary', '#7F583F');
// 读取变量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'
// 删除变量
document.body.style.removeProperty('--primary');