一.項(xiàng)目在線預(yù)覽
本項(xiàng)目在線預(yù)覽：點(diǎn)擊訪問
對(duì)應(yīng)管理后臺(tái)在線預(yù)覽：點(diǎn)擊訪問
對(duì)應(yīng)管理后臺(tái)博客：《vue+elementui+springboot前后端分離實(shí)現(xiàn)通用商城管理后臺(tái)，左右頂布局，含歷史導(dǎo)航欄》
二.項(xiàng)目結(jié)構(gòu)
與正常vue項(xiàng)目一樣,安裝node js
npm install 安裝項(xiàng)目依賴，即package.json文件的依賴
npm run dev 啟動(dòng)項(xiàng)目
若npm install有報(bào)錯(cuò)誤：python2或python not found類似錯(cuò)誤
可嘗試依次執(zhí)行以下兩條命令：
npm install node-sass --ignore-scripts
npm install --ignore-scripts
三.項(xiàng)目實(shí)現(xiàn)
1.首頁，分類+輪播圖+推薦分類等
2.首頁框架源碼布局：
<template>
<div class="page-scroll" style="width: 100%;height: 100%;overflow: auto;background: #f5f7f9;">
<top></top>
<router-view style="min-height: calc(100% - 120px)"></router-view>
<foot></foot>
<el-backtop target=".page-scroll" :bottom="100">
<div
style="{
height: 100%;
width: 100%;
background-color: #f2f5f6;
box-shadow: 0 0 6px rgba(0,0,0, .12);
text-align: center;
line-height: 40px;
color: #1989fa;
}"
>
UP
</div>
</el-backtop>
</div>
</template>
<script>
import top from "../top/index.vue";
import foot from "../foot/index";
export default {
components: {
top,
foot
},
name: "index",
data() {
return {
};
},
mounted() {
},
methods: {
}
};
</script>
<style>
</style>
3.頂部+內(nèi)容容器+底部布局：
4.商品詳情，商品內(nèi)容介紹+熱門商品推薦+商品各等級(jí)評(píng)論等：
<template>
<div style="background: #FFFFFF;">
<div class="contain-box">
<div style="padding: 20px 0 0 0;">
<el-breadcrumb separator=">">
<el-breadcrumb-item :to="{ path: '/index' }">首頁</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/type' }">全部鮮花</el-breadcrumb-item>
<el-breadcrumb-item><span style="color: #b31e22;">愛的流星</span></el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="ncs-detail">
<!-- S 商品圖片 -->
<div id="ncs-goods-picture" class="ncs-goods-picture">
<div style="width: 460px;overflow: hidden;padding-top: 30px;">
<div style="width: 460px;height: 460px;">
<el-image :src="bigImg" :preview-src-list="banners" style="width: 460px;height: 460px;"></el-image>
</div>
<div style="display: flex;margin-top: 10px;overflow: auto;">
<div v-for="(item,index) in banners" @mouseenter="selImg(index)" :key="index" style="width: 50px;height: 50px;margin: 5px 5px;" :class="item===bigImg?'img-active':''">
<el-image :src="item" style="width: 50px;height: 50px;"></el-image>
</div>
</div>
</div>
</div>
<!-- S 商品基本信息 -->
<div class="ncs-goods-summary">
<div class="name">
<div>
<h1>愛的流星</h1>
</div>
</div>
<div class="ncs-meta">
<dl>
<dt>材料：</dt>
<dd>19朵紅玫瑰，白色石竹梅和綠葉豐滿搭配</dd>
</dl>
<dl>
<dt>包裝：</dt>
<dd>灰色霧面紙包裝</dd>
</dl>
<dl>
<dt>花語：</dt>
<dd>裁風(fēng)為帶，剪云為衣，點(diǎn)綴秀美的光彩，一襲華衣，一世的臻愛。</dd>
</dl>
<dl>
<dt>附送：</dt>
<dd>免費(fèi)附送精美賀卡，代寫您的祝福。(您下單時(shí)可填寫留言欄)</dd>
</dl>
<dl>
<dt>配送：</dt>
<dd>全國 （可配送至全國1000多個(gè)城市，市區(qū)免配送費(fèi)）</dd>
</dl>
<dl>
<dt>說明：</dt>
<dd>由于鮮花包扎各地的花藝師不同，可能在花束的形式和搭配上與圖片不完全一致，但我們保證鮮花的主花材品種、新鮮程度、數(shù)量、顏色與說明一致，謝謝。</dd>
</dl>
</div>
<div class="goods-info-price">
<div class="gPrice"><span class="tit">優(yōu)惠價(jià)格</span><span class="price">272.00</span></div>
<div class="mPrice"><span class="tit">市場(chǎng)價(jià)格</span><span class="price">479.00</span></div>
<div class="other">
<span class="tit">
<el-image :src="require('../../../public/img/hot.png')" style="width: 15px;display: inline-block;"></el-image>
</span>
<span class="sell-num">12513</span>
</div>
</div>
<!-- S 商品規(guī)格值-->
<div class="ncs-key">
<!-- E 商品規(guī)格值-->
</div>
<!-- E 商品規(guī)格值-->
<!-- S 購買數(shù)量及庫存 -->
<div class="ncs-buy">
<div style="display: flex;line-height: 40px;">
<div class="fl tit">數(shù)量：</div>
<div class="ncs-figure-input fl">
<el-input-number v-model="productNum" :min="1" label="數(shù)量"></el-input-number>
</div>
</div>
<!-- S 提示已選規(guī)格及庫存不足無法購買 -->
<!-- E 提示已選規(guī)格及庫存不足無法購買 -->
<div class="ncs-btn" style="margin-top:50px;">
<el-button type="danger" style="width: 204px;">立即購買</el-button>
<el-button type="warning" plain style="width: 204px;" @click="addCar">加入購物車</el-button>
</div>
<!-- E 購買按鈕 -->
</div>
<!-- E 購買數(shù)量及庫存 -->
<!--E 商品信息 -->
</div>
<div class="clear"></div>
</div>
<div style="margin-top: 20px;">
<div style="display: flex;">
<div style="width: 210px; margin-right: 20px;">
<div style="border-bottom: 1px solid #dddddd;background: #F7F7F7;height: 30px;line-height: 30px;text-align: center;">
熱銷排行榜
</div>
<div v-for="i in 5" style="display: flex;height: 100px;padding: 10px;border: 1px solid #dddddd;border-top: none;" class="active">
<div style="">
<el-image :src="require('../../../public/img/201712281722512652.jpg')" style="width: 100px;height: 100px;"></el-image>
</div>
<div style="margin: 10px;">
<div style="max-height: 40px;overflow: hidden;line-height: 20px;">
命定與你
</div>
<div style="color: red;">
￥270.00
</div>
<div style="display: flex;">
<el-image :src="require('../../../public/img/hot.png')" style="width: 15px;display: inline-block;"></el-image>
<span>7863</span>
</div>
</div>
</div>
</div>
<div style="flex: 1;">
<el-tabs type="card" v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="商品詳情" name="first">
<product-info></product-info>
</el-tab-pane>
<el-tab-pane label="商品評(píng)價(jià)" name="second">
<span slot="label">
商品評(píng)價(jià)
<span :style="'color: #ffffff;border-radius: 10px;padding: 2px 5px;'+(activeName==='second'?'background-color: #b31e22;':'background-color: #858585;')">1314</span>
</span>
<comment-index></comment-index>
</el-tab-pane>
<el-tab-pane label="購買須知" name="third">
<buy-notes></buy-notes>
</el-tab-pane>
</el-tabs>
</div>
</div>
</div>
</div>
</div>
</template>
5.商品分類：
6.購物車：
7.訂單：
<template>
<div style="font-size: 14px;">
<el-table
:data="orders"
:span-method="spanMethod"
style="width: 100%">
<el-table-column
prop="orderNum"
label="訂單號(hào)"
width="160">
</el-table-column>
<el-table-column
prop="url"
label=""
width="100">
<template slot-scope="scope">
<div v-if="scope.row.coverPath && scope.row.coverPath != ''" class="demo-image__preview">
<el-image
style="width: 80px; height: 80px"
:src="scope.row.coverPath"
/>
</div>
</template>
</el-table-column>
<el-table-column
prop="productName"
label="商品名稱"
width="180">
</el-table-column>
<el-table-column
prop="price"
label="購買單價(jià)"
width="180">
<template slot-scope="scope">
<div>{{scope.row.price}}元</div>
</template>
</el-table-column>
<el-table-column
prop="productNum"
label="購買數(shù)量">
</el-table-column>
<el-table-column
prop="payAmount"
label="總金額">
<template slot-scope="scope">
<div>{{scope.row.payAmount}}元</div>
</template>
</el-table-column>
<el-table-column
prop="payStatus"
label="狀態(tài)">
<template slot-scope="scope">
<div>
<span v-if="scope.row.payStatus === 1" style="color: #ff6700;">待支付</span>
<span v-if="scope.row.payStatus === 2">待發(fā)貨</span>
<span v-if="scope.row.payStatus === 3">已發(fā)貨</span>
<span v-if="scope.row.payStatus === 4">已完成</span>
<span v-if="scope.row.payStatus === 5">已取消</span>
</div>
</template>
</el-table-column>
<el-table-column
prop="createTime"
label="下單時(shí)間">
</el-table-column>
<el-table-column
label="操作"
width="230">
<template slot-scope="scope">
<el-button v-if="scope.row.payStatus === 1" type="success" icon="el-icon-mobile-phone" size="mini" @click="updateStatus(scope.row)">去支付</el-button>
<el-button v-if="scope.row.payStatus === 1" icon="el-icon-close" plain size="mini" @click="updateStatus(scope.row,'cancel')">取消訂單</el-button>
<el-button v-if="scope.row.payStatus === 3" type="warning" icon="el-icon-close" size="mini" @click="updateStatus(scope.row)">確認(rèn)收貨</el-button>
</template>
</el-table-column>
</el-table>
<div style="text-align: right;margin-top: 10px;">
<el-pagination
background
:current-page.sync="page.currentPage"
:page-sizes="[10, 20, 50, 100]"
:page-size="page.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="page.total"
@size-change="sizeChange"
@current-change="currentChange"
/>
</div>
</div>
</template>
8.登錄注冊(cè)：
9.提交訂單
四.結(jié)語
最近作者也是比較忙，想要從0到1的過程完好做好一個(gè)產(chǎn)品的確需要花費(fèi)更多的時(shí)間，工作之余利用自己的時(shí)間去原創(chuàng)設(shè)計(jì)一個(gè)好的產(chǎn)品，這是一件非常有意義的事情。
當(dāng)前實(shí)現(xiàn)了前端大部分靜態(tài)頁面，下一步將實(shí)現(xiàn)真實(shí)數(shù)據(jù)，對(duì)接后端實(shí)現(xiàn)功能，管理后臺(tái)大部分功能已經(jīng)實(shí)現(xiàn)；
對(duì)應(yīng)管理后臺(tái)在線預(yù)覽：點(diǎn)擊訪問文章來源：http://www.zghlxwxcb.cn/news/detail-483827.html
獲取源碼或有任何問題的朋友可通過博客最后的名片添加作者或留言、私聊都可。
感謝您的閱讀~文章來源地址http://www.zghlxwxcb.cn/news/detail-483827.html
到了這里，關(guān)于vue+element實(shí)現(xiàn)非常好看的鮮花網(wǎng)站商城，頁面完整，樣式美觀的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
