使用Vue+Axios+element UI+Json-server做后台管理系统（一）

前言

1.首先vue框架是基于MVVM模式的，MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离，极大地提高了前端开发效率。
2.在bootstarp和element UI中选择了后者，只因为使用组件库开发更加方便。

本文要点：

1. 使用Json-server搭建本地的服务器
2. Vue的组件化编程思想
3. Vue的路由传参问题
4. Axios的使用
5. ElementUI的使用

代码：

一：使用使用Json-server搭建本地的服务器

1新建一个文件夹Jsonserver
2 cd到这个文件夹
3使用npm init 初始化项目
4安装JSON服务器
npm install -g json-server
5创建db.json包含一些数据的文件

{
   "users": [
      {
        "name": "mj",
        "phone": "123456789",
        "email": "444@qq.com",
        "age": "45",
        "id": 4,
        "companyId": 3
      },
      {
        "name": "misswu",
        "phone": "123456789",
        "email": "222@qq.com",
        "age": "30",
        "companyId": 2,
        "id": 5
      },
      {
        "name": "misswu",
        "phone": "123456789",
        "email": "222@qq.com",
        "age": "30",
        "companyId": 2,
        "id": 8
      }
    ]
}

6启动JSON服务器

json-server --watch db.json

7现在，如果你去http://localhost:3000/users，你就会得到

二搭建项目

1项目结构：