win配置前端开发环境

1.node安装

[待探索]node-msi镜像才能安装上，正常显示node -v，如果只是下载二进制文件，无法node -v

---不要指定node-cache/node-global，否则会出现权限报错，只能通过管理员角色运行powershell

2.git&sorceTree学习

下载慢解决方案

3.powershell

powershell是个很神奇的东西，安装完node之后，npm i 要从win+x，通过管理员的身份运行(否则会出现权限报错)，后面又出现了禁止运行相关脚本的报错

解决方案：

在使用vscode运行tsc命令监控文件时，报错提示禁止运行脚本。

“tsc : 无法加载文件 C:\Users\14140\AppData\Roaming\npm\tsc.ps1，因为在此系统上禁止运行脚本”

查其原因是因为powershell对于脚本的执行有着严格的安全限制。

可以使用Set-ExecutionPolicy来修改PowerShell中执行策略的用户首选项(preference). 执行策略是Windows PowerShell安全策略中的一部分. 它将决定你是否可以载入配置文件(包括你的Windows PowerShell profile文件)和运行脚本, 它将会在运行前确定哪些文件必须具有数字签名(digitally signed).

其可选的参数如下：

Restricted: 不载入配置文件, 不执行脚本. "Restricted"是默认值.

AllSigned: 所有的配置文件和脚本必须通过信任的出版商签名(trusted publisher), 这里所指的脚本页包括你在本地计算机上创建的脚本.

RemoteSigned: 所有从互联网上下载的脚本必须通过信任的出版商签名(trusted publisher).

Unrestricted: 载入所有的配置文件和脚本. 如果你运行了一个从互联网上下载且没有数字签名的脚本, 在执行前你都会被提示是否执行

解决办法：

一、使用管理员身份打开PowerShell

二、键入Set-ExecutionPolicy RemoteSigned命令

三、键入Y

最后可以使用Get-ExecutionPolicy来看看是否修改成功

4.安装angular

---Tour of Heroes: angular-in-memory-web-api  0.14.x要换成0.13.x，会出现404错误

---联想到了linux的管道

---生命周期：angular生命周期

---防抖&节流：debounceTime/distinctUntilChanged

5.安装vue

vue入门技能树

6.scss快速入门

---选中当前元素的父元素，使用&表示

/*scss*/
.container ul {
    border:1px solid #aaa;
    list-style:none;
    
    li {
        float:left;
    }
    
    li>a {
        display:inline-block;
        padding:6px 12px;
    }
    
    &:after {
        display:block;
        content:"";
        clear:both;
    }
}

---在嵌套规则中可以写任何css代码，包括群组选择器（,），子代选择器（>），同层相邻组合选择器（+）、同层全体组合选择器（~）等等

嵌套属性

先看一个例子

/*css*/
li {
    border:1px solid #aaa;
    border-left:0;
    border-right:0;
}

这个例子中我们只需要两条边框，使用SCSS重写一遍。

/*scss*/
li {
    border:1px solid #aaa {
        left:0;
        right:0;
    }
}

scss识别一个属性以分号结尾时则判断为一个属性，以大括号结尾时则判断为一个嵌套属性，规则是将外部的属性以及内部的属性通过中划线连接起来形成一个新的属性。

----引入变量

@import App2.scss

引入的某些样式不更改原有的样式，这时我们可以使用变量默认值

$border-color:#ccc !default; //声明变量

---注释

SCSS中的注释有两种

（1）/*注释*/:这种注释会被保留到编译后的css文件中。

（2）//注释:这种注释不会被保留到编译后生成的css文件中。

---mixin.混合器（函数）

@mixin get-border-radius($border-radius:5px,$color:red){
    -moz-border-radius: $border-radius;
    -webkit-border-radius: $border-radius;
    border-radius: $border-radius;
    color:$color;
}

带默认值版本

---使用函数@include

.container {
    border:1px solid #aaa;
    @include get-border-radius;         //不传参则为默认值5px
    @include get-border-radius(10px,blue);   //传参
}
/*多个参数时，传参指定参数的名字，可以不用考虑传入的顺序*/
.container {
    border:1px solid #aaa;
    @include get-border-radius;         //不传参则为默认值5px
    @include get-border-radius($color:blue,$border-radius:10px);   //传参
}

/*多个参数时，传参指定参数的名字，可以不用考虑传入的顺序*/

使用混合器并不需要在html文件中使用class既可达到复用的效果

---继承

定义

%border-style {
  border:1px solid #aaa;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

继承

.container {
	@extend %border-style;
}

.container {
	@extend %border-style;
	color:red;
}
.container1 {   //继承另一个选择器
	@extend .container;
}

---操作符

SCSS提供了标准的算术运算符，例如+、-、*、/、%。

/*SCSS*/
width: 600px / 960px * 100%;
/*编译后的CSS*/
width: 62.5%;

width: 100px + 100px + 100px; //加法
width: 100px - 100px + 100px; //减法
width: 100px * 100 //乘法,注scss的乘法和除法是带单位的
width: (100px/3)  //注意这里需要带括号,如果不带括号会当场分割数子
width: $width / 3 //也可以不带括号,但是里面计算的一定要有声明的变量,因为这个语法css不认识,那么就会被解析成SCSS
width: 100 % 3px //SCSS也支持取模运算

颜色相加

$red:#ff0000;
p{
   color : $red + #888; //#ff8888
}
div{
  color :$red + #111;  //#ff1111
}

变量还有字符串插值

body {
  p {
    $content: "---";
    &:before {
      content: "[#{$content}";
    }
 
    &:after {
      content: "#{$content}]";
    }
  }
}