npm包、scss

npm包管理工具

    在统一的地方下载项目依赖的第三方包

    安装:随nodejs一起安装

    检查:npm -v   (检查安装是否成功)

    下载: npm install 包名 -g  (-g为全局安装,任意目录下可以使用)

          npm install jquery

    删除:npm uninstall 包名 -g

    项目管理:(初始化)   npm init

                       npm init -y (-y为默认)

    镜像切换工具  nrm  (切换npm服务器)

            npm install nrm -g

            nrm ls 查看所有镜像地址

            nrm test 查看所有镜像速度

            nrm use 镜像名    切换镜像

css预处理器

    less

    stylus

    sass :两个版本 sass / scss

      -安装:npm install sass -g

      -定义一个后缀名为.scss的文件

      -编译scss为css执行

         ->sass XXX.scss YYY.css  =>将XXX.scss文件转成YYY.css文件

         ->sass --watch index.scss:index.css   监听文件

         ->sass --watch sass:css     监听文件夹

         或者使用vscode中  Easy Sass插件

      -语法:

          @import'./mixin.scss'   //@import关键字引入    

          $w:100px   //($关键字定义变量)

          //@mixin关键字定义函数,radius为函数名,

          //$w为参数, :200px表示没有传参时默认值为200px

          @mixin radius($w:200px){    

             width:$w;

             height:200px

          }

          .box{

              @include radius(100px) //调用函数

              @extend .box1    //继承.box1的属性

          }

 

常用插件:

      swiper      轮播插件

      bootstrap   css框架

      Element     网站快速成型工具

      jquery

     www.bootcdn.cn   插件网站