Vue实战项目：电商管理系统（Element-UI）数据脉络整理

项目地址：链接: link.

项目描述

1、此项目为一个前后端分离的电商实战项目
2、采用了Vue全家桶+ES6+Element UI 等前端最新技术
3、项目包括商家、商品、用户、等多个功能子模块
4、采用模块化、组件化、工程化的模式开发

学习重点

1、熟悉一个项目开发的流程
2、学会组件化、模块化、工程化的开发模式
3、掌握使用vue-cli脚手架初始化vue.js项目
4、学会ES6+eslint 的开发方法
5、掌握一些项目的优化技巧

在本文中主要介绍Vue电商项目中使用到的数据关联以及数据传输脉络，即各种数据是如何相关联以及互相影响，以用户信息界面为例，下面开始介绍

由上图中可以得知，用户列表具备了添加用户、浏览用户基本信息、修改用户基本信息、删除用户信息的功能模块，下文开始介绍用户信息列表是如何展示出来的。

用户信息列表区域代码

<el-table :data="userlist" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="姓名" prop="username"></el-table-column>
        <el-table-column label="邮箱" prop="email"></el-table-column>
        <el-table-column label="电话" prop="mobile"></el-table-column>
        <el-table-column label="角色" prop="role_name"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <!-- 修改按钮 -->
            <el-button type="primary" icon=