菜单 搜索
首页 前端知识 vue element-plus完美实现跨境电商商城网站

vue element-plus完美实现跨境电商商城网站

2024-07-02 23:07:40 前端知识 前端哥 592 119 我要收藏

目录

一、项目介绍

二、项目截图

1.项目结构图

2.首页 

3.中英文样式切换 

4.金钱类型切换

5.商品详情

6.购物车

7.登录

​编辑 

8.注册

9.个人中心

三、源码实现

1.项目依赖package.json

2.项目启动

3.购物车页面 

四、总结

一、项目介绍

本项目在线预览：点击访问

本项目模仿跨境电商商城实现，跨境电商一般设计上与传统电商网站是不太一样的，样式上会更加向外；

技术要点：vue3、 路由router、pinia、element-plus、vuex、axios、vite等

二、项目截图

1.项目结构图

开发软件是webstorm，当然vscode、hbuilder等都可以，看自己习惯就行

2.首页 

分为顶部+中间具体页面+底部，组件思想重复利用实现

 

3.中英文样式切换 

4.金钱类型切换

5.商品详情

 图片动态切换

6.购物车

 动态改变数量

7.登录

8.注册

9.个人中心

三、源码实现

 项目以组件（顶部、底部）+主布局页面配合路由构思实现，可以通过组件思维重复利用共同的局部页面，简单且美观，也更加利于后期功能页面拓展和维护、修改等。

1.项目依赖package.json

{
  "name": "vue3-project",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
    "format": "prettier --write src/",
    "prepare": "husky install",
    "lint-staged": "lint-staged"
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.3.0",
    "@vant/area-data": "^1.5.1",
    "@vueup/vue-quill": "^1.2.0",
    "axios": "^1.4.0",
    "element-china-area-data": "^6.1.0",
    "element-plus": "^2.3.7",
    "express-jwt": "^8.4.1",
    "jsonwebtoken": "^9.0.2",
    "pinia": "^2.1.3",
    "vant": "^4.9.0",
    "vite-plugin-style-import": "^2.0.0",
    "vue": "^3.4.0",
    "vue-router": "^4.2.2",
    "vuex": "^4.1.0"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.2.0",
    "@vitejs/plugin-vue": "^4.2.3",
    "@vue/eslint-config-prettier": "^7.1.0",
    "eslint": "^8.39.0",
    "eslint-plugin-vue": "^9.11.0",
    "husky": "^8.0.0",
    "lint-staged": "^13.2.3",
    "pinia-plugin-persistedstate": "^3.1.0",
    "prettier": "^2.8.8",
    "sass": "^1.63.6",
    "unplugin-auto-import": "^0.16.6",
    "unplugin-vue-components": "^0.25.1",
    "vite": "^4.3.9"
  },
  "lint-staged": {
    "*.{js,ts,vue}": [
      "eslint --fix"
    ]
  }
}

2.项目启动

依次成功执行以下两个命令：

  1. npm install
  2. npm run dev

3.购物车页面 

<template>
    <div class="aiz-main-wrapper d-flex flex-column">

        <section class="pt-5 mb-4">
            <div class="container">
                <div class="row">
                    <div class="col-xl-8 mx-auto">
                        <div class="row aiz-steps arrow-divider">
                            <div class="col active">
                                <div class="text-center text-primary">
                                    <i class="la-3x mb-2 las la-shopping-cart"></i>
                                    <h3 class="fs-14 fw-600 d-none d-lg-block">1.我的购物车</h3>
                                </div>
                            </div>
                            <div class="col">
                                <div class="text-center">
                                    <i class="la-3x mb-2 opacity-50 las la-map"></i>
                                    <h3 class="fs-14 fw-600 d-none d-lg-block opacity-50">2.发货信息</h3>
                                </div>
                            </div>
                            <div class="col">
                                <div class="text-center">
                                    <i class="la-3x mb-2 opacity-50 las la-truck"></i>
                                    <h3 class="fs-14 fw-600 d-none d-lg-block opacity-50">3.交货信息</h3>
                                </div>
                            </div>
                            <div class="col">
                                <div class="text-center">
                                    <i class="la-3x mb-2 opacity-50 las la-credit-card"></i>
                                    <h3 class="fs-14 fw-600 d-none d-lg-block opacity-50">4.付款</h3>
                                </div>
                            </div>
                            <div class="col">
                                <div class="text-center">
                                    <i class="la-3x mb-2 opacity-50 las la-check-circle"></i>
                                    <h3 class="fs-14 fw-600 d-none d-lg-block opacity-50">5.确认</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="mb-4" id="cart-summary">
            <div class="container">
                <div class="row">
                    <div class="col-xxl-8 col-xl-10 mx-auto">
                        <div class="shadow-sm bg-white p-3 p-lg-4 rounded text-left">
                            <div class="mb-4">
                                <div class="row gutters-5 d-none d-lg-flex border-bottom mb-3 pb-3">
                                    <div class="col-md-5 fw-600">产品</div>
                                    <div class="col fw-600">价格</div>
                                    <div class="col fw-600">税收</div>
                                    <div class="col fw-600">数量</div>
                                    <div class="col fw-600">总计</div>
                                    <div class="col-auto fw-600">移除</div>
                                </div>
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item px-0 px-lg-3">
                                        <div class="row gutters-5">
                                            <div class="col-lg-5 d-flex" @click="toPath('/productDetail')">
                                                <span class="mr-2 ml-0">
                                                    <img src="http://kuajingshop.cpolar.top/public/uploads/all/FX3JDXrJ3l1KANjg2E93Uup52q8CMrYKdr3p18Y0.jpg" class="img-fit size-60px rounded" alt="HUAWEI 华为 MatePad Refresh - 10.4 英寸 2K FullView 平板电脑 - Kirin 810,4 GB RAM,64 GB ROM,7250 mAh,四角扬声器,EMUI 10.1(基于 Android 10.0),Wi-Fi,灰色">
                                                </span>
                                                <span class="fs-14 opacity-60">HUAWEI 华为 MatePad Refresh - 10.4 英寸 2K FullView 平板电脑 - Kirin 810,4 GB RAM,64 GB ROM,7250 mAh,四角扬声器,EMUI 10.1(基于 Android 10.0),Wi-Fi,灰色</span>
                                            </div>

                                            <div class="col-lg col-4 order-1 order-lg-0 my-3 my-lg-0">
                                                <span class="opacity-60 fs-12 d-block d-lg-none">价格</span>
                                                <span class="fw-600 fs-16">$165.00</span>
                                            </div>
                                            <div class="col-lg col-4 order-2 order-lg-0 my-3 my-lg-0">
                                                <span class="opacity-60 fs-12 d-block d-lg-none">税收</span>
                                                <span class="fw-600 fs-16">$0.00</span>
                                            </div>

                                            <div class="col-lg col-6 order-4 order-lg-0">
                                                <div class="row no-gutters align-items-center aiz-plus-minus mr-2 ml-0">
                                                    <button class="btn col-auto btn-icon btn-sm btn-circle btn-light" type="button" :disabled="num<=1?'':disabled" @click="sub()">
                                                        <i class="las la-minus"></i>
                                                    </button >
                                                    <input type="number" class="col border-0 text-center flex-grow-1 fs-16 input-number" v-model="num" min="1" max="1000">
                                                    <button class="btn col-auto btn-icon btn-sm btn-circle btn-light" type="button" @click="add()">
                                                        <i class="las la-plus"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="col-lg col-4 order-3 order-lg-0 my-3 my-lg-0">
                                                <span class="opacity-60 fs-12 d-block d-lg-none">总计</span>
                                                <span class="fw-600 fs-16 text-primary">$165.00</span>
                                            </div>
                                            <div class="col-lg-auto col-6 order-5 order-lg-0 text-right">
                                                    <el-popconfirm
                                                            width="220"
                                                            confirm-button-text="确定"
                                                            cancel-button-text="取消"
                                                            :icon="InfoFilled"
                                                            icon-color="#626AEF"
                                                            title="确定删除？"
                                                    >
                                                        <template #reference>
                                                            <a href="javascript:void(0)" class="btn btn-icon btn-sm btn-soft-primary btn-circle">
                                                                <i class="las la-trash"></i>
                                                            </a>
                                                        </template>
                                                    </el-popconfirm>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>

                            <div class="px-3 py-2 mb-4 border-top d-flex justify-content-between">
                                <span class="opacity-60 fs-15">小计</span>
                                <span class="fw-600 fs-17">$165.00</span>
                            </div>
                            <div class="row align-items-center">
                                <div class="col-md-6 text-center text-md-left order-1 order-md-0">
                                    <a class="btn btn-link" @click="toPath('/')">
                                        <i class="las la-arrow-left"></i>
                                        返回商店
                                    </a>
                                </div>
                                <div class="col-md-6 text-center text-md-right">
                                    <button class="btn btn-primary fw-600">继续发货</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
    export default {
        name: "index",
        data() {
            return {
                num: 1
            };
        },
        mounted() {
        },
        methods: {
            toPath(path) {
                this.$router.push({path: path});
            },
            //数量加
            add(){
                this.num++;
            },
            //数量减
            sub(){
                if(this.num > 1){
                    this.num--;
                }
            }
        }
    }
</script>

<style>
    .aiz-main-wrapper {
        min-height: auto !important;
    }
</style>

四、总结

项目页面完整，后续可能将不断升级。

关注作者，及时了解更多好项目！

更多优质项目请看作者主页！

获取源码或如需帮助，可通过博客后面名片+作者即可！

转载请注明出处或者链接地址：https://www.qianduange.cn//article/13804.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

【Web】单点登录(SingleSignOn，SSO) Keycloak OAuth 2.0 OpenID Connect JWT (JSON Web Token) SAML CAS

2024-07-30 22:07:56

使用YOLOv8预测图像时生成相应的json文件

2024-07-30 22:07:52

全球最快的 JSON 文件查询工具

2024-07-30 22:07:39

sublime text的json快捷键

2024-07-30 22:07:35

【漏洞复现】海康威视综合安防管理平台 iSecure Center applyCT fastjson 远程代码执行

2024-07-30 22:07:27

在VScode下配置C/C 环境(tasks.json、launch.json、c_cpp_properties.json)

2024-07-30 22:07:15

JSON基础知识与实践：轻松理解并应用JSON格式

2024-07-30 22:07:13

使用Excel转JSON加载项快速将单元格转换为JSON的教程

2024-07-30 22:07:07

自定义属于你的脚手架并发布到NPM仓库

2024-07-30 22:07:03

【输入npm install express出现的报错】

2024-07-30 22:07:54

大家推荐的文章
1

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000
2

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
3

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
4

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
5

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
6

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000
7

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
8

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
9

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
10

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！