返璞歸真~原生html開發內網項目總結

---

返璞歸真~原生html開發內網項目總結

「文章性質：一個小項目總結」

「觀看時間：5min」

「內容：環境搭建，組件庫使用總結」

前言

• 作的一個政府內網的項目，就是信息發佈，公衆號連接h5發佈信息，參與時間爲一週~
• 移動端：mui
• pc端：layui

環境搭建

起初，前臺沒有任何內容，沒法鏈接外網，沒法使用U盤copy資料，客戶說只能用H5，不能用vue，我表示很無語...好歹資料能夠經過另外一個途徑copy（特別特別麻煩）,起初準備了幾個方案

1. vue腳手架搭建環境，將全部用到的依賴提早安裝，由於內網沒法安裝，要提早將須要的UI組件，可視化組件等提早安裝copy

2. 純html的方式，這個時候絕對不會純手寫的~趕忙找了幾種UI礦建，對比下文檔/UI樣式，將定下來的UI組件以及第三方插件經過github下載下來以備copy

3. copy過去以後，考慮到客戶限制不讓使用vue，後臺開發的小夥伴也不會，最終定下來使用純html的方式

以上爲選型，接下來搭建環境

其實也就沒什麼了，按照常規的pages/css/js/plug建立文件夾,查看UI組件API，將基礎框架搭建出來就能夠開始擼界面了

組件庫使用

在開發界面的時候，有經驗的程序員必定知道，儘可能用組件庫內的組件來快速搭建頁面，這個前提是要收悉api,而且通常都是在項目緊急的狀況下，由於這些UI組件我以前也是沒有用過的，因此我選擇將官方文檔全部有用的信息大體瞟一眼，詳細看的是官方的快速上手和注意事項部分，關於組件的使用能夠在用的時候去查找相關文檔

於後臺對接過程當中，全部的元素綁定和數據獲取都是經過API文檔解決的。徹底脫離了手寫js操做，很方便，因此站在巨人的肩膀上沒有錯

總結

1. 這個項目從技術的選型到全部界面的開發歷時1周，返璞歸真~
2. 這種老的技術無論是在界面的開發，數據對接，代碼可讀性，複用性都不如現代vue/react組件化開發思想~
3. 無論是純html開發仍是在基於現代框架的開發，UI組件庫起到快速組裝，風格統一的做用，工做到處能夠站在巨人的肩膀上

本文使用 mdnice 排版