圖片

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名申請、雅安服務(wù)器托管、營銷軟件、網(wǎng)站建設(shè)、鐵西網(wǎng)站維護(hù)、網(wǎng)站推廣。

1. 前后臺(tái)分離開發(fā)介紹

前端開發(fā)有2種方式：

• 前后臺(tái)混合開發(fā)
• 前后臺(tái)分離開發(fā)

前后臺(tái)混合開發(fā)，顧名思義就是前臺(tái)后臺(tái)代碼混在一起開發(fā)，前后臺(tái)混合開發(fā)模式有如下缺點(diǎn)：

• 溝通成本高：后臺(tái)人員發(fā)現(xiàn)前端有問題，需要找前端人員修改，前端修改成功，再交給后臺(tái)人員使用
• 分工不明確：后臺(tái)開發(fā)人員需要開發(fā)后臺(tái)代碼，也需要開發(fā)部分前端代碼。很難培養(yǎng)專業(yè)人才
• 不便管理：所有的代碼都在一個(gè)工程中
• 不便維護(hù)和擴(kuò)展：前端代碼更新，和后臺(tái)無關(guān)，但是需要整個(gè)工程包括后臺(tái)一起重新打包部署。

所以我們目前基本都是采用的前后臺(tái)分離開發(fā)方式，那么可能小伙伴會(huì)問我一個(gè)寫后端的人為啥要學(xué)習(xí)一下前端?

在現(xiàn)在這個(gè)卷王之王的當(dāng)下，我們可以不精通前端，但是前端基礎(chǔ)的curd(增刪改查)操作，最好可以實(shí)現(xiàn)自己編寫

那么基于前后臺(tái)分離開發(fā)的模式下，我們后臺(tái)開發(fā)者開發(fā)一個(gè)功能的具體流程如何呢？如下圖所示：

圖片

• 需求分析：首先我們需要閱讀需求文檔，分析需求，理解需求。
• 接口定義：查詢接口文檔中關(guān)于需求的接口的定義，包括地址，參數(shù)，響應(yīng)數(shù)據(jù)類型等等
• 前后臺(tái)并行開發(fā)：各自按照接口文檔進(jìn)行開發(fā)，實(shí)現(xiàn)需求
• 測試：前后臺(tái)開發(fā)完了，各自按照接口文檔進(jìn)行測試
• 前后段聯(lián)調(diào)測試：前段工程請求后端工程，測試功能

2. 前端工程化

2.1. 前端工程化介紹

如果我們只學(xué)過Html,CSS和JS(前端三劍客)，使用前端三劍客開發(fā)存在如下問題：

• 每次開發(fā)都是從零開始，比較麻煩
• 多個(gè)頁面中的組件共用性不好
• js、圖片等資源沒有規(guī)范化的存儲(chǔ)目錄，沒有統(tǒng)一的標(biāo)準(zhǔn)，不方便維護(hù)

所以現(xiàn)在企業(yè)開發(fā)中更加講究前端工程化方式的開發(fā)，主要包括如下4個(gè)特點(diǎn)

• 模塊化：將js和css等，做成一個(gè)個(gè)可復(fù)用模塊
• 組件化：我們將UI組件，css樣式，js行為封裝成一個(gè)個(gè)的組件，便于管理
• 規(guī)范化：我們提供一套標(biāo)準(zhǔn)的規(guī)范的目錄接口和編碼規(guī)范，所有開發(fā)人員遵循這套規(guī)范
• 自動(dòng)化：項(xiàng)目的構(gòu)建，測試，部署全部都是自動(dòng)完成

所以對于前端工程化，說白了，就是在企業(yè)級的前端項(xiàng)目開發(fā)中，把前端開發(fā)所需要的工具、技術(shù)、流程、經(jīng)驗(yàn)進(jìn)行規(guī)范化和標(biāo)準(zhǔn)化。從而提升開發(fā)效率，降低開發(fā)難度等等。接下來我們就需要學(xué)習(xí)vue的官方提供的腳手架幫我們完成前端的工程化。

3. NodeJS安裝

vue前端工程化是通過官方提供的腳手架Vue-cli來完成的，用于快速的生成一個(gè)Vue的項(xiàng)目模板

Vue-cli主要提供了如下功能：

• 統(tǒng)一的目錄結(jié)構(gòu)
• 本地調(diào)試
• 熱部署
• 單元測試
• 集成打包上線

我們需要運(yùn)行Vue-cli，需要依賴NodeJS，NodeJS是前端工程化依賴的環(huán)境。所以我們需要先安裝NodeJS，然后才能安裝Vue-cli

給大家演示安裝的nodejs版本是node-v16.17.1-x64.msi，如果大家沒有該虛擬機(jī)軟件，可以在公眾號(hào)發(fā)VM獲取下載地址。

圖片

3.1. NodeJS安裝步驟

【步驟一】:雙擊node-v16.17.1-x64.msi

圖片

【步驟二】:選擇安裝目錄

圖片

圖片

【步驟三】:驗(yàn)證NodeJS環(huán)境變量

NodeJS 安裝完畢后，會(huì)自動(dòng)配置好環(huán)境變量，我們驗(yàn)證一下是否安裝成功， 通過：

node -v

圖片

【步驟四】:配置npm的全局安裝路徑

圖片

使用管理員身份運(yùn)行命令行，在命令行中，執(zhí)行如下指令：

npm config set prefix "D:\allsoftware\install\nodejs"

注意：D:\allsoftware\install\nodejs 這個(gè)目錄是NodeJS的安裝目錄

【步驟5】:切換npm的淘寶鏡像

使用管理員身份運(yùn)行命令行，在命令行中，執(zhí)行如下指令：

npm config set registry https://registry.npm.taobao.org

【步驟6】:安裝Vue-cli

使用管理員身份運(yùn)行命令行，在命令行中，執(zhí)行如下指令：

npm install -g @vue/cli

注意：這個(gè)過程中，會(huì)聯(lián)網(wǎng)下載，可能會(huì)耗時(shí)幾分鐘，耐心等待。

圖片

4. Vue項(xiàng)目-創(chuàng)建

Vue項(xiàng)目-創(chuàng)建方式

• 命令行

## vue create 項(xiàng)目名稱
vue create vue-project01

• 圖形化界面

vue ui

本次介紹對初學(xué)者比較友好的圖形化界面創(chuàng)建項(xiàng)目

4.1. Vue-圖形化界面項(xiàng)目創(chuàng)建步驟

【步驟一】：打開UI界面

在命令行中，執(zhí)行如下指令：

vue ui

圖片

【步驟二】：創(chuàng)建項(xiàng)目

圖片

圖片

圖片

創(chuàng)建項(xiàng)目的過程，需要聯(lián)網(wǎng)進(jìn)行，這可能會(huì)耗時(shí)比較長的時(shí)間，請耐心等待。 windows的命令行，容易卡頓，我們可以敲擊一下鍵盤

圖片

最后我們只需要等待片刻，即可進(jìn)入到創(chuàng)建創(chuàng)建成功的界面，如下圖所示：

圖片

4.2. vue項(xiàng)目目錄結(jié)構(gòu)介紹

我們通過VS Code打開之前創(chuàng)建的vue文件夾，打開之后，呈現(xiàn)如下圖所示頁面：

圖片

vue項(xiàng)目的標(biāo)準(zhǔn)目錄結(jié)構(gòu)以及目錄對應(yīng)的解釋如下圖所示:

圖片

其中我們平時(shí)開發(fā)代碼就是在src目錄下

4.3. 運(yùn)行vue項(xiàng)目

那么vue項(xiàng)目開發(fā)好了，我們應(yīng)該怎么運(yùn)行vue項(xiàng)目呢？

• 通過VS Code提供的圖形化界面 ，如下圖所示：（注意：NPM腳本窗口默認(rèn)不顯示，可以參考本節(jié)的最后調(diào)試出來）

圖片

點(diǎn)擊之后，我們等待片刻，即可運(yùn)行，在終端界面中，我們發(fā)現(xiàn)項(xiàng)目是運(yùn)行在本地服務(wù)的8080端口，我們直接通過瀏覽器打開地址

圖片

最終瀏覽器打開后，呈現(xiàn)如下界面，表示項(xiàng)目運(yùn)行成功

圖片

4.4. 修改啟動(dòng)端口

對于8080端口，經(jīng)常被占用，所以我們可以去修改默認(rèn)的8080端口。我們修改vue.config.js文件的內(nèi)容，添加如下代碼

devServer:{
    port:7000
}

如下圖所示，然后我們關(guān)閉服務(wù)器，并且重新啟動(dòng)

圖片

重新啟動(dòng)如下圖所示：

圖片

補(bǔ)充：NPM腳本窗口調(diào)試出來

第一步：通過設(shè)置/用戶設(shè)置/擴(kuò)展/MPM更改NPM默認(rèn)配置，如下圖所示

圖片

然后重啟VS Code，并且雙擊打開package.json文件，然后點(diǎn)擊資源管理器處的3個(gè)小點(diǎn)，勾選npm腳本選項(xiàng)，如圖所示

圖片

然后就能都顯示NPM腳本小窗口了。

網(wǎng)頁題目：前后臺(tái)分離開發(fā)，你會(huì)了嗎？
網(wǎng)站路徑：http://uogjgqi.cn/article/cccigse.html