支付寶框架UmiJs(五公尺)

2021-08-15 20:51:15 字數 2283 閱讀 2191

也是剛剛了解這套框架,那麼廢話少說我們來切入主題吧。umi 就是一套零配置,按最佳實踐進行開發的前端框架。

具有以下幾點特性:

1、高效能

pwa、按需載入、tree-shake、scope-hoist、智慧型提取公共檔案、critical css、preload、hash build、preact 等等,並且,你相同的**會隨著 umi 的改進而不斷提公升效能。

2、開箱即用

你只需乙個依賴 umi 就可啟動開發,而無需安裝 react、preact、react-router、eslint、babel、jest 等。

3、多端

一鍵切換單頁和多頁,乙份**同時部署到 cdn、容器、雲鳳蝶等環境,詳見部署文件。

4、擴充套件性

umi 的整個生命週期都是外掛程式化的,甚至就是由大量外掛程式組成,比如 http mock、service worker、layout、高畫質方案等,都是乙個個的外掛程式。

安裝方法:

用 npm 安裝 umi :

$ npm i umi -g
或者用 yarn :

$ yarn global add umi
然後可以 umi -v 檢查版本號:

$ umi -v

[email protected]

建立應用:

建立應用並進入。

啟動 dev 伺服器:

建立我們第乙個umi頁面:

在 pages 目錄裡新建首頁。

$ echo 'export default () => index page

' > pages/index.js

如果你是 window 系統,可以手動新建 pages/index.js,並填入:

export default () => index page

;

然後在瀏覽器中開啟 http://localhost:8000/,你會看到 index page 。

構建應用:

$ umi build

compiled successfully.

file sizes after gzip:

52.09 kb static/umi.2b7e5e82.js

186 b static/__common-umi.6a75ebe1.async.js

構建產物會生成在 dist 目錄:

$ tree ./dist

dist

├── index.html

└── static

├── __common-umi.6a75ebe1.async.js

└── umi.2b7e5e82.js

1 directory, 3 files

部署:

這樣umijs就可以算是上手了。

我們來看一下umi的目錄結構:

一定要記得pages目錄是強約定目錄哦。

小夥伴,有什麼要說的呢?談一下,大家對支付寶這套新出框架「五公尺」的感想吧?

thinkphp框架使用支付寶

最近工作原因需要使用支付寶支付,所以總結了下支付寶支付介面如何在thinkphp當中使用。alipay.config.php是相關引數的配置檔案 alipayapi.php 是支付寶介面入口檔案 notify url.php 是伺服器非同步通知頁面檔案 return url.php 是頁面跳轉同步通...

支付寶Sofa框架簡明筆記

sofa框架概述 sofa是service oriented fabric architecture是一種分布式架構解決方案,是乙個應用中介軟體,包含了rpc 訊息 監控和服務治理。開發框架的組成 乙個標準的sofa工程從上到下可以分為測試層 展現層 業務層 核心領域層和通用層,並且從測試層到通用層...

支付寶2018集五福攻略 支付寶掃福字教程大全

支付寶 2018 集五福攻略 支付寶掃福字教程大全支付寶 2018 集五福活動開啟,又是一年掃副活動了。支付寶掃福字掃不出來怎麼辦?99 安卓網小編艾公尺分享下支付寶掃福字攻略。支付寶掃福字掃不出來怎麼辦?程式設計客棧 支付寶掃福字攻略 支付寶掃福字可以是自己寫的,可以是福字的,但是一定要清晰。不然...