項(xiàng)目1：搭建“古典文學(xué)網(wǎng)”的開發(fā)環(huán)境（定稿請參照該版本完善其他章節(jié)）

項(xiàng)目1搭建“古典文學(xué)網(wǎng)”的開發(fā)環(huán)境XXX202X-XX-XX

目錄02.任務(wù)1：搭建項(xiàng)目后端開發(fā)環(huán)境05.任務(wù)4：開發(fā)“hivue”前端項(xiàng)目03.任務(wù)2：開發(fā)“hiflask”后端項(xiàng)目04.任務(wù)3：開發(fā)“hiflask”后端項(xiàng)目01.知識儲備：全棧開發(fā)技術(shù)06.拓展任務(wù)

學(xué)習(xí)目標(biāo)知識目標(biāo)：

了解“古典文學(xué)網(wǎng)”項(xiàng)目需求，掌握其功能結(jié)構(gòu)與設(shè)計(jì)理念；

了解“全棧開發(fā)”概念與特點(diǎn)，掌握其開發(fā)理念，并靈活運(yùn)用于實(shí)踐中；

了解“前后端分離技術(shù)”的原理與優(yōu)勢，掌握其技術(shù)棧及實(shí)際運(yùn)用。能力目標(biāo)：

通過學(xué)習(xí)“古典文學(xué)網(wǎng)”后端技術(shù)，能熟練搭建后端開發(fā)環(huán)境；

通過學(xué)習(xí)“古典文學(xué)網(wǎng)”前端技術(shù)，能夠熟練搭建前端開發(fā)環(huán)境。素質(zhì)目標(biāo)：

培養(yǎng)軟件工程師的系統(tǒng)思維，嚴(yán)格遵守行業(yè)規(guī)范和標(biāo)準(zhǔn)，提高軟件質(zhì)量和可靠性；

培養(yǎng)軟件工程師的責(zé)任感、職業(yè)精神和團(tuán)隊(duì)精神，遵守職業(yè)道德。01項(xiàng)目描述

1.1.項(xiàng)目需求老袁對“古典文學(xué)網(wǎng)”項(xiàng)目進(jìn)行了如下介紹：該項(xiàng)目是一個專注于高品質(zhì)古典文學(xué)的在線閱讀與交流平臺，旨在推動中華文化的傳承與發(fā)展。在這個平臺上，用戶可以欣賞到豐富的古典文學(xué)作品，參與書評討論，并管理自己的個人中心。該項(xiàng)目采用全棧開發(fā)方式，運(yùn)用前后端分離技術(shù)架構(gòu)，使用Python、Flask、Vue.js、ElementPlus和MySQL等技術(shù)進(jìn)行開發(fā)，旨在為用戶提供一款功能強(qiáng)大、界面友好的Web應(yīng)用。

1.2.項(xiàng)目WBS工作分解結(jié)構(gòu)圖小白認(rèn)真聽取了老袁對“古典文學(xué)網(wǎng)”項(xiàng)目的詳細(xì)介紹，并結(jié)合項(xiàng)目需求文檔，精心繪制了“古典文學(xué)網(wǎng)”項(xiàng)目的WBS工作分解結(jié)構(gòu)圖，如圖所示。02知識儲備

2.知識儲備在“古典文學(xué)網(wǎng)”項(xiàng)目正式開發(fā)之前，老袁指導(dǎo)小白先初步了解項(xiàng)目所采用的技術(shù)框架，包括全棧開發(fā)、前后端分離技術(shù)等。

2.1.全棧開發(fā)全棧開發(fā)是一種能提升開發(fā)效率和軟件質(zhì)量的開發(fā)模式。這種開發(fā)模式，需要開發(fā)人員具備多元化的技能和實(shí)踐經(jīng)驗(yàn)，能獨(dú)立承擔(dān)開發(fā)一個應(yīng)用程序的全部工作，涵蓋前端開發(fā)與后端開發(fā)、數(shù)據(jù)庫管理以及系統(tǒng)架構(gòu)設(shè)計(jì)等多個方面。全棧開發(fā)人員應(yīng)熟練掌握HTML、CSS、JavaScript等前端技術(shù)，同時還應(yīng)了解后端語言如Python、Node.js、Ruby等，并對數(shù)據(jù)庫管理、系統(tǒng)設(shè)計(jì)以及性能優(yōu)化等領(lǐng)域有所涉獵。全棧開發(fā)的優(yōu)勢在于，它能提升開發(fā)效率和軟件質(zhì)量，同時降低溝通和協(xié)調(diào)成本。因?yàn)槿珬ｉ_發(fā)人員具備全面的技能，所以他們能更深入地理解和掌握項(xiàng)目的整體架構(gòu)和細(xì)節(jié)，從而更有效地完成開發(fā)工作。

2.2.前后端分離技術(shù)前后端分離技術(shù)是一種應(yīng)用程序架構(gòu)模式，它將前端（用戶界面）和后端（服務(wù)器端）的開發(fā)任務(wù)明確區(qū)分，并通過預(yù)先定義的接口進(jìn)行通信。這種架構(gòu)模式的實(shí)施，使得前端和后端開發(fā)團(tuán)隊(duì)能夠獨(dú)立進(jìn)行開發(fā)、測試和部署工作，從而極大地提高了軟件開發(fā)的效率和質(zhì)量。在前后端分離架構(gòu)中，前端團(tuán)隊(duì)主要負(fù)責(zé)呈現(xiàn)數(shù)據(jù)以及實(shí)現(xiàn)用戶交互，而后端團(tuán)隊(duì)則專注于處理業(yè)務(wù)邏輯和數(shù)據(jù)存儲。前端團(tuán)隊(duì)可以利用各種前端技術(shù)和框架，創(chuàng)造出豐富、動態(tài)的用戶界面，為用戶提供流暢、直觀的使用體驗(yàn)。同時，后端團(tuán)隊(duì)則可以利用后端技術(shù)和數(shù)據(jù)庫管理系統(tǒng)，實(shí)現(xiàn)高效、穩(wěn)定的數(shù)據(jù)處理和業(yè)務(wù)邏輯執(zhí)行。前后端分離技術(shù)架構(gòu)如圖1.2所示。

2.2.前后端分離技術(shù)logo圖1.2前后端分離技術(shù)架構(gòu)圖

2.3.Python開發(fā)技術(shù)Python的簡介Python是由荷蘭計(jì)算機(jī)科學(xué)家吉多范羅蘇姆（GuidovanRossum）于1989年首次開發(fā)的編程語言，最初被設(shè)計(jì)為一種簡單易學(xué)的腳本語言，主要用于編寫自動化腳本。然而，隨著計(jì)算機(jī)科學(xué)的不斷發(fā)展，Python也逐步演變成為一種功能全面、用途廣泛的編程語言。Python的應(yīng)用領(lǐng)域非常廣泛，無論是Web開發(fā)、數(shù)據(jù)科學(xué)、人工智能、機(jī)器學(xué)習(xí)，還是網(wǎng)絡(luò)爬蟲、系統(tǒng)自動化、游戲開發(fā)等領(lǐng)域，Python都發(fā)揮著重要的作用。Python的豐富庫和框架，如Django、Flask、Pandas、NumPy、TensorFlow等，為開發(fā)者提供了強(qiáng)大的工具，使得Python成為許多領(lǐng)域的首選語言。Python語言的Logo圖標(biāo)如圖所示。

pip包管理工具pip是Python的包管理工具，它提供了查找、下載、安裝和卸載Python包的功能。自Python3.4+版本起，pip包管理工具已經(jīng)被集成到Python中，使得在線安裝依賴庫變得非常方便。在Windows系統(tǒng)中，我們可以通過“命令行窗口”直接執(zhí)行pip命令，或者在VisualStudioCode的終端窗口中執(zhí)行。這使得在開發(fā)過程中管理Python包變得更加高效和便捷。

pip包管理工具

2.4.Flask框架Flask框架的簡介Flask框架是一個用Python語言編寫的輕量級Web應(yīng)用框架（Microframework），它適合各種規(guī)模的Web項(xiàng)目，無論是小型個人網(wǎng)站還是大型企業(yè)級應(yīng)用。此外，F(xiàn)lask框架的強(qiáng)大插件庫為用戶提供了實(shí)現(xiàn)個性化網(wǎng)站定制的可能性，使其非常適用于快速開發(fā)功能強(qiáng)大的Web應(yīng)用程序和Web服務(wù)API。Flask框架的Logo圖標(biāo)如圖所示。

2.4.Flask框架Flask框架的特點(diǎn)（1）輕量級和靈活Flask是一個輕量級的Web應(yīng)用框架，它只包含核心功能，如路由、模板渲染等。這使得Flask非常靈活，開發(fā)者可以根據(jù)自己的需求自由添加和配置所需的功能。（2）易于擴(kuò)展Flask采用擴(kuò)展機(jī)制，開發(fā)者可以通過添加擴(kuò)展來擴(kuò)展其功能。Flask擁有強(qiáng)大的插件庫，這些插件可以為Flask添加各種功能，如數(shù)據(jù)庫管理、表單驗(yàn)證、用戶認(rèn)證等。（3）簡潔的APIFlask的API非常簡潔和易于理解，這使得開發(fā)者能夠更快速地學(xué)習(xí)和使用Flask。同時，簡潔的API也減少了開發(fā)者的學(xué)習(xí)成本和維護(hù)成本。（4）適用于各種應(yīng)用Flask適用于各種規(guī)模和應(yīng)用類型的Web項(xiàng)目，它的靈活性和可擴(kuò)展性使得它能夠應(yīng)對各種復(fù)雜場景。

2.5.MySQL數(shù)據(jù)庫MySQL數(shù)據(jù)庫是一個開源的關(guān)系型數(shù)據(jù)庫管理系統(tǒng)（RDBMS），它最初由瑞典的MySQLAB公司開發(fā)，而現(xiàn)在它是甲骨文公司（OracleCorporation）的一部分。由于其強(qiáng)大的性能和靈活性，MySQL已經(jīng)成為最受歡迎的開源關(guān)系型數(shù)據(jù)庫之一。MySQL數(shù)據(jù)庫的Logo圖標(biāo)如圖所示。

2.5.MySQL數(shù)據(jù)庫MySQL支持多個操作系統(tǒng)，包括Linux、Windows、macOS等，因此它可以在各種不同的環(huán)境中運(yùn)行。MySQL提供了高效、可靠、穩(wěn)定的數(shù)據(jù)存儲和管理服務(wù)。這使得它成為Web應(yīng)用程序、企業(yè)應(yīng)用程序和移動應(yīng)用程序等領(lǐng)域的理想選擇。

2.6.Vue開發(fā)技術(shù)Vue框架的簡介Vue框架是一個構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，它的設(shè)計(jì)理念使得開發(fā)者可以靈活地將其應(yīng)用于各種規(guī)模和復(fù)雜度的項(xiàng)目中。與其他大型框架不同，Vue被設(shè)計(jì)為可以自底向上逐層應(yīng)用，這意味著開發(fā)者可以根據(jù)項(xiàng)目的實(shí)際需求逐步引入Vue的功能，從而實(shí)現(xiàn)平滑的過渡和擴(kuò)展。Vue框架的Logo圖標(biāo)如圖所示。

2.6.Vue開發(fā)技術(shù)Vue框架的簡介Vue框架的核心庫專注于視圖層，這使得它易于上手，同時也便于與第三方庫或已有項(xiàng)目整合。無論是簡單的靜態(tài)頁面還是復(fù)雜的單頁應(yīng)用，Vue框架都能提供靈活而高效的解決方案。

2.6.Vue開發(fā)技術(shù)Vue框架的特點(diǎn)（1）輕量級與簡單易學(xué)Vue的核心庫專注于視圖層，使得它相比于其他大型框架更為輕量級。同時，Vue采用了簡潔的API設(shè)計(jì)，使得開發(fā)者可以快速上手并掌握其使用。（2）組件化開發(fā)Vue通過組件化的開發(fā)方式，將頁面拆分為多個獨(dú)立的組件，每個組件負(fù)責(zé)自己的邏輯和樣式。組件間可以相互嵌套，使得開發(fā)者能夠構(gòu)建出復(fù)雜且富有層次感的界面。（3）響應(yīng)式數(shù)據(jù)綁定Vue使用了響應(yīng)式的數(shù)據(jù)綁定機(jī)制，當(dāng)數(shù)據(jù)發(fā)生變化時，頁面會自動更新以反映最新的數(shù)據(jù)狀態(tài)。這種機(jī)制使得開發(fā)者無須手動操作DOM，大大簡化了開發(fā)過程。03項(xiàng)目任務(wù)

3.1.搭建項(xiàng)目后端開發(fā)環(huán)境在項(xiàng)目的后端開發(fā)中，我們采用了Python語言、Flask框架、VisualStudioCode開發(fā)工具以及MySQL數(shù)據(jù)庫等核心技術(shù)。在正式搭建開發(fā)環(huán)境之前，我們必須先確認(rèn)項(xiàng)目電腦所使用的操作系統(tǒng)的版本，以確保兼容性和穩(wěn)定性（本項(xiàng)目使用Windows64位操作系統(tǒng)）。隨后，我們需下載與之兼容的開發(fā)工具。需求描述：

3.1.搭建項(xiàng)目后端開發(fā)環(huán)境任務(wù)步驟：1.安裝Python開發(fā)環(huán)境2.安裝Flask框架及擴(kuò)展包3.安裝VisualStudioCode開發(fā)工具4.安裝MySQL數(shù)據(jù)庫

3.1.搭建項(xiàng)目后端開發(fā)環(huán)境1.安裝Python開發(fā)環(huán)境安裝Python語言環(huán)境，需要下載Python安裝包。我們通過瀏覽器訪問其官方網(wǎng)站，選擇適合自己操作系統(tǒng)版本的Python安裝包，如圖所示。（1）下載Python安裝包

3.1.搭建項(xiàng)目后端開發(fā)環(huán)境下載Python安裝包后，接下來進(jìn)行安裝。首先，使用鼠標(biāo)左鍵雙擊下載的Python安裝包，這將啟動安裝程序。安裝程序通常會顯示一個圖形界面，其中包含幾個步驟來引導(dǎo)用戶完成安裝過程，如圖所示。1.安裝Python開發(fā)環(huán)境（2）安裝Python

3.1.搭建項(xiàng)目后端開發(fā)環(huán)境在上述界面勾選“Useadminprivilegeswheninstallingpy.exe”和“Addpython.exetoPATH”兩項(xiàng)，并單擊“Customizeinstallation”鏈接，按引導(dǎo)提示進(jìn)行自定義安裝，進(jìn)入高級選項(xiàng)界面，如圖所示。在上述的安裝界面，勾選圖示中的選項(xiàng)，并選中Python安裝目錄（請勿安裝在ProgramFiles目錄下）。單擊“Install”按鈕，完成安裝。1.安裝Python開發(fā)環(huán)境（2）安裝Python

3.1.搭建項(xiàng)目后端開發(fā)環(huán)境首先，按下鍵盤上的Win+R快捷鍵，這將打開“運(yùn)行”對話框。在對話框中，輸入cmd命令，并單擊“確定”或按回車鍵，以打開命令行窗口。接下來，在命令行窗口中，輸入python命令，并按回車鍵，將顯示Python的版本信息，即表示已經(jīng)安裝成功，如圖所示。1.安裝Python開發(fā)環(huán)境（3）驗(yàn)證Python

3.1.搭建項(xiàng)目后端開發(fā)環(huán)境由于一些客觀原因，使用Python的pip包管理工具下載第三方庫時速度很慢，這時可以使用鏡像下載，提高下載速度。請?jiān)诿钚写翱谥休斎胍韵旅?，并按下“回車鍵”后，完成鏡像的安裝。pipconfigsetglobal.index-url

/pypi/simple1.安裝Python開發(fā)環(huán)境（3）驗(yàn)證Python

3.1.搭建項(xiàng)目后端開發(fā)環(huán)境2.安裝Flask框架及擴(kuò)展包在進(jìn)行項(xiàng)目的后端開發(fā)時，我們使用Flask框架作為主要開發(fā)技術(shù)。為此我們需要使用pip工具來安裝Flask框架及相關(guān)擴(kuò)展庫。以下是在本項(xiàng)目中使用到的相關(guān)庫及其安裝命令的列表。

3.1.搭建項(xiàng)目后端開發(fā)環(huán)境安裝Flask框架為例在此處，我們以安裝Flask框架為例，展示如何使用pip工具安裝Flask框架。首先，打開命令行窗口，在命令行窗口中，輸入以下指令來安裝Flask框架。pipinstallflask按下“回車鍵”后，pip將開始從Python軟件包索引（PyPI）下載并安裝Flask框架。2.安裝Flask框架及擴(kuò)展包

3.1.搭建項(xiàng)目后端開發(fā)環(huán)境3.安裝VisualStudioCode開發(fā)工具安裝VisualStudioCode（VSCode）開發(fā)工具，需要下載其安裝包。我們通過瀏覽器訪問VSCode的官方網(wǎng)站。在官方網(wǎng)站上，選擇相應(yīng)的VSCode安裝包進(jìn)行下載，如圖所示。（1）下載VSCode安裝包

3.1.搭建項(xiàng)目后端開發(fā)環(huán)境下載VSCode安裝包后，接下來進(jìn)行安裝。首先，使用鼠標(biāo)左鍵雙擊下載的VSCode安裝包。這通常會啟動安裝向?qū)В龑?dǎo)我們完成安裝過程。VSCode的操作界面如圖所示。3.安裝VisualStudioCode開發(fā)工具（1）下載VSCode安裝包

3.1.搭建項(xiàng)目后端開發(fā)環(huán)境為了進(jìn)行項(xiàng)目開發(fā)，我們還需要安裝一些支持Python的擴(kuò)展插件。這些插件可以增強(qiáng)VSCode的功能，使其更好地支持Python語言。請按照以下步驟安裝相關(guān)擴(kuò)展插件：①

打開VSCode，單擊左側(cè)邊欄的擴(kuò)展圖標(biāo)（快捷鍵Ctrl+Shift+X）打開擴(kuò)展面板。②

在搜索框中輸入插件名稱，然后在搜索結(jié)果中找到對應(yīng)插件。③

單擊插件旁邊的“Install”按鈕來安裝插件。3.安裝VisualStudioCode開發(fā)工具（2）VSCode擴(kuò)展插件安裝

3.1.搭建項(xiàng)目后端開發(fā)環(huán)境3.安裝VisualStudioCode開發(fā)工具表1.3后端項(xiàng)目所使用到的VSCode擴(kuò)展庫

3.1.搭建項(xiàng)目后端開發(fā)環(huán)境我們通過瀏覽器訪問MySQL的官方網(wǎng)站。在官方網(wǎng)站上，選擇相應(yīng)的MySQL安裝包進(jìn)行下載，如圖所示。4.安裝MySQL數(shù)據(jù)庫（1）下載MySQL安裝包

3.1.搭建項(xiàng)目后端開發(fā)環(huán)境下載MySQL安裝包后，請使用鼠標(biāo)左鍵雙擊MySQL安裝包。這通常會啟動安裝向?qū)В诎惭b引導(dǎo)界面，我們勾選“Full”選項(xiàng)，安裝MySQL數(shù)據(jù)庫，如圖所示。4.安裝MySQL數(shù)據(jù)庫（2）安裝MySQL數(shù)據(jù)庫

3.1.搭建項(xiàng)目后端開發(fā)環(huán)境當(dāng)我們單擊“Next”按鈕后，安裝程序?qū)㈤_始檢查我們的安裝環(huán)境，如果在檢查安裝環(huán)境的過程中，提示缺少VC庫（VisualC++庫），請先安裝VC庫。單擊“Next”按鈕，進(jìn)入安裝確認(rèn)界面，如圖所示。在上述界面中，單擊“Execute”按鈕后，開始進(jìn)行安裝。4.安裝MySQL數(shù)據(jù)庫（2）安裝MySQL數(shù)據(jù)庫

3.1.搭建項(xiàng)目后端開發(fā)環(huán)境在安裝完成界面，單擊“Next”按鈕后，安裝程序會進(jìn)入MySQL配置界面。在該配置過程中，可以配置MySQL的端口、登錄賬號及密碼等配置信息，請按提示完成安裝。4.安裝MySQL數(shù)據(jù)庫（2）安裝MySQL數(shù)據(jù)庫

3.2.開發(fā)“hiflask”后端項(xiàng)目為了確保開發(fā)環(huán)境能夠正常運(yùn)行，我們將開發(fā)一個簡單的Flask項(xiàng)目進(jìn)行測試。需求描述：

3.2.開發(fā)“hiflask”后端項(xiàng)目任務(wù)步驟：1.創(chuàng)建“hiflask”項(xiàng)目2.開發(fā)“hiflask”項(xiàng)目3.運(yùn)行“hiflask”項(xiàng)目

3.2.開發(fā)“hiflask”后端項(xiàng)目1.創(chuàng)建“hiflask”項(xiàng)目首先，在磁盤中新建一個名為“hiflask”的文件夾，作為項(xiàng)目存放目錄。接下來啟動VSCode開發(fā)工具，單擊菜單欄中的“File”選項(xiàng)，然后在下拉菜單中選擇“OpenFolder”命令，打開剛才創(chuàng)建的“hiflask”文件夾，如圖所示。

3.2.開發(fā)“hiflask”后端項(xiàng)目2.開發(fā)“hiflask”項(xiàng)目在“hiflask”項(xiàng)目中，請?jiān)赩SCode的菜單欄中，單擊“File”菜單，然后在下拉菜單中選擇“NewFile...”子菜單，新建一個名為App.py的文件，并輸入以下代碼：#引入Flask框架fromflaskimportFlask#創(chuàng)建Flask框架引用app=Flask(__name__)#定義一個請求方法，用于輸出文字@app.route("/")defhello_flask():

return"HelloFlask"#啟動Flask程序if__name__=="__main__":

app.run(debug=True)

3.2.開發(fā)“hiflask”后端項(xiàng)目3.運(yùn)行“hiflask”項(xiàng)目請打開“App.py”文件，在VSCode菜單欄中，選中“Run”菜單，然后在下拉菜單中選擇“StartDebugging（F5快捷鍵）”子菜單，啟動該項(xiàng)目（選中“PythonFileDebug……”），如圖所示。

3.2.開發(fā)“hiflask”后端項(xiàng)目3.運(yùn)行“hiflask”項(xiàng)目通過上面的操作，VSCode將啟動“hiflask”項(xiàng)目，并在VSCode的Terminal終端出現(xiàn)如圖所示文字，即啟動成功。

3.2.開發(fā)“hiflask”后端項(xiàng)目運(yùn)行“hiflask”項(xiàng)目在瀏覽器中輸入上圖中紅框部分的URL，即可查看運(yùn)行效果，如圖所示。注意：在Terminal終端，可通過快捷鍵Ctrl+C，可以停止項(xiàng)目運(yùn)行。

3.3.搭建項(xiàng)目前端開發(fā)環(huán)境在前端開發(fā)中，我們采用了Note.js、Vue.js、Postman等開發(fā)工具。在正式搭建開發(fā)環(huán)境之時，我們需下載與電腦操作系統(tǒng)兼容的開發(fā)工具。需求描述：

3.3.搭建項(xiàng)目前端開發(fā)環(huán)境任務(wù)步驟：1.安裝Note.js環(huán)境2.安裝Vue開發(fā)插件3.安裝Postman開發(fā)工具

3.3.搭建項(xiàng)目前端開發(fā)環(huán)境1.安裝Note.js環(huán)境安裝Vue.js框架，需要下載Note.js安裝包。我們通過瀏覽器訪問Node.js的官方網(wǎng)站，選擇相應(yīng)的Node.js安裝包進(jìn)行下載，如圖所示。下載Node.js安裝包后，使用鼠標(biāo)左鍵雙擊Node.js安裝包，啟動安裝向?qū)?，引?dǎo)我們完成安裝。

3.3.搭建項(xiàng)目前端開發(fā)環(huán)境1.安裝Note.js環(huán)境Node.js安裝完成后，打開命令行窗口，輸入“node–v”命令，并按回車鍵。如果Node.js已經(jīng)成功安裝，會出現(xiàn)Node.js的版本信息，如圖所示。

3.3.搭建項(xiàng)目前端開發(fā)環(huán)境1.安裝Note.js環(huán)境在進(jìn)行Vue程序開發(fā)時，經(jīng)常會使用到npm（NodePackageManager）包管理工具，用于安裝、更新和管理Node.js的各種模塊和包。但是由于一些客觀原因，使用npm包工具下載模塊和包速度很慢，這時可以使用“cnpm”（中國鏡像的npm）包管理工具代替“npm”。打開命令行窗口，在命令行窗口中輸入以下命令，并按下回車鍵后，完成鏡像的安裝。npminstall-gcnpm--registry=在后續(xù)的項(xiàng)目開發(fā)過程中，就可以使用它來安裝和管理Node.js項(xiàng)目的依賴包。cnpm的使用方式和npm的是一樣的，只需將npm的命令換成是cnpm就可以了。

3.3.搭建項(xiàng)目前端開發(fā)環(huán)境2.安裝Vue開發(fā)插件Vue官方推薦使用的集成開發(fā)環(huán)境（IDE）是VisualStudioCode（VSCode），并建議配合Vue語言特性插件Vue-Official使用。我們需要在VSCode中安裝一系列擴(kuò)展插件，具體安裝步驟參考本項(xiàng)目中“1.3.1.搭建項(xiàng)目后端開發(fā)環(huán)境”小節(jié)中的“VSCode擴(kuò)展插件安裝”內(nèi)容。

3.3.搭建項(xiàng)目前端開發(fā)環(huán)境3.安裝Postman開發(fā)工具在開發(fā)“古典文學(xué)網(wǎng)”項(xiàng)目時，前后端采用API接口的方式進(jìn)行數(shù)據(jù)交互。為此，我們選擇了Postman測試工具進(jìn)行后端API接口測試。我們通過瀏覽器訪問Postman的官方網(wǎng)站，選擇相應(yīng)的Postman安裝包進(jìn)行下載，如圖所示。

3.3.搭建項(xiàng)目前端開發(fā)環(huán)境3.安裝Postman開發(fā)工具下載Postman安裝包后，請使用鼠標(biāo)左鍵雙擊Postman安裝包，通過安裝向?qū)?，引?dǎo)我們完成安裝。首次使用Postman時，我們需要注冊一個賬號，并使用賬號登錄后，即可使用其全部功能。Postman的操作界面，如圖所示。

3.4.開發(fā)“hivue”前端項(xiàng)目現(xiàn)在，我們已經(jīng)搭建好“古典文學(xué)網(wǎng)”項(xiàng)目的前端開發(fā)環(huán)境，接下來將開發(fā)一個簡單的Vue項(xiàng)目進(jìn)行測試。需求描述：

3.4.開發(fā)“hivue”前端項(xiàng)目任務(wù)步驟：1.創(chuàng)建“hivue”項(xiàng)目2.開發(fā)“hivue”項(xiàng)目3.運(yùn)行“hivue”項(xiàng)目

3.4.開發(fā)“hivue”前端項(xiàng)目1.創(chuàng)建“hivue”項(xiàng)目首先，確保我們安裝了最新版本的Node.js，并確定項(xiàng)目工作目錄。打開命令行窗口，通過cd命令進(jìn)入項(xiàng)目工作目錄，然后輸入以下命令，并按回車鍵。cnpmcreatevue@latest

3.4.開發(fā)“hivue”前端項(xiàng)目1.創(chuàng)建“hivue”項(xiàng)目該命令將會創(chuàng)建一個Vue項(xiàng)目。在此過程中，我們將會看到一些諸如TypeScript和測試支持之類的可選功能提示，可通過左右選擇按鍵選擇是否引入可選功能，按下回車鍵確認(rèn)，如圖所示。

3.4.開發(fā)“hivue”前端項(xiàng)目2.開發(fā)“hivue”項(xiàng)目啟動VSCode開發(fā)工具，打開剛才創(chuàng)建的“hivue”項(xiàng)目。如圖所示。

3.4.開發(fā)“hivue”前端項(xiàng)目2.開發(fā)“hivue”項(xiàng)目打開“hivue”項(xiàng)目后，需要在VSCode里面進(jìn)行換行符（eol）配置。單擊左側(cè)邊欄的設(shè)置圖標(biāo)

打開設(shè)置面板，在搜索框輸入eol關(guān)鍵字，將其配置為“\n”。如圖所示。

3.4.開發(fā)“hivue”前端項(xiàng)目3.運(yùn)行“hivue”項(xiàng)目首先，在VSCode單擊菜單欄中的“Terminal”選項(xiàng)，接著在下拉菜單中選擇“NewTerminal