整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
eact 是一個用于構建用戶界面的 javascript 庫，是當前前端主流框架之一。
這里主要是演示一下，用react搭建一個簡易的登錄頁面。
本地安裝一下VSCode，在沒激活碼使用webstorm的情況下，vscode也是一個很好的選擇，而且vscode有很多插件，合理使用，也能用的很舒服。
準備一個登錄用的接口，可以是mock接口，也可以隨便用某些后端框架寫一個本地運行。
到工作目錄打開cmd界面，通過命令新建一個工程：
# report-pc是項目名稱，可以隨便寫
npx create-react-app report-pc新建過程中會引入一些必要的包：
新建react工程
配置一下sass環境，sass是一種預編譯的css，作用類似于Less。由于React中內置了處理sass的配置，所以在創建的React項目中，可以直接使用sass來寫樣式。
安裝用于解析sass的包：
yarn add sass
創建一個全局樣式文件：
index.scss
引用這個樣式文件：
引用index.scss
將一些不會使用的文件和引用刪除：
刪除無用文件和引用
需要安裝路由的包：
yarn add react-router-dom
準備一個函數組件Login：
再準備一個函數組件Layout：
將準備的兩個組件進行路由配置：
進行路由配置
antd是基于 Ant Design 設計體系的 React UI 組件庫，主要用于研發企業級中后臺產品。antd有很多優點，感興趣可以去官網看一下。
先安裝antd：
yarn add antd
引用antd的樣式文件：
引用antd樣式文件
要確認引入是否生效，可以直接從官網上找個組件，添加到頁面上，將工程運行起來，可以直觀的看到。
從官網上找一個Button的組件：
官網上的Button組件
將antd的Button添加到頁面上：
引用antd的組件
將工程運行起來：
yarn start
運行起來的界面：
運行后的界面
可以看到Button的樣式是正常的，說明antd樣式文件引用沒問題。
配置別名路徑的目的是通過@符號簡化路徑處理。
create-react-app這個工具創建的工程，將所有工程化配置，都隱藏在了react-scripts包中，所以在項目中看不到任何配置信息。
我們可以通過第三方庫來進行修改。先安裝第三方庫：
yarn add -D @craco/craco
創建一個craco的配置文件，并在這個文件中配置路徑別名：
修改package.json中腳本命令：
將原來代碼中的一些引用修改成帶@符的引用：
修改引用
重新啟動工程，在界面上是看不出區別的。
當前在引用的時候，直接打@符號，是不會提示路徑的，為了方便使用，可以在根目錄創建一個配置文件：
編輯jsconifg.json文件
有了這個配置文件，后面在引用時打@符號就會有提示了。
在Login/index.js中創建登錄頁面基礎結構，這里不需要自己一個組件一個組件的寫，直接到antd官網上抄案例：
找案例的源碼
將源碼復制過來：
粘貼源碼
Form的父組件Card主要是為了將登錄表單以卡片的形式展現。
在Login目錄下創建index.scss文件，指定組件樣式：
編輯login的index.scss文件
引用index.scss文件：
引用index.scss
將需要使用到的圖片資源放到assets目錄中：
根據實際需要，調整一下Form表單的結構和樣式。這個validateTrigger參數是控制提示語觸發的時機的：
設置提示語出現時機
這個提示語是否觸發是根據這個rules的配置決定的：
校驗規則
rules不僅可以校驗是否有值，也可以校驗填入的值具體格式，比如手機號、郵箱等。
這個initialValues是控制默認值的：
設置默認值
這里使用axios來調用后端接口，先進行安裝：
yarn add axios
創建一個http.js文件：
其中headers是為了解決瀏覽器的cors error進行的配置。
為了方便管理，再新建一個index.js文件：
新建index.js文件
這里使用mobx來寫業務代碼，先安裝mobx：
yarn add mobx
再安裝mobx的連接工具mobx-react-lite：
yarn add mobx-react-lite
編輯登錄相關的業務代碼：
把所有模塊都做統一處理：
對store做統一處理
在Login組件中進行調用：
調用mobx
其中message也是antd的組件，是一個頂部小彈窗。useNavigate是一個路由工具，用于登錄成功后跳轉到其他頁面，使用時的replace參數是用于控制不讓用戶通過回退返回到登錄頁面。
創建token.js文件，里面編寫幾個工具函數，并導出：
token.js
至于上面幾個工具函數的作用，可以直接從字面意思明白的吧。
到index.js中進行統一管理：
index.js統一管理
回到業務代碼部分，使用token.js：
使用token.js
將工程運行起來，登錄后就能在本地瀏覽器的Storage中看到這個token值，就像這樣：
Storage中持久化的token
前面已經獲取了token，之后需要鑒權的接口調用時都需要在請求頭中加上這個token，但是每一次接口調用都寫一遍這個請求頭，也挺麻煩的。這里就在請求攔截器中完成注入token的邏輯。
調整http.js中的邏輯：
注入token
創建一個高階函數組件，在這個組件中實現鑒權邏輯：
AuthComponent.js
鑒權的方式很簡單，就是判斷有沒有token，就就正常渲染，沒有就重定向到登錄頁面。
回到App.js，修改路由部分的邏輯：
使用AuthComponent組件
到這里，一個簡單的登錄頁面前端demo就已經做好了。沒有什么特別難理解的內容，都是一些現成的工具拼裝使用。
碼地址：https://gitee.com/itsoft7/itbi-vue
淺談一下vue的目錄結構，對vue小白用，大神請繞過。項目建立后，腳手架自動根據模板生成了文件目錄結構，具體文件結構可以在網上可以搜索到，在這里就不再贅述了，我只針對重要的幾個進行說明。
三者之間的聯系是什么？
從上圖簡單看出三者之間聯系，同時也體現出來vue的單頁面模式，何為單頁面應用（SPA），通俗一點說就是指只有一個主頁面的應用（核心：index.html,main.js,app.vue），瀏覽器一開始要加載所有必須的 html, js, css。所有的頁面內容都包含在app.vue（<router-view/>）。開發的每個模塊都是一個組件，然后在交互的時候由路由程序動態載入，單頁面的頁面跳轉，僅刷新組件資源，就是通常所說的不是全面頁面刷新。單頁面優缺點并存
登錄界面
主界面
導航菜單
1.樣式表使用了scss : 項目采用的lang="scss"，后報錯TypeError: this.getResolve is not a function at由于當前sass的版本太高，webpack編譯時出現了錯誤，這個時候只需要換成低版本的就行，下面說一下修改方法，很簡單，如下，找到package.json和package-lock.json文件，里面的 "sass-loader"的版本更換掉 就行了，換成如下版本"sass-loader": "^7.3.1",
2.路由模式采用了“history”：這樣去掉了url地址中#號，具體代碼需要修改router文件夾的index .js。
采用這種模式時，發布部署的時候一定要需要nginx的配合，后面文章會專門講。
3.圖標使用svg格式：
第一步：下載 "svg-sprite-loader": "^6.0.7",
第二步：修改配置文件
第三步：參照源碼
4.使用elementUI：這ui使用也比較簡單，具體使用方法可以通過官網了解,同樣先下載依賴，然后在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 是默認樣式表，可以在官網按照自己喜歡的風格生成樣式表，下載下來后單獨引用即可，在使用過程需要自定義修改樣式的需要單獨自己創建一個樣式文件，在默認樣式表下單獨自定義樣式表，自定義的樣式這樣就可以覆蓋默認的了，不建議直接默認的樣式表上去修改。
4.Layout：layout是布局容器,可以根據應用場景定義自己的布局，其結構是:
布局說明
定義好后layout后如何和視圖頁面進行關聯？在路由文件進行配置
該文章不是一個演示文章，代碼也不是為了寫文章而寫，我是想通過實際的項目給大家進行分享，代碼已經完全公開，會不斷的持續更新。
目前正在研究在vue使用mxgraph畫流程圖，正在研究中......
同瀏覽器對網頁默認的組件解析樣式不一致，而且不夠美觀，網頁樣式開發需要大量時間，今天介紹一款優雅的 CSS 框架。
Pico.css 是一個簡單輕量化的 CSS UI 框架，最大的特點是樣式都基于 HMTL 原始的標簽名和內置的屬性，少用甚至是不用 class 來定義樣式，寫出來的代碼語義清晰，可維護性強，能夠幫助開發者構建自己的 UI 系統，也可以直接用于快速的小型項目中。
Pico-css 官網
截止發文日期，Pico.css 在 Github 上已經有高達 3898 個 Star。
引入 Pico.css 最簡單直接的方式就是下載后直接引入一個樣式文件：
Pico-css cdn 引入
當然也可以通過 npm 安裝：
Pico-css npm 安裝
然后就可以編寫 html 代碼了。
想要做一個輸入框和提交表單，往往需要這樣的代碼：
常規實現 form 表單代碼
而使用 Pico.css，只需要：
Pico-css 實現表單
Pico.css 內置了很多基礎的組件，包括常用表單控件、表格、彈窗、導航菜單、卡片等，代碼非常簡潔，比如實現一個美觀的進度條，只需要這點代碼：
Pico-css 實現進度條
Pico.css 內置了淺色和深色兩套主題，使用方法非常簡單，給父級元素添加屬性data-theme。
切換主題
官網還有很多代碼例子，比如編寫一個美觀大氣的登錄界面，html 代碼十分簡潔，仿佛回到了剛剛開始學習 html 語法的時代。
登錄界面
通過 CSS 文件的源碼，可以看到樣式的選擇器大多通過 HTML 元素標簽名、內置的屬性以及自定義屬性來命中，這樣就規避了常規的只使用 class 來區分的“命名地獄”，是一種非常好的網頁編程思路。
Pico-css 源碼
面向對純粹 HTML 有極致追求的開發者，Pico.css 還提供了 classless 版本，這個版本將一個 class 都沒有，完全使用元素標簽名和屬性編寫網頁。
在項目中使用 Pico.css 源自于一次快速的營銷頁需求，需要做簡單的幾個帶有輸入交互的頁面，使用 bootstrap 這樣龐大的框架顯然有點笨重了，如果使用當前流行的能夠按需引入的 Vue UI 組件庫，又免不了要用 Vue.js 來工程化。只是做幾個簡單的頁面，沒有必要用中大型項目的標配，考慮到目前市面上大多數 UI 框架都過度封裝，堆疊了很多包含各種語義的 class 名，不僅會讓頁面加載變慢，而且會導致更長的樣式計算時間，最終還是找到了適合這樣場景的 Pico.css。
css 樣式的寫法很自由，目前前端開發存在一個趨勢，為了做精美的界面，需要花費大量的時間來寫樣式，為了樣式可以復用，絞盡腦汁給 class 起名字，甚至網上還有各種 class 命名規范，這可能導致了大量的樣式被覆蓋，很多時候 class 屬性的名稱，甚至比樣式的代碼還要多，極難維護。
Pico.css 的出現給這樣的開發現狀提供了一種新思路，不僅可以直接用在實際項目中，也能夠作為構建自己的 UI 庫的基礎樣式。
Pico.css 是一個免費開源的項目，源碼基于 MIT 開源協議托管在 Github 上，任何個人和公司都可以免費下載使用。
關注我，持續分享高質量的免費開源、免費商用的資源。
↓↓點擊查看本次分享的網址。
Pico.css - 簡單優雅的純 CSS 開源 UI 框架，用原始的 HTML 元素標簽來做界面｜那些免費的磚
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
