『壹』 什麼是前端工程化
所謂前端工程化我認為就是將前端項目當成一項系統工程進行分析、組織和構建從而達到項目結構清晰、分工明確、團隊配合默契、開發效率提高的目的。
工程化是一種思想而不是某種技術，前端工程化就是用做工程的思維看待和開發自己的項目，而不再是直接擼起袖子一個頁面一個頁面開寫，所有能降低成本，並且能提高效率的事情的總稱為工程化。
前端工程師是互聯網時代軟體產品研發中不可缺少的一種專業研發角色。從狹義上講，前端工程師使用 HTML、CSS、JavaScript 等專業技能和工具將產品UI設計稿實現成網站產品，涵蓋用戶PC端、移動端網頁，處理視覺和交互問題。
前端工程師，又叫web前端開發，前端開發是從網頁製作演變而來。早期的網頁製作主要內容都是靜態的，以文字圖片為主，用戶使用網站也以瀏覽為主。隨著互聯網的發展，現代網頁更加美觀，交互效果更加顯著，功能更加強大，於是網站開發細分成了前端開發和後端開發。
前端工程師通過前端技術完成界面設計、界面展現，交互效果，頁面維護、網站優化等等。通俗點講，就是設計、製作網頁，實現網頁上各種各樣的特效和功能。
『貳』 一個前端開發的工作流程是什麼樣的
我們以前基本的流程是，領導或甲方提出需求，然後產品分析需求，並且根據需求畫出原型圖，然後根據原型圖出設計稿。
出完設計稿團隊評審，過後交與前端製作靜態頁面，然後靜態頁面，交與設計審核，過後交給開發人員，進行動態數據的添加。
添加完之後，發布測試環境，產品測試領導審核，成功後，直接發布產品環境。或進行版本迭代。
這是整個的一個設計，開發，部署的流程。
根據前面的，在補充一下，前面的所有流程中的靈魂是原始需求提出者，但人隨著客觀條件的變化，思維認識會有所不一致，
所以產生了文檔，文檔是貫穿整個流程的一個靈魂。
而產品是整個流程中文檔的編寫者，因為產品最能接觸最原始的需求，對需求的理解更深刻或專業，所以他會有一個文檔出來。
這個文檔是需要交付給設計，讓設計在設計過程中進行參考。
前端看的另外一個文檔。交互設計師出交互文檔，一般的公司沒有交互設計師那就是由產品來出的交互文檔。
有的交互不過於復雜，就沒有文檔，只是郵件。
有時候說，不要這個郵件行不行，那怕是最簡單的原始東西，沒有文件或郵件是不能做一個後期測試回溯的依據。
產品文檔表示頁面的流轉或數據的走向，交互文檔描述頁面復雜的交互或各個用戶表單與用戶發生的各種互動。
另外2個是，要架構師或項目經理出的需求文檔，需求文檔是對整個項目的歷史背景，系統開發軟硬體要求，或版本信息，等等。
另外一個是由服務端工程師提供的介面文檔，這里邊包括一些請求類型，傳參的數目與鍵名，還有服務端返回的參數名約定等等的，這些文檔是開發中的靈魂，也是以後測試回溯的標准或依據。
『叄』 web前端的學習步驟是什麼天津web前端培訓
一、HTML的學習
HTML（超文本標記語言）是一個網頁的骨架，不管是靜態網頁還是動態網頁。之後返回到瀏覽器端的都是HTML代碼。瀏覽器然後把HTML代碼解釋渲染後反饋給用戶，所以，我們要掌握HTML的基本結構、常用標記和屬性。
學習是一個記憶和理解的過程，在學習HTML過程中可以藉助拆分」視圖輔助學習。在「設計」視圖中看效果，在「代碼」視圖中學本質， 將各種視圖的優勢發揮出來，這種對照學習的方法彌補了死記HTML標簽和屬性的枯燥。
二、css的學習
CSS叫做層疊樣式表，一種樣式設計語言，它能夠做到網頁表現與內容分離，與HTML相比它能復用HTML的樣式，這樣就在很大程度上提高了開發速度，也降低了維護成本。
同時CSS中的盒子模型、相對布局等能夠實現對網頁中各對象的位置排版進行像素級的控制。
三、javascript的學習
JavaScript是一種在客戶端廣泛使用的語言，它為我們提供了一些內置函數、對象和DOM操作，這些內容可以幫助我們來實現一些客戶端的一些交互，如：效果、驗證等，使界面更加生動。
四、jquery的學習
jQuery 能兼容各種瀏覽器，同時現在有很多基於jQuery的插件可供選擇，這樣在我們實現一些豐富的動態效果時更方便，大大節省了開發時間，提高了開發速度。
五、bootstrap的學習
Bootstrap是用於前端開發的工具包，是一個CSS/HTML框架，並且支持響應式布局。在項目開發過程中，我們可以藉助Bootstrap提供的CSS樣式、組件、JavaScript插件等快速的完成頁面布局和樣式設置，然後再有針對性的微調樣式，這樣基於框架進行開發大大縮短了開發周期。
前端就是後台實現和視覺表現的橋梁，是貫穿在整個產品開發過程的紐帶，起到承上啟下的作用，一個好的前端工程師他能夠很好理解產品經理對用戶體驗的要求，也能夠很好地理解後台工程師對數據邏輯，或者程序邏輯進行分離的要求，並將這些要求轉化成前台的開發工作。
『肆』 web前端項目經歷怎麼寫
工作描述：
1、負責基於HTML、CSS、Javascript的Web前端開發；
2、負責基於HTML5、CSS3、Javascript的移動端前端開發；
3、與UI設計師積極合作，完成網頁的前端頁面實現；
4、與後端開發工程師積極合作，完成前端與後端的整合；
5、負責前端頁面切圖及專題模版製作，優化前端頁面性能，能夠解決瀏覽器兼容性問題；
6、研究和跟蹤最新的前端技術發展，合理應用到項目中。
『伍』 前端項目的開發流程
前端開發流程概述
前端開發流程可分為需求分析、開發階段、測試階段、維護階段，下面分別進行敘述。
2.1 需求分析
這個環節中，首先是和客戶進行交流，了解客戶的需求，然後分析項目的可行性，撰寫項目需求文檔。如果項目可行，則起討論具體方案，分模塊分步驟進行規劃，分析項目進度安排、所需成本，進行原型設計（包括頁面布局圖，頁面邏輯流程圖，說明文檔等。通過原型設計，可以讓項目組和客戶都可以對項目有一個直觀感受，同時可以低成本高效率的復現業務場景和各模塊流程）。
可以說需求分析階段是整個前端項目的基礎，基礎不牢，地動山搖。可以試想，如果和客戶溝通不順暢，有的方面客戶沒搞清楚是什麼效果，開發完成後就可能與客戶發生糾紛；如果可行性有問題，有的模塊很難實現或成本超出預算，就很難處理。
2.2 開發階段
這個環節是前端工程師主要參與的部分，按照需求分析階段的規劃按步驟完成任務。
根據產品需求分析文檔和原型圖進行UI設計，對產品的整體美術風格、交互設計、界面結構、操作流程等做出設計。負責項目中各種交互界面、圖標、LOGO、按鈕等相關元素的設計與製作。
根據UI設計進行規劃，提取界面中可以復用的模塊方便重復利用，分析界面是否有實現難度比較困難的地方，進行溝通和功能排期，按功能大小以及難度進行功能時間的評估，和後端溝通好排期時間，保證大家能夠更有效地開發合作，針對功能復雜的地方要先理清思路。
不要盲目開發前端搭建框架。根據設計圖進行前端界面開發，以及遇到的問題及時與產品、UI、後台人員溝通，保持大家信息一致，針對不清楚的地方也要及時溝通，以免做錯功能。
根據後端介面進行欄位填充，以及部分功能開發。針對缺少的欄位或者數據結構進行提出，及時與後端反應，盡量讓大家都能以最小的改動完成後續開發工作。前後端都要按照規范進行開發，針對不規范的地方要給與提出、指正，營造出規范的工作模式，以後維護成本和溝通成本更低以及開發效率更高。如果前端的設計進度遠遠超前後端的介面和數據結構設計，也不必等後端，可以自行開發nodejs伺服器配合postman等介面軟體進行開發。
前後端功能聯調、完成自測。檢查功能完成情況，看是否有遺漏，出現問題及時溝通解決。
2.3 測試階段
發布測試、修改bug、發布上線，自測完成後提交測試，測試根據提交的項目以及需求進行測試，提出bug給相關人員修改，開發人員周期性的配合修改bug，保證今天能夠修復昨天的bug。
發布dev環境，配合測試，修復bug以及需求優化
發布test環境，修復bug以及需求優化
發布it環境，修復bug以及需求優化
發布pre環境，修復bug以及需求優化
pre驗收之後，發布線上環境，產品進行驗收
2.4 維護階段
如果客戶驗收通過，項目就進入了維護階段，程序的維護包括程序上線後後續bug的修復和程序版本的更新。
3 個人經驗總結
3.1 文檔很重要
前端項目的文檔似乎已經作為前端工程化的標准流程之一了，文檔寫的好，可以便於同事快速了解你的代碼功能和需求，便於協作。可以想像，隨之項目復雜度增加，體量越來越龐大，開發團隊人數也越來越多。這種情況下，如果像變魔術一樣隱匿中間流程而直接得出結果，後果可想而知：項目復雜度越增加就越難以管理，開發效率低，合作混亂，結果甚至導致項目死亡。
好的文檔看起來就像一個產品說明書，但作用卻遠遠超過了說明書，不僅僅告訴你如何使用，還應該告訴你項目的設計思路，用了哪些組件，哪些部分不完善，將來有什麼規劃等等。這是一份比較好的說明文檔。
3.2 與客戶及時溝通很重要
3.3 扎實的基本功很重要
盡管當下框架、函數庫、工具包等更新迭代非常快，前端工程師有很多新的知識要學，但原生JS、HTML和CSS依然是重要的基本功，在學習前沿工具的同時不能放棄基本功的訓練。
『陸』 前端開發是做什麼的工作職責有哪些
前端開發是做PC端開發任務;而Android開發、iOS開發和各種小程序主要針對的是移動端開發工作的。
1、使用Vue/React開發，配合產品完成 Web/Electron項目迭代；
2、收集、分析項目需求並給出技術解決方案，完成高質量的編碼開發、調試和版本維護工作；
3、深入分析和解決前端遇到的各種技術、性能、跨終端兼容等問題，持續優化前端用戶體驗與框架；
4、協助前端開發工程體系建設與落地。
任職資格：
1、35周歲以下（含），211院校本科及以上學歷，計算機相關專業優先，具備3年以上前端開發經驗者優先；
2、掌握至少一種主流框架並深入了解其原理，熟悉前端研發生態圈，包括模塊化、前端編譯和構建工具；
3、熟悉主流瀏覽器的特點，對桌面跨平台有深入了解更佳；
4、有完整參與一個產品的設計、開發到上線過程，對前後端協作模式、產品和項目流程、網路和安全有深入理解，有大型項目前端架構部署和實踐經驗優先；
5、關注前沿技術，具備較強學習能力，在各大技術社區活躍者、有自己開源項目者優先；
6、具備良好服務意識、責任心以及團隊溝通與協作能力。
『柒』 WEB前端項目開發流程
這個環節是由項目經理完成，項目經理首先和客戶進行交流，了解客戶的需求，然後分析項目的可行性，如果項目可以被實現，項目經理寫出項目需求文檔交給設計師完成後續的開發。
這個環節主要是UI設計師參與，UI設計師根據產品需求分析文檔，對產品的整體美術風格、交互設計、界面結構、操作流程等做出設計。負責項目中各種交互界面、圖標、LOGO、按鈕等相關元素的設計與製作。
這個部分由程序員來實現。（程序員分為WEB前端開發工程師和後台開發工程師。前端開發人員主要做我們可以在網頁上看的見的頁面，後台就做一些我們看不見的管理系統以及功能的實現。）程序員根據UI設計師的設計，用編碼來完成整個項目的各個功能。
這部分由程序測試員來完成。程序測試員主要就是測試尋找程序還存在的bug，一般來說剛編碼完成的程序都是存在問題的，就需要測試人員反復不斷的測試並將存在問題的測試結果交給編碼人員進行bug的修復。等到幾乎所有bug修復完成，這個項目差不多就可以上線了。
程序的維護是整個項目的最後一個階段，但也是耗時最多，成本最高最高的的一個階段。程序的維護包括程序上線後後續bug的修復和程序版本的更新。
『捌』 前端項目開發<Vue>
說明： 在項目開發中，在一個js或css文件中如果導入其他目錄下的相關文件，就需要通過如下方式,
示例：
但如果每次都導入同一目錄下的文件，會比較麻煩，就可以通過設置簡寫路徑達到同樣的導入效果
配置方法如下，其中key值為自定義的簡寫名稱（如stylePath），value值為配置的路徑
示例：
在需要跳轉的元素外包裹一層 <router-link></router-link> ，使用 to 語法即可跳轉到指定的頁面中
實際上，HTML會將 router-link 渲染成 <a> 標簽
這就會導致被 router-link 包裹的元素中的文字顯示成 <a> 默認的藍色樣式，可通過如下方式解決：
使用tag將 router-link 標記為 li 標簽，這樣既保證了 ul 中的子元素為 li ，又保證了html在渲染的時候，不會講 router-link 渲染為 a 標簽
如果某一頁面多次被訪問，並且其中的數據基本保持不變，則可以使用頁面緩存的技術：
註： 當頁面被緩存後，生命周期鉤子 mounted 方法則只會在第一次進入的時候，執行一次，就不會再執行了。但生命周期鉤子方法 activated 方法會每次調用
但如果頁面的數據根據傳過來的參數來判定是否需要緩存和刷新數據，則可以通過生命周期的鉤子 activated 來實現數據的刷新
如果通過 keep-alive 進行頁面的緩存，會將其包裹下的路由子頁面都會被緩存，假如其中的某一子頁面不需要被緩存，則可以通過 exclude 語法將不需要緩存的頁面隔離出去，保證其每次都會重新載入請求：
註：
當在一個頁面拖動到底部的某個位置的時候，再點擊其中的一個元素進入到下一個頁面，則進入的這個頁面也會被拖到相同的位置，這就造成了多頁面的拖動影響
在路由配置中，加入一項 scrollBescrollBehavior ，即每次進行路由切換的時候，讓頁面的初始位置為指定的x和y值
前端項目通過webpage 啟動的，它不支持IP的形式進行頁面訪問，所以需要修改項目的默認配置項
在項目的根目錄下的package.json文件中，進行如下配置：
註： 主頁增加了 --host 0.0.0.0
在某些瀏覽器和手機上不支持一些es6和vue的新特性，就會出現兼容性的問題
通過使用第三方框架庫 babel-polyfill 來解決兼容性問題
參考文章： https://blog.csdn.net/crazyfeeling/article/details/70241285
說明：