eact 是一個(gè)用于構(gòu)建用戶(hù)界面的 javascript 庫(kù)，是當(dāng)前前端主流框架之一。

這里主要是演示一下，用react搭建一個(gè)簡(jiǎn)易的登錄頁(yè)面。

演示準(zhǔn)備

本地安裝一下VSCode，在沒(méi)激活碼使用webstorm的情況下，vscode也是一個(gè)很好的選擇，而且vscode有很多插件，合理使用，也能用的很舒服。

準(zhǔn)備一個(gè)登錄用的接口，可以是mock接口，也可以隨便用某些后端框架寫(xiě)一個(gè)本地運(yùn)行。

實(shí)操演示-創(chuàng)建工程

到工作目錄打開(kāi)cmd界面，通過(guò)命令新建一個(gè)工程：

# report-pc是項(xiàng)目名稱(chēng)，可以隨便寫(xiě)
npx create-react-app report-pc

新建過(guò)程中會(huì)引入一些必要的包：

實(shí)操演示-配置sass環(huán)境

配置一下sass環(huán)境，sass是一種預(yù)編譯的css，作用類(lèi)似于Less。由于React中內(nèi)置了處理sass的配置，所以在創(chuàng)建的React項(xiàng)目中，可以直接使用sass來(lái)寫(xiě)樣式。

安裝用于解析sass的包：

創(chuàng)建一個(gè)全局樣式文件：

引用這個(gè)樣式文件：

將一些不會(huì)使用的文件和引用刪除：

實(shí)操演示-配置基礎(chǔ)路由

需要安裝路由的包：

準(zhǔn)備一個(gè)函數(shù)組件Login：

再準(zhǔn)備一個(gè)函數(shù)組件Layout：

將準(zhǔn)備的兩個(gè)組件進(jìn)行路由配置：

實(shí)操演示-Ant Design的引入

antd是基于 Ant Design 設(shè)計(jì)體系的 React UI 組件庫(kù)，主要用于研發(fā)企業(yè)級(jí)中后臺(tái)產(chǎn)品。antd有很多優(yōu)點(diǎn)，感興趣可以去官網(wǎng)看一下。

先安裝antd：

引用antd的樣式文件：

要確認(rèn)引入是否生效，可以直接從官網(wǎng)上找個(gè)組件，添加到頁(yè)面上，將工程運(yùn)行起來(lái)，可以直觀的看到。

從官網(wǎng)上找一個(gè)Button的組件：

將antd的Button添加到頁(yè)面上：

將工程運(yùn)行起來(lái)：

運(yùn)行起來(lái)的界面：

可以看到Button的樣式是正常的，說(shuō)明antd樣式文件引用沒(méi)問(wèn)題。

實(shí)操演示-配置別名路徑

配置別名路徑的目的是通過(guò)@符號(hào)簡(jiǎn)化路徑處理。

create-react-app這個(gè)工具創(chuàng)建的工程，將所有工程化配置，都隱藏在了react-scripts包中，所以在項(xiàng)目中看不到任何配置信息。

我們可以通過(guò)第三方庫(kù)來(lái)進(jìn)行修改。先安裝第三方庫(kù)：

創(chuàng)建一個(gè)craco的配置文件，并在這個(gè)文件中配置路徑別名：

修改package.json中腳本命令：

將原來(lái)代碼中的一些引用修改成帶@符的引用：

重新啟動(dòng)工程，在界面上是看不出區(qū)別的。

當(dāng)前在引用的時(shí)候，直接打@符號(hào)，是不會(huì)提示路徑的，為了方便使用，可以在根目錄創(chuàng)建一個(gè)配置文件：

有了這個(gè)配置文件，后面在引用時(shí)打@符號(hào)就會(huì)有提示了。

實(shí)操演示-搭建靜態(tài)結(jié)構(gòu)

在Login/index.js中創(chuàng)建登錄頁(yè)面基礎(chǔ)結(jié)構(gòu)，這里不需要自己一個(gè)組件一個(gè)組件的寫(xiě)，直接到antd官網(wǎng)上抄案例：

將源碼復(fù)制過(guò)來(lái)：

Form的父組件Card主要是為了將登錄表單以卡片的形式展現(xiàn)。

在Login目錄下創(chuàng)建index.scss文件，指定組件樣式：

引用index.scss文件：

將需要使用到的圖片資源放到assets目錄中：

根據(jù)實(shí)際需要，調(diào)整一下Form表單的結(jié)構(gòu)和樣式。這個(gè)validateTrigger參數(shù)是控制提示語(yǔ)觸發(fā)的時(shí)機(jī)的：

這個(gè)提示語(yǔ)是否觸發(fā)是根據(jù)這個(gè)rules的配置決定的：

rules不僅可以校驗(yàn)是否有值，也可以校驗(yàn)填入的值具體格式，比如手機(jī)號(hào)、郵箱等。

這個(gè)initialValues是控制默認(rèn)值的：

實(shí)操演示-后端交互封裝

這里使用axios來(lái)調(diào)用后端接口，先進(jìn)行安裝：

創(chuàng)建一個(gè)http.js文件：

其中headers是為了解決瀏覽器的cors error進(jìn)行的配置。

為了方便管理，再新建一個(gè)index.js文件：

實(shí)操演示-編寫(xiě)業(yè)務(wù)代碼

這里使用mobx來(lái)寫(xiě)業(yè)務(wù)代碼，先安裝mobx：

再安裝mobx的連接工具mobx-react-lite：

編輯登錄相關(guān)的業(yè)務(wù)代碼：

把所有模塊都做統(tǒng)一處理：

實(shí)操演示-組件中調(diào)用mobx

在Login組件中進(jìn)行調(diào)用：

其中message也是antd的組件，是一個(gè)頂部小彈窗。useNavigate是一個(gè)路由工具，用于登錄成功后跳轉(zhuǎn)到其他頁(yè)面，使用時(shí)的replace參數(shù)是用于控制不讓用戶(hù)通過(guò)回退返回到登錄頁(yè)面。

實(shí)操演示-token持久化

創(chuàng)建token.js文件，里面編寫(xiě)幾個(gè)工具函數(shù)，并導(dǎo)出：

至于上面幾個(gè)工具函數(shù)的作用，可以直接從字面意思明白的吧。

到index.js中進(jìn)行統(tǒng)一管理：

回到業(yè)務(wù)代碼部分，使用token.js：

將工程運(yùn)行起來(lái)，登錄后就能在本地瀏覽器的Storage中看到這個(gè)token值，就像這樣：

實(shí)操演示-請(qǐng)求攔截器注入token

前面已經(jīng)獲取了token，之后需要鑒權(quán)的接口調(diào)用時(shí)都需要在請(qǐng)求頭中加上這個(gè)token，但是每一次接口調(diào)用都寫(xiě)一遍這個(gè)請(qǐng)求頭，也挺麻煩的。這里就在請(qǐng)求攔截器中完成注入token的邏輯。

調(diào)整http.js中的邏輯：

實(shí)操演示-路由鑒權(quán)實(shí)現(xiàn)

創(chuàng)建一個(gè)高階函數(shù)組件，在這個(gè)組件中實(shí)現(xiàn)鑒權(quán)邏輯：

鑒權(quán)的方式很簡(jiǎn)單，就是判斷有沒(méi)有token，就就正常渲染，沒(méi)有就重定向到登錄頁(yè)面。

回到App.js，修改路由部分的邏輯：

總結(jié)

到這里，一個(gè)簡(jiǎn)單的登錄頁(yè)面前端demo就已經(jīng)做好了。沒(méi)有什么特別難理解的內(nèi)容，都是一些現(xiàn)成的工具拼裝使用。

碼地址：https://gitee.com/itsoft7/itbi-vue

一、實(shí)現(xiàn)目標(biāo)

1. 登錄頁(yè)面的實(shí)現(xiàn)
2. 主界面的布局
3. 導(dǎo)航菜單的實(shí)現(xiàn)

二、了解vue的目錄結(jié)構(gòu)

淺談一下vue的目錄結(jié)構(gòu)，對(duì)vue小白用，大神請(qǐng)繞過(guò)。項(xiàng)目建立后，腳手架自動(dòng)根據(jù)模板生成了文件目錄結(jié)構(gòu)，具體文件結(jié)構(gòu)可以在網(wǎng)上可以搜索到，在這里就不再贅述了，我只針對(duì)重要的幾個(gè)進(jìn)行說(shuō)明。

1. index.html : 是項(xiàng)目的入口，是隨后就被實(shí)例中的組件中的模板中的內(nèi)容所取代，所以我們會(huì)看到有那么一瞬間會(huì)顯示出index.html中正文的內(nèi)容。而index.html中的Title部分不會(huì)被取代，所以會(huì)一直保留。比如可以實(shí)現(xiàn)加載Loading...等
2. main.js：是項(xiàng)目的主程序，在這里很多功能要實(shí)現(xiàn)，實(shí)例化Vue、初始化及存儲(chǔ)全局變量、項(xiàng)目用的組件引入、樣式文件引入等。
3. app.vue:是項(xiàng)目的主組件，所有頁(yè)面都是在App.vue下進(jìn)行切換的。也是整個(gè)項(xiàng)目的關(guān)鍵，app.vue負(fù)責(zé)構(gòu)建定義及頁(yè)面組件歸集。

三者之間的聯(lián)系是什么？

從上圖簡(jiǎn)單看出三者之間聯(lián)系，同時(shí)也體現(xiàn)出來(lái)vue的單頁(yè)面模式，何為單頁(yè)面應(yīng)用（SPA），通俗一點(diǎn)說(shuō)就是指只有一個(gè)主頁(yè)面的應(yīng)用（核心：index.html,main.js,app.vue），瀏覽器一開(kāi)始要加載所有必須的 html, js, css。所有的頁(yè)面內(nèi)容都包含在app.vue（<router-view/>）。開(kāi)發(fā)的每個(gè)模塊都是一個(gè)組件，然后在交互的時(shí)候由路由程序動(dòng)態(tài)載入，單頁(yè)面的頁(yè)面跳轉(zhuǎn)，僅刷新組件資源，就是通常所說(shuō)的不是全面頁(yè)面刷新。單頁(yè)面優(yōu)缺點(diǎn)并存

單頁(yè)面的優(yōu)點(diǎn)：

• 用戶(hù)體驗(yàn)好，快，內(nèi)容的改變不需要重新加載整個(gè)頁(yè)面，基于這一點(diǎn)spa對(duì)服務(wù)器壓力較小。
• 前后端分離。
• 頁(yè)面效果會(huì)比較炫酷（比如切換頁(yè)面內(nèi)容時(shí)的專(zhuān)場(chǎng)動(dòng)畫(huà)）。

單頁(yè)面缺點(diǎn)：

• 不利于seo。
• 導(dǎo)航不可用，如果一定要導(dǎo)航需要自行實(shí)現(xiàn)前進(jìn)、后退。（由于是單頁(yè)面不能用瀏覽器的前進(jìn)后退功能，所以需要自己建立堆棧管理）。
• 初次加載時(shí)耗時(shí)多。
• 頁(yè)面復(fù)雜度提高很多。

三、界面實(shí)現(xiàn)

四、 實(shí)現(xiàn)的技術(shù)點(diǎn)

1.樣式表使用了scss : 項(xiàng)目采用的lang="scss"，后報(bào)錯(cuò)TypeError: this.getResolve is not a function at由于當(dāng)前sass的版本太高，webpack編譯時(shí)出現(xiàn)了錯(cuò)誤，這個(gè)時(shí)候只需要換成低版本的就行，下面說(shuō)一下修改方法，很簡(jiǎn)單，如下，找到package.json和package-lock.json文件，里面的 "sass-loader"的版本更換掉 就行了，換成如下版本"sass-loader": "^7.3.1",

2.路由模式采用了“history”：這樣去掉了url地址中#號(hào)，具體代碼需要修改router文件夾的index .js。

采用這種模式時(shí)，發(fā)布部署的時(shí)候一定要需要nginx的配合，后面文章會(huì)專(zhuān)門(mén)講。

3.圖標(biāo)使用svg格式：

第一步：下載 "svg-sprite-loader": "^6.0.7",

第二步：修改配置文件

第三步：參照源碼

4.使用elementUI：這ui使用也比較簡(jiǎn)單，具體使用方法可以通過(guò)官網(wǎng)了解,同樣先下載依賴(lài)，然后在main.js重要初始化加載。

/*ElementUI*/
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

其中element-ui/lib/theme-chalk/index.css 是默認(rèn)樣式表，可以在官網(wǎng)按照自己喜歡的風(fēng)格生成樣式表，下載下來(lái)后單獨(dú)引用即可，在使用過(guò)程需要自定義修改樣式的需要單獨(dú)自己創(chuàng)建一個(gè)樣式文件，在默認(rèn)樣式表下單獨(dú)自定義樣式表，自定義的樣式這樣就可以覆蓋默認(rèn)的了，不建議直接默認(rèn)的樣式表上去修改。

4.Layout：layout是布局容器,可以根據(jù)應(yīng)用場(chǎng)景定義自己的布局，其結(jié)構(gòu)是:

定義好后layout后如何和視圖頁(yè)面進(jìn)行關(guān)聯(lián)？在路由文件進(jìn)行配置

五、 總結(jié)

該文章不是一個(gè)演示文章，代碼也不是為了寫(xiě)文章而寫(xiě)，我是想通過(guò)實(shí)際的項(xiàng)目給大家進(jìn)行分享，代碼已經(jīng)完全公開(kāi)，會(huì)不斷的持續(xù)更新。

目前正在研究在vue使用mxgraph畫(huà)流程圖，正在研究中......

同瀏覽器對(duì)網(wǎng)頁(yè)默認(rèn)的組件解析樣式不一致，而且不夠美觀，網(wǎng)頁(yè)樣式開(kāi)發(fā)需要大量時(shí)間，今天介紹一款優(yōu)雅的 CSS 框架。

關(guān)于 Pico.css

Pico.css 是一個(gè)簡(jiǎn)單輕量化的 CSS UI 框架，最大的特點(diǎn)是樣式都基于 HMTL 原始的標(biāo)簽名和內(nèi)置的屬性，少用甚至是不用 class 來(lái)定義樣式，寫(xiě)出來(lái)的代碼語(yǔ)義清晰，可維護(hù)性強(qiáng)，能夠幫助開(kāi)發(fā)者構(gòu)建自己的 UI 系統(tǒng)，也可以直接用于快速的小型項(xiàng)目中。

截止發(fā)文日期，Pico.css 在 Github 上已經(jīng)有高達(dá) 3898 個(gè) Star。

Pico.css 框架的特點(diǎn)

• 去 class 以及原生語(yǔ)義化的代碼。Pico.css 盡可能使用原生的 HTML 元素的標(biāo)簽名稱(chēng)來(lái)定義樣式，整個(gè)框架使用的 class 名稱(chēng)不到10個(gè)
• 純 CSS 實(shí)現(xiàn)。所有組件都由一個(gè) 10KB（壓縮后）的 CSS 文件實(shí)現(xiàn)，無(wú)包管理，沒(méi)有依賴(lài)和外部文件，甚至連 javascript 代碼都沒(méi)有
• 響應(yīng)式布局。內(nèi)置響應(yīng)式的柵格系統(tǒng)，在 PC / 手機(jī) / 平板等不同屏幕大小的設(shè)備上排版美觀一致
• 支持深色主題。附帶兩個(gè)漂亮的顏色主題，根據(jù)用戶(hù)喜好一鍵啟用

開(kāi)發(fā)上手

引入 Pico.css 最簡(jiǎn)單直接的方式就是下載后直接引入一個(gè)樣式文件：

當(dāng)然也可以通過(guò) npm 安裝：

然后就可以編寫(xiě) html 代碼了。

HTML 原生語(yǔ)義化的編程

想要做一個(gè)輸入框和提交表單，往往需要這樣的代碼：

而使用 Pico.css，只需要：

Pico.css 內(nèi)置了很多基礎(chǔ)的組件，包括常用表單控件、表格、彈窗、導(dǎo)航菜單、卡片等，代碼非常簡(jiǎn)潔，比如實(shí)現(xiàn)一個(gè)美觀的進(jìn)度條，只需要這點(diǎn)代碼：

使用深色主題

Pico.css 內(nèi)置了淺色和深色兩套主題，使用方法非常簡(jiǎn)單，給父級(jí)元素添加屬性data-theme。

官網(wǎng)還有很多代碼例子，比如編寫(xiě)一個(gè)美觀大氣的登錄界面，html 代碼十分簡(jiǎn)潔，仿佛回到了剛剛開(kāi)始學(xué)習(xí) html 語(yǔ)法的時(shí)代。

通過(guò) CSS 文件的源碼，可以看到樣式的選擇器大多通過(guò) HTML 元素標(biāo)簽名、內(nèi)置的屬性以及自定義屬性來(lái)命中，這樣就規(guī)避了常規(guī)的只使用 class 來(lái)區(qū)分的“命名地獄”，是一種非常好的網(wǎng)頁(yè)編程思路。

面向?qū)兇?HTML 有極致追求的開(kāi)發(fā)者，Pico.css 還提供了 classless 版本，這個(gè)版本將一個(gè) class 都沒(méi)有，完全使用元素標(biāo)簽名和屬性編寫(xiě)網(wǎng)頁(yè)。

使用 Pico.css 的原因

在項(xiàng)目中使用 Pico.css 源自于一次快速的營(yíng)銷(xiāo)頁(yè)需求，需要做簡(jiǎn)單的幾個(gè)帶有輸入交互的頁(yè)面，使用 bootstrap 這樣龐大的框架顯然有點(diǎn)笨重了，如果使用當(dāng)前流行的能夠按需引入的 Vue UI 組件庫(kù)，又免不了要用 Vue.js 來(lái)工程化。只是做幾個(gè)簡(jiǎn)單的頁(yè)面，沒(méi)有必要用中大型項(xiàng)目的標(biāo)配，考慮到目前市面上大多數(shù) UI 框架都過(guò)度封裝，堆疊了很多包含各種語(yǔ)義的 class 名，不僅會(huì)讓頁(yè)面加載變慢，而且會(huì)導(dǎo)致更長(zhǎng)的樣式計(jì)算時(shí)間，最終還是找到了適合這樣場(chǎng)景的 Pico.css。

css 樣式的寫(xiě)法很自由，目前前端開(kāi)發(fā)存在一個(gè)趨勢(shì)，為了做精美的界面，需要花費(fèi)大量的時(shí)間來(lái)寫(xiě)樣式，為了樣式可以復(fù)用，絞盡腦汁給 class 起名字，甚至網(wǎng)上還有各種 class 命名規(guī)范，這可能導(dǎo)致了大量的樣式被覆蓋，很多時(shí)候 class 屬性的名稱(chēng)，甚至比樣式的代碼還要多，極難維護(hù)。

Pico.css 的出現(xiàn)給這樣的開(kāi)發(fā)現(xiàn)狀提供了一種新思路，不僅可以直接用在實(shí)際項(xiàng)目中，也能夠作為構(gòu)建自己的 UI 庫(kù)的基礎(chǔ)樣式。

免費(fèi)開(kāi)源說(shuō)明

Pico.css 是一個(gè)免費(fèi)開(kāi)源的項(xiàng)目，源碼基于 MIT 開(kāi)源協(xié)議托管在 Github 上，任何個(gè)人和公司都可以免費(fèi)下載使用。

關(guān)注我，持續(xù)分享高質(zhì)量的免費(fèi)開(kāi)源、免費(fèi)商用的資源。

↓↓點(diǎn)擊查看本次分享的網(wǎng)址。

Pico.css - 簡(jiǎn)單優(yōu)雅的純 CSS 開(kāi)源 UI 框架，用原始的 HTML 元素標(biāo)簽來(lái)做界面｜那些免費(fèi)的磚