一.关于element admin

1.element admin 下载，

1.克隆项目

git clone https://github.com/PanJiaChen/vue-element-admin.git

2.进入项目目录

cd vue-element-admin

3. 安装依赖

npm install

建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题

npm install --registry=https://registry.npm.taobao.org

4本地开发 启动项目

npm run dev

（一步一步的来:1--->2--->3--->(下载缓慢时用建议)--->4）

详细查看官网：https://panjiachen.github.io/vue-element-admin-site/zh/guide/#%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84

2.（像我一样的小白就看看就好了，刚开始不要立马使用element admin，可以参考官方文档推荐的element--admin--template，不然报错就很难受，哭唧唧。。。。）

3.使用什么表格之类的东西都可以去element UI里面去找的

4.简单的表格的增删查改--作者连接：https://blog.csdn.net/weixin_43913219/article/details/104525018

二.关于mock

mock中的URL与api，vue中的URL一致

1.在mock中新建一个文件夹，存放你的数据，目录如图：

12.png

在mock下的biaoge的index.js文件中放入你的数据

let List = [
{
  "date": "2016-05-03",
  "name": "王小虎",
  "age": 12,
  "sex": "男",
  "phone": "13245678901",
 "idcard": "412729198803249878",
  "classes": "《万能语言》",
  "plan": "9月1-4日 苏州",
  "type": "复训",
  "teacher": "陆成亮"
},
{
   "date": "2016-05-03",
   "name": "王中虎",
   "age": 12,
   "sex": "男",
  "phone": "13245678901",
  "idcard": "412729198803249878",
  "classes": "《万能语言》",
   "plan": "9月1-4日 苏州",
   "type": "复训",
   "teacher": "陆成亮"
 },
  ......
]

module.exports = [
 {
    url: '/vue-element-admin/compontent/table',
   type: 'get',
   response: config => {
     const { name, page = 1, limit = 20, sort } = config.query

     let mockList = List.filter(item => {
       if (name && item.name !== name) return false
       return true
     })

     if (sort === '-id') {
       mockList = mockList.reverse()
     }

     const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
     return {
       code: 20000,
       data: {
         total: mockList.length,
         items: pageList
       }
     }
   }
 }
]

2.在mock的index.js中引入

13.png

3.在src下面的api文件夹中新建一个文件夹table，在table里新建一个文件tabale.js，在table.js里面确定URL和methods

14.png

4.在vue文件中引入并在script的created中初始化

15.png

6.假如报错“文件名是不可迭代的”，那就换个文件名，一般报错的话，就是在baioge下面的index.js中写错了，具体写法参考一下人家原本文件中的写法，一般不建议mock中新建的文件直接放在与index.js同一级目录下

7.在引入后端数据时，可以参考官网上的示例，mockdata一节：https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/mock-api.html#swagger

以上仅仅只是一个学习的参考，作者对element admin极其mock还很懵，欢迎大家一起来交流学习