前端每周学习分享——第1期

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基本使用

css预处理器 文件后缀名.sass

插值 #{}

变量$
变量需嵌入字符串时，要放在#{}中，如#{$side}
支持6种数据类型：数字、字符串、颜色、布尔值、空值、值列表

计算
如：right: $var * 10%;
颜色运算时分段运算，rgba运算必须alpha相同。

嵌套
支持选择器嵌套和属性嵌套(-前加冒号)
如属性border-color可写成：
sass sass border: { color: red; }

引用父元素&

@extend样式继承
例如：

.error { border: 1px #f00; background-color: #fdd; } .seriousError { @extend .error; border-width: 3px; }

@mixin混入指令
混入指令可以定义一个代码段的名称、参数。
@mixin 名称 （arguments）

@mixin sexy-border($color, $width) { border: { color: $color; width: $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规则必须属于一个块。

元素
一个块中元素的类名必须用父级块的名称作为前缀。

修饰符
使用单下划线来连接一个修饰符。