前后臺分離開發，你會了嗎？
圖片
1. 前后臺分離開發介紹
前端開發有2種方式：
- 前后臺混合開發
- 前后臺分離開發
前后臺混合開發，顧名思義就是前臺后臺代碼混在一起開發，前后臺混合開發模式有如下缺點：
- 溝通成本高：后臺人員發現前端有問題，需要找前端人員修改，前端修改成功，再交給后臺人員使用
- 分工不明確：后臺開發人員需要開發后臺代碼，也需要開發部分前端代碼。很難培養專業人才
- 不便管理：所有的代碼都在一個工程中
- 不便維護和擴展：前端代碼更新，和后臺無關，但是需要整個工程包括后臺一起重新打包部署。
所以我們目前基本都是采用的前后臺分離開發方式，那么可能小伙伴會問我一個寫后端的人為啥要學習一下前端?
在現在這個卷王之王的當下，我們可以不精通前端，但是前端基礎的curd(增刪改查)操作，最好可以實現自己編寫
那么基于前后臺分離開發的模式下，我們后臺開發者開發一個功能的具體流程如何呢？如下圖所示：
圖片
- 需求分析：首先我們需要閱讀需求文檔，分析需求，理解需求。
- 接口定義：查詢接口文檔中關于需求的接口的定義，包括地址，參數，響應數據類型等等
- 前后臺并行開發：各自按照接口文檔進行開發，實現需求
- 測試：前后臺開發完了，各自按照接口文檔進行測試
- 前后段聯調測試：前段工程請求后端工程，測試功能
2. 前端工程化
2.1. 前端工程化介紹
如果我們只學過Html,CSS和JS(前端三劍客)，使用前端三劍客開發存在如下問題：
- 每次開發都是從零開始，比較麻煩
- 多個頁面中的組件共用性不好
- js、圖片等資源沒有規范化的存儲目錄，沒有統一的標準，不方便維護
所以現在企業開發中更加講究前端工程化方式的開發，主要包括如下4個特點
- 模塊化：將js和css等，做成一個個可復用模塊
- 組件化：我們將UI組件，css樣式，js行為封裝成一個個的組件，便于管理
- 規范化：我們提供一套標準的規范的目錄接口和編碼規范，所有開發人員遵循這套規范
- 自動化：項目的構建，測試，部署全部都是自動完成
所以對于前端工程化，說白了，就是在企業級的前端項目開發中，把前端開發所需要的工具、技術、流程、經驗進行規范化和標準化。從而提升開發效率，降低開發難度等等。接下來我們就需要學習vue的官方提供的腳手架幫我們完成前端的工程化。
3. NodeJS安裝
vue前端工程化是通過官方提供的腳手架Vue-cli來完成的，用于快速的生成一個Vue的項目模板
Vue-cli主要提供了如下功能：
- 統一的目錄結構
- 本地調試
- 熱部署
- 單元測試
- 集成打包上線
我們需要運行Vue-cli，需要依賴NodeJS，NodeJS是前端工程化依賴的環境。所以我們需要先安裝NodeJS，然后才能安裝Vue-cli
給大家演示安裝的nodejs版本是node-v16.17.1-x64.msi，如果大家沒有該虛擬機軟件，可以在公眾號發VM獲取下載地址。
圖片
3.1. NodeJS安裝步驟
【步驟一】:雙擊node-v16.17.1-x64.msi
圖片
【步驟二】:選擇安裝目錄
圖片
圖片
【步驟三】:驗證NodeJS環境變量
NodeJS 安裝完畢后，會自動配置好環境變量，我們驗證一下是否安裝成功， 通過：
node -v
圖片
【步驟四】:配置npm的全局安裝路徑
圖片
使用管理員身份運行命令行，在命令行中，執行如下指令：
npm config set prefix "D:\allsoftware\install\nodejs"注意：D:\allsoftware\install\nodejs 這個目錄是NodeJS的安裝目錄
【步驟5】:切換npm的淘寶鏡像
使用管理員身份運行命令行，在命令行中，執行如下指令：
npm config set registry https://registry.npm.taobao.org【步驟6】:安裝Vue-cli
使用管理員身份運行命令行，在命令行中，執行如下指令：
npm install -g @vue/cli注意：這個過程中，會聯網下載，可能會耗時幾分鐘，耐心等待。
圖片
4. Vue項目-創建
Vue項目-創建方式
- 命令行
## vue create 項目名稱
vue create vue-project01- 圖形化界面
vue ui本次介紹對初學者比較友好的圖形化界面創建項目
4.1. Vue-圖形化界面項目創建步驟
【步驟一】：打開UI界面
在命令行中，執行如下指令：
vue ui
圖片
【步驟二】：創建項目
圖片
圖片
圖片
創建項目的過程，需要聯網進行，這可能會耗時比較長的時間，請耐心等待。 windows的命令行，容易卡頓，我們可以敲擊一下鍵盤
圖片
最后我們只需要等待片刻，即可進入到創建創建成功的界面，如下圖所示：
圖片
4.2. vue項目目錄結構介紹
我們通過VS Code打開之前創建的vue文件夾，打開之后，呈現如下圖所示頁面：
圖片
vue項目的標準目錄結構以及目錄對應的解釋如下圖所示:
圖片
其中我們平時開發代碼就是在src目錄下
4.3. 運行vue項目
那么vue項目開發好了，我們應該怎么運行vue項目呢？
- 通過VS Code提供的圖形化界面 ，如下圖所示：（注意：NPM腳本窗口默認不顯示，可以參考本節的最后調試出來）
圖片
點擊之后，我們等待片刻，即可運行，在終端界面中，我們發現項目是運行在本地服務的8080端口，我們直接通過瀏覽器打開地址
圖片
最終瀏覽器打開后，呈現如下界面，表示項目運行成功
圖片
4.4. 修改啟動端口
對于8080端口，經常被占用，所以我們可以去修改默認的8080端口。我們修改vue.config.js文件的內容，添加如下代碼
devServer:{
port:7000
}如下圖所示，然后我們關閉服務器，并且重新啟動
圖片
重新啟動如下圖所示：
圖片
補充：NPM腳本窗口調試出來
第一步：通過設置/用戶設置/擴展/MPM更改NPM默認配置，如下圖所示
圖片
然后重啟VS Code，并且雙擊打開package.json文件，然后點擊資源管理器處的3個小點，勾選npm腳本選項，如圖所示
圖片
然后就能都顯示NPM腳本小窗口了。
