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

win配置前端开发环境相关推荐

python安装环境傻瓜式安装_前后端分离——前端开发环境傻瓜式一步到位 nodejs ruby python nginx 安装搭建配置...
前端开发环境一步到位一.准备工作 nodejs安装安装:next->next.... Ruby安装安装:next->next.... 需要配置到path:将安装目录复制到环境变量中, ...
【前端开发环境安装、配置、项目搭建全教程】
前端开发环境安装.配置.项目搭建全教程 1.Node环境安装简单的说 Node.js 就是运行在服务端的 JavaScrip,基于 Chrome JavaScript 运行时建立的一个平台,Node ...
前端实习日记——前端开发环境配置清单
前端实习日记--前端开发环境配置清单实习日记篇说明: 作为前端小菜鸟,初入职场实习,希望将所感所获简单总结,分享给同样处于新手期的小伙伴们,和大家共同成长~ 实习第一步:配环境! 实习第一天,自然是 ...
Ubuntu Linux下如何配置Android开发环境
下载和安装Win7系统Android开发环境中讲了怎样在Win7系统中安装Android开发环境,那么怎样在Linux系统中配置Android开发环境呢?本篇文章就将演示如何使用Eclipse.And ...
使用Grunt搭建自动化的web前端开发环境-完整教程
jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! AD: jQuery在使用grunt,bootstrap在使用grunt, ...
Windows下配置IDEA开发环境
Windows下配置IDEA开发环境文章目录 Windows下配置IDEA开发环境安装JDK 查看JDK是否安装下载JDK 配置环境变量安装IDEA 下载IDEA 安装IDEA 初始化IDEA ...
基于gulp编写的一个简单实用的前端开发环境
自从Node.js出现以来,基于其的前端开发的工具框架也越来越多了,从Grunt到Gulp再到现在很火的WebPack,所有的这些新的东西的出现都极大的解放了我们在前端领域的开发,作为一个在前端领域里 ...
【Yeoman】热部署web前端开发环境
本文来自 "简时空":<[Yeoman]热部署web前端开发环境>(自动同步导入到博客园) 1.序言记得去年的暑假看RequireJS的时候,曾少不更事般地惊为前端利 ...
前端自动化构建工具：用Gulp4.0搭建一个基本的前端开发环境
一个项目的完成一般需要经过三个步骤:初始化.开发和部署.在前端开发过程中,我们经常需要依靠一些自动化构建工具来优化前端工作流程,来帮助我们完成一系列繁琐的工作,例如浏览器热更新.ES6编译.代码压缩. ...

win配置前端开发环境

win配置前端开发环境相关推荐

最新文章

热门文章