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

第12章項目開發(fā)前準備課件V1.0

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

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

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

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

1.

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

2.

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

3.

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

4.

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

管理，pinia-plugin-persist用于pinia全局數(shù)據(jù)的緩存，vant是用于頁面移動端開發(fā)的框架，

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

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