這篇文章是去年疫情期間在家給公司同事寫的前端開發教程。
為什麼要用元件化的方式來開發前端頁面呢？
首先來談談我們公司開發現有的問題。
這些年web前端開發技術日新月異，發展迅猛，而我們公司現有的開發方式和採用的技術還是比較落後的。
我們公司現在採取的是傳統的開發方式，美工負責設計系統需要的各種圖片、切圖，設計頁面佈局和編寫樣式。上面的工作完成後就交給後臺開發人員了，後臺開發人員負責後臺邏輯，從資料庫中讀取資料並渲染到頁面上。前端的所有工作圍繞著切圖、調樣式開展。我們後端開發人員開發前端頁面需要的功能也採用的是比較原始的方式。JavaScript語言還停留在es5階段，很少運用現在流行的前端開發工具，前端框架主要使用jquery,更為先進的高效的框架比如Angualr，vue,react等等都沒有使用過，沒有使用工程化、元件化的，面向物件的方式做前端專案，程式碼跟頁面dom結構耦合過於緊密，專案不易維護，重複工作多，不易複用。
前端開發現在的前端趨勢是什麼？就是工程化，工作的模式和後端開發一樣，也是多模組多人協作開發（這也就誕生了CommonJS、AMD/CMD、require這些模組化標準），那麼就需要進行工程化，否則程式碼很難管理與維護。前端承擔的任務也比原來繁重了很多，後端只需要提供介面API，剩下的檢視層的渲染工作全部由前端完成。前後端分工越來越清晰，前後端在專案開發過程中不再相互制約，前端與後端已經分離。
現在前端最流行的開發工具是VsCode,非常非常的好用。
工程化開發一般會用到webpack這個工具來配合其他工具來開發，比如可以用原生js(最好採用es6及以上版本)+webpack的方式，也可以用js+前端框架(jquery,最好是vue,react)+webpack的方式，
下面我們以webpack+vue的方式簡單的說一下工程化開發前端專案的搭建過程:
以下過程都是基於webpack4的
1、安裝node.js
進入 https://nodejs.org/en/download/ 根據自己電腦的系統不同，下載對應的安裝檔案，進行安裝
2、由於npm下載資源很慢，因此推薦使用阿里的 cnpm來取代npm
3、安裝webpack(webpack是什麼後面再講)
sudo cnpm install [email protected] -g
4、安裝webpack-cli(腳手架工具)
sudo cnpm install webpack-cli -g
sudo cnpm install webpack-cli -D
這兩步都要執行
5、初始化工程
新建工程目錄
mkdir syInfoApp
進入工程目錄
cd syInfoApp
初始化
cnpm init
安裝後，目錄下會產生一個package.json檔案，裡面記錄了依賴的模組資訊、版本資訊還有專案的一些基本資訊。網上的一些教程，使用已經搭建好的環境進行講解，當看到package.json檔案的時候，裡面一大堆的東西讓人頭暈，還是從頭一點兒點兒來比較清晰
6、在專案中安裝webpack
進入專案所在目，執行如下命令
cnpm install [email protected] --save-dev
這時可以看到在package.json中看到對webpack的依賴資訊了
7、建立專案基本目錄
參照約定，建立以下目錄
/src：存放原始碼目錄
/src/assets：存放專案公用的圖片、js、樣式、模板、資料的資源
/src/components：存放封裝好的前端元件，比如圖片上傳元件、樹元件、列表元件等等
/src/routes：存放vue-router的路由配置
/src/views：存放應用的檢視，比如使用者管理頁面（叫頁面不確切，因為我們是單頁面應用，整個系統只有一個頁面。所以叫html片段更貼切）
/dist：存放webpack打包後的檔案，是正式釋出的目錄
8、建立表要的檔案
app.vue：這是基於Vue開發的根例項。
index.js：負責將app.vue掛載到專案的主頁，也就是index.html上（index.html在哪？後續會介紹）
工程化開發的目錄結構圖(採用的是vue框架):

下面我們來講一講元件化程式設計。 元件化程式設計的特點:頁面結構、樣式、邏輯分離 也就是html、樣式、js分離。目的:好維護，易於修改，可複用。 一個元件對應一個模板頁面，一個js檔案，一個樣式檔案。這些檔案具體怎麼編寫在手機上不好展示，回公司後可以把一些示例程式碼發給大家。 我們怎麼來頁面的拆分元件呢? 下面我以一個具有首頁、列表頁、詳情頁的典型網站來簡單分析怎麼進行元件拆分。 元件分析:
首頁: 
列表頁: 
詳情頁: 
元件程式設計具體怎麼做，到時候整理一個具體的專案程式碼給大家。
webpack介紹: 什麼是WebPack？
webpack 是一個現代 JavaScript 應用序的靜態模組打包器(module bundler) 它做的事情是，分析你的專案結構，找到JavaScript模組以及其它的一些瀏覽器不能直接執行的拓展語言（Sass/scss，TypeScript等），並將其轉換和打包為合適的格式供瀏覽器使用。在3.0出現後，Webpack還肩負起了最佳化專案的責任。 為什麼要使用webpack. 前端工程化開發流行後，特別是SPA（single page web application 單頁應用）技術流行後，JavaScript的複雜度增加和需要一大堆依賴包，還需要解決SCSS，Less……新增樣式的擴充套件寫法的編譯工作。所以現代化的前端已經完全依賴於WebPack的輔助了。 現在最流行的三個前端框架，可以說和webpack已經緊密相連，框架官方都推出了和自身框架依賴的webpack構建工具。
React.js+WebPack
Vue.js+WebPack
AngluarJS+WebPack
從此可以看出，無論你前端走那條線，你都需要具備Webpack知識。
webpack的作用:
1、打包：可以把多個Javascript檔案打包壓縮成一個檔案，減少伺服器壓力和下載頻寬。2、轉換：把Sass/scss轉換成瀏覽器可以識別的CSS,把拓展語言轉換成為普通的JavaScript，讓瀏覽器順利執行。現在還有一些瀏覽器的老版本不支援es6及以上版本，webpack讓你輕鬆使用es6以及更高版本。 3、最佳化：前端變的越來越複雜後，效能也會遇到問題，而WebPack也開始肩負起了最佳化和提升效能的責任。
安裝WebPack
要使用WebPack就要先進行安裝， 一般WebPack的安裝採用的是命令列npm形式的安裝。 這裡我以windows系統為例，講解一下安裝方法。 具體安裝方法：
1、用win+R開啟執行對話方塊，輸入cmd進入命令列模式。然後找到你想開始專案的地方，輸入下方程式碼： mkdir webpack_demo cd webpack_demo 第一句是建立一個資料夾，第二句是進入這個資料夾。這個資料夾就是我們的專案檔案目錄了，資料夾建立好後，可以透過下面命令安裝WebPack。 需要注意的是,你在執行下一步時必須安裝node，可以透過 node -v來檢視node安裝情況和版本，如果沒有安裝，要先安裝node才可以繼續進行。
•全域性安裝 npm install -g webpack 如果你這時安裝失敗了（出現了報錯資訊），一般有三種可能： 網路問題，可以考慮使用cnpm來安裝（這個是淘寶實時更新的映象）,具體可以登入cnpm的官方網站學習http://npm.taobao.org/。 許可權問題，在Liux、Mac安裝是需要許可權，如果你是Windows系統，主要要使用以管理員方式安裝。請在命令前加sudo 即可
注意：全域性安裝是可以的，但是webpack官方是不推薦的。這會將您專案中的 webpack 鎖定到指定版本，並且在使用不同的 webpack 版本的專案中，可能會導致構建失敗。
•對專案目錄進行安裝 全域性安裝完成後，我們還要進行一個專案目錄的安裝。在用npm安裝前，我們先要進行一下初始化，初始化的主要目的是生成package.json檔案（這是一個標準的npm說明檔案，裡面蘊含了豐富的資訊，包括當前專案的依賴模組，自定義的指令碼任務等等，如果你對此檔案還不瞭解，可以看看node 的相關知識）。
在命令列輸入： npm init 輸入完成後，npm終端會問你關於專案的名稱，描述……一堆內容，如果你不考慮釋出到npm上，這些內容都不重要，而且我們後期還可以用文字的形式修改這些內容。現在我們只要一路回車就完成了初始化。這時用dir命令已經可以看到生成的package.json檔案了。
輸入下面命令進行專案目錄的安裝： npm install --save-dev webpack 這裡的引數–save是要儲存到package.json中，dev是在開發時使用這個包，而生產環境中不使用。
開發環境和生產環境： 開發環境：在開發時需要的環境，這裡指在開發時需要依賴的包。
生產環境：程式開發完成，開始執行後的環境，這裡指要使專案執行，所需要的依賴包。
檢視webpack版本 你安裝好後，會想知道你現在webpack版本，在工作中交流時，也會經常問到你，你的打包版本是什麼？這時候我們可以用下面的命令進行檢視。 webpack -v 出現了版本號，也說明你的webpack安裝成功了。 webpack的配置: webpack的配置有點複雜，容易出錯，手機上不好講解，今天就簡單說一下，以後有機會可以在電腦上講解一下。
webpack的配置檔案的名字叫webpack.congfig.js,下圖是webpack最基本的配置。實際上的配置要複雜很多，我們要配置專案需要的依賴項和外掛。一般我們配置完一個專案後，新建一個專案時，可以把原來的配置檔案複製過去，稍微修改一下，就可以使用，不用每次都重新配。