常用的開發(fā)工具庫

打包工具webpack

webpack是現(xiàn)在最流行的打包工具之一，是javaScript的靜態(tài)模塊的打包器。會根據(jù)業(yè)務邏輯構建一個依賴的關系圖，每一個依賴的單元都是一個模塊，模塊可以是js文件 可以圖片資源或者css資源。在使用webpack的時候需要下面三個工具 
1. webpack 打包工具 
2. webpack-cli 命令行工具
3. webpack-dev-serve  node服務器

webpack的核心原理

1. 一切皆模塊
   模塊不僅包括js文件還包括css文件和圖片文件 。在webpack世界這些都可以是一個模塊。通過require或者import的方式引入。
2. 按需加載
   單頁應用在初始加載要加載非常大代碼量，由于加載時間過長會導致頁面有白屏或者等待現(xiàn)象。按需加載就是隨著用戶的操作每次只加載功能或者業(yè)務所需的代碼塊。webpack 內(nèi)置了非常強大的代碼分割功能，來實現(xiàn)按需加載。

   webpack 核心概念

   1. 入口entry :打包入口點在webpack中通過entry來設置
   2. 出口output： 用于指定打包出來的文件的路徑和文件名
   3. loader編譯器： 就是除了js文件以外其他文件的編譯器，其中rules用來配置編輯規(guī)則，test用于正則匹配，excude用于排除特定條件，use-loader是test匹配到的解析器模塊，use-options主要是與use-loader配合使用
   4. 插件plugins：是用于將loader之后的文件進行優(yōu)化分類壓縮并提供公共代碼等
   5. 打包模式mode：mode打包出來的有兩種模式。一種是開發(fā)模式 打出來的文件是沒有經(jīng)過壓縮的，命令：webpack --model=development ;另外一種是生產(chǎn)環(huán)境。打包出來的會壓縮，命令是： 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標簽，區(qū)別是后者在切換的時候 可以切換樣式

<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 框架主要是實現(xiàn)UI層，功能邏輯更多的是依賴第三方模塊。而與React搭配得較為契合的第三方模塊就是螞蟻金服前端團隊開發(fā)的ant-design模塊
antd-mobile庫提供了豐富的組件，常用的有：

1. Tabs 標簽頁，切換標簽可以定位到對應的內(nèi)容
2. Carousel走馬燈，主要用于輪播圖
3. DatePicker 日期選擇
4. ListView 長列表

css預處理之Less

less是css的預處理器，是對css的一種拓展。它具備動態(tài)語言的特點，如變量、運算、函數(shù)，所以是一門動態(tài)語言
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提供命名空間，可以將屬性集放入命名空間內(nèi)。
   #public{.input(@px) {width:@px; height:30px }; div>input{#public>.input(100px), color:red}} , 這里的#public就是一個命名空間
7. 嵌套規(guī)則
   指的就是父子元素之間的樣式可以進行嵌套，有利于維護
   body{background:white; div{color: red}}
8. Color函數(shù)
   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%) 表示透明度是第一個參數(shù)的10%
   spin(red, 10) 表示顏色加深10度
   spin(red, -10) 表示顏色減弱10度
   mix(red, blue) 表示兩個顏色的混合值
9. Math函數(shù)
   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一樣有作用域的概念 會優(yōu)先在作用域內(nèi)查找變量 沒有再往父類中查找
13. javascript 表達式
    @var:`“hello” .toUpperCase() “!”
14. 注釋
    //表示單行注釋 /* */表示多行注釋
15. import
    @import"style.less" import導入模塊

第三方模塊安裝

所有的模塊安裝都很簡單 就是npm install + modelName
例如安裝上面router
npm install react-router-dom antd 這樣就可以同事下載路由模塊和螞蟻的的移動端模塊