前端常用的开工具库

常用的开发工具库

打包工具webpack

webpack是现在最流行的打包工具之一，是javaScript的静态模块的打包器。会根据业务逻辑构建一个依赖的关系图，每一个依赖的单元都是一个模块，模块可以是js文件 可以图片资源或者css资源。在使用webpack的时候需要下面三个工具 
1. webpack 打包工具 
2. webpack-cli 命令行工具
3. webpack-dev-serve  node服务器

webpack的核心原理

1. 一切皆模块
   模块不仅包括js文件还包括css文件和图片文件 。在webpack世界这些都可以是一个模块。通过require或者import的方式引入。
2. 按需加载
   单页应用在初始加载要加载非常大代码量，由于加载时间过长会导致页面有白屏或者等待现象。按需加载就是随着用户的操作每次只加载功能或者业务所需的代码块。webpack 内置了非常强大的代码分割功能，来实现按需加载。

   webpack 核心概念

   1. 入口entry :打包入口点在webpack中通过entry来设置
   2. 出口output： 用于指定打包出来的文件的路径和文件名
   3. loader编译器： 就是除了js文件以外其他文件的编译器，其中rules用来配置编辑规则，test用于正则匹配，excude用于排除特定条件，use-loader是test匹配到的解析器模块，use-options主要是与use-loader配合使用
   4. 插件plugins：是用于将loader之后的文件进行优化分类压缩并提供公共代码等
   5. 打包模式mode：mode打包出来的有两种模式。一种是开发模式 打出来的文件是没有经过压缩的，命令：webpack --model=development ;另外一种是生产环境。打包出来的会压缩，命令是： webpack --model=development
   6. 服务器配置devserve:用于配制本地服务器，可以配置启动端口，主机地址，是否热启动等信息

页面跳转之 react-router-dom

import React from 'react';
import {HashRouter, BrowserRouter, Router, Redireact, Switch, Link, NavoLink } from 'react-router-dom';
import Home from './component/home';
import Detail from './component/detail';
const Router =() => {
<BrowerRouter><Route path="/detail" name="detail" component={Detail}/></BrowerRouter>
}
export default Router;

路由配置主要有：
path: 组件相对路径
name:组件的路径别名
component:组件地址
在路由配置中有两个属性exact、strict ，想要严格匹配两个都需要为true

路由的跳转方式

link 或者 NavLink ，实质是一个a标签，区别是后者在切换的时候 可以切换样式

<ul>
<li>
<NavLink exact to="/" activeStyle={{fontWeight:'bold',color:'red',
}}>home</NavLink>
<NavLink exact to="/detail" activeStyle={{fontWeight:'bold',color:'red',
}}>detail</NavLink>
</li>
</ul>>>>>>>>>>>>>>>>>>>>>>>>>>>>.
<ul>
<li onclick{() => this.props.history.push({pathname:'detail'})}>
<div>home</div>
</li>
<li onclick{() => this.props.history.push({pathname:'home'})}>
<div>detail</div>
</li>
</ul>

组件库ant-design

React 框架主要是实现UI层，功能逻辑更多的是依赖第三方模块。而与React搭配得较为契合的第三方模块就是蚂蚁金服前端团队开发的ant-design模块
antd-mobile库提供了丰富的组件，常用的有：

1. Tabs 标签页，切换标签可以定位到对应的内容
2. Carousel走马灯，主要用于轮播图
3. DatePicker 日期选择
4. ListView 长列表

css预处理之Less

less是css的预处理器，是对css的一种拓展。它具备动态语言的特点，如变量、运算、函数，所以是一门动态语言
less既可以在客户端使用，也可以在服务器使用 node.js
客户端使用如下：

<link rel="stylesheet" href="style.less">
<script src="less.min.js"></script>

服务端： npm install -g less

Less语法

1. 变量
   @width:100px; div{width:@width}
2. 运算
   @width:100px; div{width:@width/2}
3. 字符串插值
   @url=‘img/index’; div{background: url(“@{url}search.png”)}
4. 混合
   .input{width:100px;height:30px}; div>input{.input,color:red} 注意这里的.input可以看成一个变量
5. 带参混合
   .input(@px) { width: @px; height: 30px};
   div>input{.input (100px) ,color: red}
6. 命名空间
   为了不和其他样式重名，Less提供命名空间，可以将属性集放入命名空间内。
   #public{.input(@px) {width:@px; height:30px }; div>input{#public>.input(100px), color:red}} , 这里的#public就是一个命名空间
7. 嵌套规则
   指的就是父子元素之间的样式可以进行嵌套，有利于维护
   body{background:white; div{color: red}}
8. Color函数
   lighten(red, 10%) 亮度浅10%
   darken(red, 10%) 亮度深10%
   saturate(red, 10%) 饱和度深10%
   desaturate(red, 10%) 饱和度浅10%
   fadein(red, 10%) 透明度深10%
   fadeout(red, 10%) 透明度浅10%
   fade(red, 10%) 表示透明度是第一个参数的10%
   spin(red, 10) 表示颜色加深10度
   spin(red, -10) 表示颜色减弱10度
   mix(red, blue) 表示两个颜色的混合值
9. Math函数
   round(2.5) 表示四舍五入 结果为3
   ceil(2.4) 表示向上取整 结果为 2
   floor(2.5) 表示想下去整 结果为3
   percentage (0.25) 表示百分之25
   如：div{border-radius: percentage(0.5)} 得到的就是50%圆角
10. 模式匹配
    如： condition(@switch);
    condition(red){background: red};
    condition(blue){background: blue}; 输入 .condition(red) 得到{background: red}
11. 导引表达式
    .condition(@px)when (@px>=300){background: red};
    .condition(@px)when (@px<300) {background: blue};
    当输入.condition(400) 得到的是{background: red}
12. 作用域
    Less与JS一样有作用域的概念 会优先在作用域内查找变量 没有再往父类中查找
13. javascript 表达式
    @var:`“hello” .toUpperCase() “!”
14. 注释
    //表示单行注释 /* */表示多行注释
15. import
    @import"style.less" import导入模块

第三方模块安装

所有的模块安装都很简单 就是npm install + modelName
例如安装上面router
npm install react-router-dom antd 这样就可以同事下载路由模块和蚂蚁的的移动端模块