实战项目:电商管理系统(Element-UI)Vue前端

初衷

  • 能够用 Vue 技术栈及第三方组件进行项目开发
  • 体验和深入理解前后端分离的开发模式

在这里插入图片描述

项目概述

根据不同的应用场景,电商系统一般都提供了 PC 端、移动 APP、 移动 Web 、微信小程序等多种终端访问方式。

在这里插入图片描述

# 功能、页面原型

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

# 开发模式

电商后台管理系统的开发模式(前后端分离)

电商后台管理系统整体采用前后端分离的开发模式,其中前端项目时基于 Vue 技术栈的 SPA 项目
在这里插入图片描述

# 技术选型

前端

  • Vue
  • Vue-router
  • Element-UI
  • Axios
  • Echarts

后端Java SSM 看情况替换

  • Node.js
  • JDk8
  • Express
  • JWT(状态保持工具)
  • Spring + SpringMVC + MyBatis Plus
  • MqSQL
  • Sequelize (操作数据库框架)

项目初始化

# 前端项目初始化

## vue cli 4

  • vue cli 4
  • vue router 配置
  • Element-UI 配置 - 组件库
  • axios 配置
  • git 初始化
  • Github 托管

3、4 貌似没啥区别

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

done~

在这里插入图片描述

## Element UI 配置

  • vue cli 3
  • vue router 配置
  • Element-UI 配置 - 组件库
  • axios 配置
  • git 初始化
  • Github 托管

element UI - 官网

npm i element-ui -S

在这里插入图片描述

### 按需引入

element UI 官方教程 - https://element.eleme.cn/#/zh-CN/component/quickstart#an-xu-yin-ru

修改 babel 配置文件

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

在这里插入图片描述

使用 element UI 组件

在这里插入图片描述

## axios 配置

  • vue cli 3
  • vue router 配置
  • Element-UI 配置 - 组件库
  • axios 配置
  • git 初始化
  • Github 托管
npm install axios

在这里插入图片描述
在这里插入图片描述

## Github 托管

  • vue cli 3
  • vue router 配置
  • Element-UI 配置 - 组件库
  • axios 配置
  • git 初始化
  • Github 托管

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Github - 下载整个 - 前台项目

登录/退出功能

主页布局

用户管理模块

权限管理模块

分类管理模块

参数管理模块

商品管理模块

订单管理模块

数据统计模块

©️2020 CSDN 皮肤主题: 撸撸猫 设计师:设计师小姐姐 返回首页