Vue.js 超詳細(xì)入門與項(xiàng)目實(shí)戰(zhàn)（微課視頻版）課件 第12章 項(xiàng)目開發(fā)前準(zhǔn)備

第12章項(xiàng)目開發(fā)前準(zhǔn)備課件V1.0

教學(xué)內(nèi)容第一節(jié)

功能設(shè)計(jì)第二節(jié)項(xiàng)目開發(fā)第三節(jié)

打包與發(fā)布知識(shí)目標(biāo)教學(xué)目標(biāo)理解和掌握項(xiàng)目功能設(shè)計(jì)的方法掌握項(xiàng)目開發(fā)的流程和配置過(guò)程理解和掌握開發(fā)和發(fā)布打包的流程知識(shí)點(diǎn)預(yù)覽#節(jié)知識(shí)點(diǎn)難點(diǎn)重點(diǎn)應(yīng)用12C12-01功能設(shè)計(jì)1、項(xiàng)目背景

2、需求分析3、功能模塊C12-02項(xiàng)目開發(fā)1、創(chuàng)建項(xiàng)目2、配置靜態(tài)資源3、數(shù)據(jù)源設(shè)計(jì)C12-03打包與發(fā)布1、開發(fā)與打包方法2、發(fā)布時(shí)注意事項(xiàng)時(shí)代背景一個(gè)好的項(xiàng)目一定會(huì)與當(dāng)前主流的價(jià)值觀相匹配，是順應(yīng)時(shí)代發(fā)展方向的。隨著在線支付和快遞體系的成熟與完善，電商產(chǎn)品已成為各個(gè)銷售型公司必不可少的項(xiàng)目。技術(shù)分析web技術(shù)通過(guò)自身的靈活性，借助Vue3+Vant4框架，既可以快速開發(fā)PC端的web應(yīng)用，又可以適配各種移動(dòng)終端，形成webapp應(yīng)用，極大地滿足了各類移動(dòng)端客戶群體的需求，是開發(fā)電商產(chǎn)品的首選技術(shù)方案。未來(lái)前景借助各大電商平臺(tái)開設(shè)的店鋪，成本高，靈活性更差，可拓展性不強(qiáng)，并受到各種功能限制，無(wú)法做成自己設(shè)計(jì)的產(chǎn)品，如果通過(guò)web技術(shù)，開發(fā)適合自身產(chǎn)品特點(diǎn)電商項(xiàng)目，這些問(wèn)題將迎刃而解。項(xiàng)目背景需求獲取需要滿足用戶在移動(dòng)終端購(gòu)物的需求，通過(guò)互聯(lián)網(wǎng)發(fā)布開發(fā)的web應(yīng)用，用戶訪問(wèn)指定地址，并登錄網(wǎng)站，選擇或查詢商品，放入購(gòu)物車中，完成結(jié)算后形成訂單，個(gè)人用戶可以在用戶中心查看自己的訂單信息和狀態(tài)。需求分類用戶在產(chǎn)品中的需求分為分類瀏覽、查看詳細(xì)、放入購(gòu)物車，付款結(jié)算和訂單查詢功能，此外，為了增加用戶在產(chǎn)品中的粘性，還增加了業(yè)內(nèi)動(dòng)態(tài)推薦，動(dòng)態(tài)查看、收藏和點(diǎn)贊的功能，用戶可以在用戶中心查看自己收藏的動(dòng)態(tài)信息，并可以取消收藏。核心需求電商項(xiàng)目的核心需求是購(gòu)買產(chǎn)品，那么，項(xiàng)目圍繞這一個(gè)核心需求實(shí)現(xiàn)的功能是推薦產(chǎn)品、產(chǎn)品分類、產(chǎn)品詳細(xì)、購(gòu)物車、結(jié)算訂單和訂單查看，其余功能前期可搭建框架，完成基本功能，不做深入擴(kuò)展。需求分析電商項(xiàng)目功能模塊圖功能模塊

1.

創(chuàng)建一個(gè)Vue3框架的項(xiàng)目，需要先安裝vue-cli工具，打開電腦終端或命令提示符，輸入npminstall-g@vue/cli指令，安裝5.0以上版本的vue-cli工具。

2.

安裝成功后，再輸入vue--version指令查看安裝的版本號(hào)。

3.

輸入vuecreatevue3shop指令，創(chuàng)建一個(gè)名稱為vue3shop的項(xiàng)目。

4.

進(jìn)入名稱為vue3shop的項(xiàng)目文件夾中，安裝本項(xiàng)目所需要的依賴模塊。說(shuō)明：依賴模塊@vant/area-data用于訂單中地址地區(qū)數(shù)據(jù)的選擇，pinia用于項(xiàng)目的全局?jǐn)?shù)據(jù)

管理，pinia-plugin-persist用于pinia全局?jǐn)?shù)據(jù)的緩存，vant是用于頁(yè)面移動(dòng)端開發(fā)的框架，

vue-router是用于項(xiàng)目的路由管理和配置。創(chuàng)建項(xiàng)目項(xiàng)目創(chuàng)建完成并安裝所需要的依賴模塊后，接下來(lái)需要配置文件夾，首先是靜態(tài)資源文件夾的設(shè)置，本項(xiàng)目中所有的圖片資源全部放置在assets文件夾下的images文件夾中，在images文件夾，根據(jù)所需求圖片的類型，再創(chuàng)建對(duì)應(yīng)的子類文件夾。配置靜態(tài)資源除配置靜態(tài)資源外，公用的方法也可以放置在一個(gè)指定的文件夾下，本項(xiàng)目中全部的公用函數(shù)或方法都放置在名稱為utils的文件夾下，如下圖12-7所示。配置靜態(tài)資源本項(xiàng)目側(cè)重于Vue3+Vant4構(gòu)建移動(dòng)端的電商項(xiàng)目，重點(diǎn)是頁(yè)面開發(fā)和功能邏輯的實(shí)現(xiàn)，因此，項(xiàng)目的數(shù)據(jù)全部來(lái)源于靜態(tài)的JSON格式對(duì)象，該對(duì)象中包含產(chǎn)品、分類和動(dòng)態(tài)的全部數(shù)據(jù)，全局性的購(gòu)物車、收藏和訂單數(shù)據(jù)由pinia模塊保存，靜態(tài)的數(shù)據(jù)源放置在data文件夾下的shop.js文件中。數(shù)據(jù)源設(shè)計(jì)開發(fā)過(guò)程中，程序員需要驗(yàn)證開發(fā)效果，可以在項(xiàng)目文件夾下，執(zhí)行npmrunserve指令，執(zhí)行后，將自動(dòng)編譯源代碼，啟動(dòng)瀏覽器，查看編譯后的頁(yè)面效果，并在瀏覽器中跟蹤數(shù)據(jù)和調(diào)試頁(yè)面元素。開發(fā)與打包方法如果項(xiàng)目編譯成功，則可以在項(xiàng)目文件夾下，執(zhí)行npmrunbuild指令，打包該項(xiàng)目，通常情況下，打包后的代碼放置在名稱名為dist的文件夾下，可以直接啟動(dòng)該文件夾下的index.html文件，查看打包后的頁(yè)面效果，還可以將該文件夾發(fā)布到服務(wù)器中，通過(guò)形成的地址查看項(xiàng)目發(fā)布后的效果。

開發(fā)與打包方法打包完成后，自動(dòng)生成一個(gè)名稱為dist的文件夾，用于保存打包生成的代碼。開發(fā)與打包方法雖然打包后的文件夾可以直接發(fā)布到服務(wù)器中，