WEB前端開發流程總結

做者聲明：本博客中所寫的文章，都是博主自學過程的筆記，參考了不少的學習資料，學習資料和筆記會註明出處，全部的內容都以交流學習爲主。有不正確的地方，歡迎批評指正

 

WEB前端開發項目流程總結

 

1.新建項目文件夾

　　

　　文件夾結構要有層次，通常包括

　　src:用於存放源代碼。

　　　　css:存放css代碼　

　　　　　　index.css:用於存放設置主頁的scss

　　　　　　common.css:存放公共的樣式   ===>樣式重置

　　　　font:存放字體

　　　　img:用於存放圖片

　　　　js:用於存放js代碼

　　　　lib:用於存放第三方庫的內容

　　　　sass:用於存放sass代碼

　　　　　　index.scss:用於存放設置主頁的scss

　　　　　　common.scss:存放公共的樣式   ===>樣式重置

　　　　　　_base.scss:用於存放公共的變量

　　　　index.html:主頁內容   ==>  頁面模板

　　dist:用於最終打包壓縮

2.利用npm進行包管理

 　　npm進行包管理的流程:以gulp爲例

3.開始進行開發

 　　開發中用到的插件的使用：

　　　　關於photoshop的使用

　　　　關於markman的使用

　　　　關於sass的使用

　　　　關於iconfont在線字體的使用

　　　　關於在線字體的使用（fontawesome bootstrap 自定義字體）

　　　　關於zepto.js的使用

　　　　關於swiper輪播圖的使用

　　　　關於hotcss的使用

　　　　關於iscroll插件的使用

　　　　關於fullpage的使用

　　　　關於js加密技術

　　　　關於cookie的內容js-cookie

　　　　

4.進行調試

　　開發中用到的調試工具:

　　　　移動端真機調試：

　　　　　　關於一鍵投影和chrome的使用

　　　　　　關於spy-debugger的使用

5.發佈項目

　　開發中發佈項目的工具：

　　　　關於live-server的使用

　　　　關於json-server的使用

6.開發經驗的總結

　　關於橫豎屏rem計算延遲的問題

　　關於時鐘的問題

　　關於屏幕適配的問題

　　關於css3的兼容處理