Vue Vant 靜態電商商城app(首頁版)

2021-10-19 22:39:46 字數 1301 閱讀 9136

第一步:建立vue 專案(rourou)

vue init webpack rourou
第二步:整合第三方元件(axios(請求框架)\mock(模擬框架)\)

整合移動框架:vant

vant 官網位址

cnpm i vant -s
整合http請求框架:axios 

cnpm i axios -s
整合模擬資料框架:mock

cnpm i mock -s
整合樣式框架:stylus 和stylus-loader

stylus和stylus-loader 基礎說明

cnpm i stylus-loader -s
cnpm i stylus -s
整合滾動元件: better-scroll

better-scroll 基礎說明

cnpm i better-scroll -s
components:封裝元件

searchbar.vue: 檢索框元件封裝

headerbar.vue: 頭部導航欄元件封裝

footerbar.vue: 底部導航欄元件封裝

gooditem/gooditem.vue: 商品類別元件封裝

scroll/scrollx.vue: 滾動條元件封裝

tabitem/tabitem.vue: 商品分類元件封裝

page:核心頁面

login/login.vue :**登入頁面

reg/reg.vue: 使用者註冊頁面

cart.vue: 購物車頁面

home.vue:**首頁

user.vue:使用者頁面

images:本地靜態資源資料夾(本靜態**所有資源)

util:通用工具類封裝(主要:正規表示式)

router:路由檔案

main:核心配置檔案

登入、註冊

**首頁

其他頁面:待整合

電商商城之購物車 待續

一 購物車的儲存形式 cookie 1 無須登陸 無須查庫 儲存在瀏覽器端 2 優點 效能好 訪問快,沒有和資料庫互動 3 缺點1 換電腦購物車資料會丟失 4 缺點2 電腦被其他人登陸,隱私安全 二 購物車儲存形式 session 不使用 1 使用者登陸後,購物車資料放入使用者會話 2 優點 初期效...

php電商專案,PHP簡單商城專案

例項簡介 簡單的實現了 的前台顯示商品,登入功能,還有後台能對商品還有使用者進行增刪改查的操作 例項截圖 核心 f46f2fb9 edd1 42fb 949f f7a0ce7d7389 php課程設計 php購物車.sql 購物車資料庫 shop db.opt shangpin.frm shangp...

電商 靜態頁面(詳細講解)

1.在容器中引入 小 2.設定大小 按照總大小以及間隔來設定容器大小 3.將和容器脫離文件流 4.插入向左向右控制的div 5.將所有和div設定懸浮效果 lang en charset utf 8 name viewport content width device width,initial s...