JavaScript入门 npm包管理工具/css预处理器Day33

npm包管理工具

---

统一下载第三方包工具

为什么需要包管理工具

项目开发时一定会用到第三方包
   轮播效果        swiper
   网络编程        axios    
   cookie本地存储  js.cookie
   加密            sha256

   到官网下载第三方包

npm包管理工具用法 

随nodejs环境一起安装
>npm -v

下载
>npm install 库  
    本地安装  当前目录node_modules文件夹下   
 简写: npm i 库                 
>npm install 库  -g
     全局安装
 
卸载
   npm uninstall  库
   npm uninstall  库  -g
更新
   npm update 库 

nrm工具 镜像管理工具

>npm i nrm -g
>nrm list
>nrm test
>nrm use taobal  

其它包管理工具介绍

cnpm 
  >npm i cnpm -g
  >cnpm i 库
yarn
  >npm i yarn -g
  >yarn add 库
pnpm

npm安装依赖 - 生产环境和开发环境

npm i 库 -D
    -D参数表示安装依赖是开发环境
npm i 库 -S
    -S参数表示安装依赖是生产环境

npm i -g 库 -D 
npm i -g 库 -S 

css预处理器

---

什么是css预处理器

css扩展语言，用编程的方式书写css样式
三款
   less
   sass
      sass
      scss 最新版本
   stylus

css预处理器编译

1. 定义一个scss后缀结尾文件

    index.css    
       div{
           color:red;
       }
    
    index.scss
       div{
           color:red;
       }
    完全兼容css

2. index.scss 浏览器不能运行scss 

浏览器只能识别 html , css , javascript 

 index.scss -编译->  index.css
     变量
     嵌套

   sass库
   >npm i -g sass -D  
         pageckage.json区分 
   >sass index.scss index.css 
   >sass --watch index.scss:index.css
   >sass --watch scss:css

css预处理器插件

 easy sass

 sass事例

    <div>
        <h2>css预处理器</h2>
        <p>less</p>
        <p>sass</p>
        <p>stylus</p>
    </div>
    <button class="primary-btn">主要按钮</button>
    <button class="success-btn">成功按钮</button>

/*index.scss*/
@import './variable.scss';
@import './mixins.scss';
/*按钮父类*/
.btn {
    @include btnMixin(200px, 40px, skyblue);
}
.primary-btn {
    @extend .btn;
    background-color: #409eff;
    color: white;
}
.success-btn {
    @extend .btn;
    background-color: #67c23a;
    color: white;
    &:hover {
        background-color: #74d145;
        cursor: pointer;
    }
}
div {
    width: 200px;
    h2,
    p {
        font-size: 20px;
    }
    h2 {
        font-weight: 400;
        @include btnMixin(300px, 40px, pink);
        &:hover {
            background-color: skyblue;
            cursor: pointer;
        }
    }
    p {
        color: $color;
        &:first-of-type {
            color: blue;
            @include btnMixin(200px, 30px, skyblue);
        }
    }
}

/*mixins.scss*/
@mixin btnMixin($w, $h, $bgcolor) {
    width: $w;
    height: $h;
    line-height: $h;
    text-align: center;
    background-color: $bgcolor;
    border-radius: 5px;
    border: none;
    outline: none;
}