有個(gè)功能豐富的 react 腳手架,了解下？

senntyou 發(fā)布于2019-08-23 12:56 / 2718人閱讀

摘要：前言想要快速開始多頁(yè)面應(yīng)用項(xiàng)目結(jié)構(gòu)如何更合理想要快速上手想要快速使用想要一鍵使用并能快速自定義主題樣式可以的這里，受和的啟發(fā)，我做了這樣一個(gè)的腳手架，讓你一鍵搭建項(xiàng)目，快速開始。

前言

想要快速開始 react 多頁(yè)面應(yīng)用？

項(xiàng)目結(jié)構(gòu)如何更合理？

想要快速上手 Mobx?

想要快速使用 TypeScript?

想要一鍵使用 Ant-Design 并能快速自定義主題樣式？

可以的！??！

這里，受 Vue-cli 和 create-react-app 的啟發(fā)，我做了這樣一個(gè) react 的腳手架 handy-cli，讓你一鍵搭建項(xiàng)目，快速開始。

特性

簡(jiǎn)單易用，零配置

豐富的特性可供選擇 (Ant Design,TypeScript,Mobx,EsLint,TsLint)

支持導(dǎo)出 webpack 相關(guān)配置到項(xiàng)目目錄下

多頁(yè)面的支持

提供多種狀態(tài)管理方式

使用 ant-design 后,非常容易定制化 ant-design 主題

支持代碼保存時(shí)和代碼提交時(shí)校驗(yàn)代碼風(fēng)格

安裝

使用npm安裝:
npm install handy-cli -g


使用yarn安裝
yarn global add handy-cli

項(xiàng)目git 使用

handy create 

cd 

npm run start

預(yù)覽

使用手冊(cè)

Folder Structure

Single And Multi Page

Eject

Linter

State Management

Use Ant Design

Styles And Modules

Proxy

Folder Structure

運(yùn)行handy create you-app-name(例如選擇了 ant-design、eslint、mobx),handy-cli 會(huì)生成如下項(xiàng)目結(jié)構(gòu)

├── node_modules
├── public
├── modifyVars.json
├── package.json
├── readme.md
├── .eslintrc
├── .gitignore
└── src
    ├── components
    │?? ├── ResultItem
    │?? │?? └── ResultItem.js
    │?? └── Scroll
    │??     └── Scroll.js
    ├── modules
    │?? └── mobxGitSearch
    │??     ├── components
    │??     │?? ├── ResultList
    │??     │?? │?? └── ResultList.js
    │??     │?? └── Search
    │??     │??     └── Search.js
    │??     └── index.js
    ├── pages
    │?? └── index
    │??     ├── index.js
    │??     └── routes.js
    ├── stores
    │?? └── SearchGitStore.js
    └── utils
        └── index.js

components(公共組件目錄), 多個(gè)路由頁(yè)面都會(huì)用到的公共組件放在這

modules(路由頁(yè)面目錄),modules 下的每一個(gè)子文件夾代表一個(gè)單一的路由頁(yè)面,比如 Dashboard 頁(yè)面,歡迎頁(yè)面

pages(多頁(yè)面文件夾), 每一個(gè)子文件夾代表一個(gè)單一的SPA 項(xiàng)目,主要存放 SPA 的入口文件

stores(存放 mobx 的 stores)

utils

注意

上面說(shuō)的這些目錄已經(jīng)配置在config.resolve.alias,所以，在代碼中不需要指定相對(duì)路徑了

in src/modules/mobxGitSearch/index.js

import {shake} from "utils"

not

in src/modules/mobxGitSearch/index.js

import {shake} from "../utils"

Single And Multi Page

使用 handy-cli 初始化項(xiàng)目后，src/pages 下只有一個(gè) index 文件夾，也就是是個(gè)單頁(yè)應(yīng)用，要想添加新的獨(dú)立的單頁(yè)面很簡(jiǎn)單

例如，在 src/pages 下新建 doule12 文件夾

src
├── pages
??  └── index
    │   ├── index.js
    │?? └── routes.js
    ├── doule12
        │── index.js

in src/pages/doule12/index.js.

ReactDOM.render(
  double 12,
  document.getElementById("root"),
);

if (module.hot) {
  module.hot.accept(() => {});
}

重啟服務(wù)后訪問 localhost:3000/doble12 就可以看到新加的頁(yè)面，而 localhost:3000 是默認(rèn)的單頁(yè)面

Eject

如果你想修改一些 webpack 的配置，在項(xiàng)目根目錄，確認(rèn)代碼已經(jīng) commit 后，可以執(zhí)行handy eject來(lái)導(dǎo)出 webpack 的相關(guān)配置

Linter

支持 Tslint 和 Eslint

如果在創(chuàng)建項(xiàng)目時(shí)選擇了使用 Typescript,代碼校驗(yàn)就只提供 Tslint,要是沒選 TypeScript,就提供 Eslint 供選擇，Eslint 相關(guān)的提供了eslint with airbnb config 和 eslint with prettier config,推薦使用 airbnb config

要想修改一些校驗(yàn)規(guī)則，可以修改項(xiàng)目根目錄下的.eslintrc 或者 tslint.json

檢測(cè)時(shí)機(jī)

可以選擇在代碼保存或者提交代碼的時(shí)候校驗(yàn),為了代碼更快的編譯，在提交時(shí)校驗(yàn)比較好。提交代碼校驗(yàn)的相關(guān)配置在 package.json 中

"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "linters": {
      "*.{js,jsx}": [
        "eslint --fix",
        "git add"
      ]
    },
    "ignore": [
      "**/build/**.js"
    ]
  }

State Management

可供選擇的狀態(tài)管理方式

Normal(the build in Context API)

Mobx

Dva(開發(fā)中))

Use Ant Design

handy-cli 提供了 ant-design 的按需使用加載,創(chuàng)建項(xiàng)目時(shí)選擇了 ant-design 后可以零配置的直接使用

+ import { Pagination } from "antd";
+

自定義 ant-design 的樣式主題

如果選擇了使用 ant-design，在項(xiàng)目根目錄下會(huì)有個(gè) modifyVar.json 文件，在這里定義的那些 less 樣式變量,都可以在 modifyVar.json 中賦予新值，保存后，不用重啟服務(wù),自動(dòng)會(huì)重啟,頁(yè)面樣式就變了

Styles And Modules

支持 less,sass,stylus and css modules

注意: 如何想使用 css modules,樣式文件要以 .module.css 、 .module.less、 .module.sass、.module.styl作為后綴

Proxy

開發(fā)時(shí)要代理到后端服務(wù)，在 package.json 中新增 proxy 字段，如下

 "proxy": "http://localhost:4000",

 or

 proxy: {
  "/api": {
    target: "",
    pathRewrite:{
      "api":""
    },
    changeOrigin: true
  },
  "/foo": {
    target: ""
  }
 }

see more proxy options

最后

歡迎試用，提 BUG

云服務(wù)器 GPU云服務(wù)器 python功能了解豐富的存儲(chǔ)類型深度學(xué)習(xí)的了解對(duì)大數(shù)據(jù)的了解

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99099.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

senntyou

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

黑馬前端v7（含Vue3.0小兔鮮兒電商項(xiàng)目）完整代碼下載

閱讀 2242·2021-11-22 15:29
#雙11#狗云：全場(chǎng)VPS6折優(yōu)惠，可選中國(guó)香港CN2/日本軟銀/香港CMI/韓國(guó)/德國(guó)GIA/荷蘭

閱讀 4118·2021-11-04 16:13
帶你了解webpack

閱讀 1002·2019-08-29 16:58
前端相關(guān)框架總和

閱讀 349·2019-08-29 16:08
筆記-你不知道的JS-對(duì)象

閱讀 1469·2019-08-23 17:56
「干貨」細(xì)說(shuō) Javascript 中的浮點(diǎn)數(shù)精度丟失問題（內(nèi)附好課推薦）

閱讀 2396·2019-08-23 17:06
js封裝的一些常用方法

閱讀 3174·2019-08-23 16:55
【轉(zhuǎn)】《劍指Offer》JavaScript實(shí)戰(zhàn)——用兩個(gè)棧實(shí)現(xiàn)隊(duì)列

閱讀 2070·2019-08-23 16:22

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

有個(gè)功能豐富的 react 腳手架,了解下？

double 12

相關(guān)文章

**如何快速開發(fā)一個(gè)自己的項(xiàng)目腳手架？**

**【React 實(shí)戰(zhàn)教程】從0到1 構(gòu)建 github star管理工具**

**一個(gè)基于React整套技術(shù)棧+Node.js的前端頁(yè)面制作工具**

前端架構(gòu)師親述：前端工程師成長(zhǎng)之路的 N 問及回答

發(fā)表評(píng)論

0條評(píng)論

senntyou

男|高級(jí)講師

TA的文章

黑馬前端v7（含Vue3.0小兔鮮兒電商項(xiàng)目）完整代碼下載

#雙11#狗云：全場(chǎng)VPS6折優(yōu)惠，可選中國(guó)香港CN2/日本軟銀/香港CMI/韓國(guó)/德國(guó)GIA/荷蘭

帶你了解webpack

前端相關(guān)框架總和

筆記-你不知道的JS-對(duì)象

「干貨」細(xì)說(shuō) Javascript 中的浮點(diǎn)數(shù)精度丟失問題（內(nèi)附好課推薦）

js封裝的一些常用方法

【轉(zhuǎn)】《劍指Offer》JavaScript實(shí)戰(zhàn)——用兩個(gè)棧實(shí)現(xiàn)隊(duì)列

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

有個(gè)功能豐富的 react 腳手架,了解下？

double 12

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

有個(gè)功能豐富的 react 腳手架,了解下？