一.关于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
