电商后台管理系统项目介绍和项目初始化

谁践踏了优雅 2021-07-24 23:43 956阅读 0赞

**目录**

一 电商项目基本业务概述

二 电商后台管理系统功能

三 电商后台管理系统的开发模式（前后端分离）

四 电商后台管理系统的技术选型

五 前端项目初始化步骤

六 创建新项目

七 安装 element-UI 插件

八 配置 element-UI 为按需导入

九 安装axios

十 码云上创建 vue\_shop 仓库，将初始化项目托管到码云

--------------------

# 一 电商项目基本业务概述 #

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

# 二 电商后台管理系统功能 #

电商后台管理系统用于管理用户账号、商品分类、商品信息、订单、数据统计等业务功能

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1][]

# 三 电商后台管理系统的开发模式（前后端分离） #

电商后台管理系统整体采用前后端分离的开发模式，其中前端项目是基于Vue技术栈的SPA项目。

![20200823102709967.png][]

# 四 电商后台管理系统的技术选型 #

1 前端项目技术栈

*  Vue
 *  Vue-router
 *  Element-UI
 *  Axios
 *  Echarts

2 后端项目技术栈

*  Node.js
 *  Express
 *  Jwt
 *  Mysql
 *  Sequelize

# 五 前端项目初始化步骤 #

1 安装 Vue 脚手架

2 通过 Vue 脚手架创建项目

3 配置 Vue 路由

4 配置 Element-UI 组件库

5 配置 axios 库

6 初始化 git 远程仓库

7 将本地项目托管到 Github 或 Gitee 中

# 六 创建新项目 #

1 用vue ui创建项目

> vue ui

2 创建新项目

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2][]

3 手动配置项目，安装必要组件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 3][]

4 配置为默认hash模式

![20200823102830484.png][]

5 保存项目预设

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 4][]

# 七 安装 element-UI 插件 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 5][]

# 八 配置 element-UI 为按需导入 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 6][]

# 九 安装axios #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 7][]

# 十 码云上创建 vue\_shop 仓库，将初始化项目托管到码云 #

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/a715810c02e34aa489dd33bfa5142883.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1]: /images/20210724/7f0a766ddf7740099ba66441eff8aaa9.png
[20200823102709967.png]: /images/20210724/4b69760c18594daab3dec86842f63867.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2]: /images/20210724/e7ae86108f6f4672bdef1d8638b292f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 3]: /images/20210724/a72b5dc5b29a4a9198236be23924aeb9.png
[20200823102830484.png]: /images/20210724/be47f2332402459096fef653bef73baa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 4]: /images/20210724/c6a38fa5c3344dc58e1ce4c7e4a79706.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 5]: /images/20210724/8126185610104953a0153fbd6d63bc78.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 6]: /images/20210724/a453377b35014f2f8ddc80155560d716.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 7]: /images/20210724/f039b7095afc48d4a453c378abc70f7f.png