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}]";}} }

總結

以上是生活随笔為你收集整理的win配置前端开发环境的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。