淘寶彈性佈局方案lib-flexible在react框架中的實踐

本項目是淘寶彈性佈局方案lib-flexible在react框架中的實踐，由於本人使用react較多，而且搜索網上雖然有教學flexible如何使用，可是並無一個完整地運用項目，因此準備本身作一個，加深對手機適配方案的探究

項目模仿蘇寧易購的移動端頁面，它自己是基於media query的，因此沒有copy，原創！！！

項目地址

項目連接

項目截圖

項目結構

本項目是基於create-react-app框架本身一步步搭建出來的，踩了不少坑，最多的就是版本不一致致使的編譯錯誤，還找不到緣由，mmp......

assets————存放字體
build————webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js
dist————編譯輸出目錄
App.test.js————測試文件
index.html————定義最重要的id：root，可是不要
index.js————最重要的渲染js
serviceWorker.js————create-react-app自帶，默認關閉，我手賤開啓了......
src

component————組件
pages————頁面
store————用於整合redux

技術棧

• React

1.classnames————合併class名，此處由於使用cssModules，因此爲了合併local和普通css類名

2.支持ES6語法，支持箭頭函數

3.px2rem————使用atom插件px2rem-plus對750px設計圖進行px->rem的轉換，若是你使用的不是atom，能夠網上搜搜如何使用，sublime插件名叫px2rem

4.支持less和sass預編譯css語言，使用cssModules對類名修飾

• webpack

1.使用webpack@3.11.0版本,webpack-dev-server@2.9.7，webpack-dev-server若是是3.x編譯就會出錯mmp......

2.HtmlWebpackPlugin————用於生產html入口文件，只要用webpack都會用這個插件吧......

3.支持熱更新————HotModuleReplacementPlugin()

dev指令————package.json文件中webpack-dev-server --inline --progress --hot --config build/webpack.dev.conf.js

• lib-flexible

在index.js入口文件頭部引入————import 'lib-flexible'

基本全部樣式都按照750px設計圖寫，使用px2rem插件轉成rem

字體單獨定義

.font-dpr(@font-size){
    font-size: @font-size;

    [data-dpr="2"] & {
        font-size: @font-size * 2;
    }

    [data-dpr="3"] & {
        font-size: @font-size * 3;
    }
}
複製代碼

• swiper@4.4.6————最新版本
  
  
  

• iconfont————把阿里字體引入，使用unicode字符，支持修改顏色，給我這種不想本身ps圖標的前端工程師開了一條捷徑......
  
  
  

使用方法

• npm i

• npm run build

• npm run dev

• 大功告成

最終說一下，這篇文章都是我一個一個字打出來的，若是你路過以爲我寫的不錯，或者使用了個人項目結構，留個star吧！！！