美食杰项目 -- 首页（一）

前言：

本文给大家讲解，美食杰项目中首页实现的效果，和具体代码。

---

具体实现思路：

1. 向后端请求数据，获取数据，渲染数据
2. 引入 element-ui
3. 刷新后加载新图片

步骤：

头部代码中包含了一部分登录功能，这个功能在本文没有实现，想要知道的，可以看我发布的实现登录注册功能的文章。

在 加载图片页面代码中，使用了节流 throttle-debounce，节流的具体使用可以看官方文档。

点击跳转至节流的官方文档：https://www.npmjs.com/package/throttle-debounce

点击跳转至 element-ui 官方文档：https://element.eleme.cn/#/zh-CN/component/installation

---

1. 展示美食杰项目首页效果

---

2. 引入 element-ui

• 下载 element-ui

npm i element-ui -S
1

• 在 main.js 中引入 element-ui

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
1
2
3
4

---

3. 头部代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139

---

4. 首页内容总代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

---

5. 轮播图代码

点击跳转至 element-ui 中轮播图使用方法：https://element.eleme.cn/#/zh-CN/component/carousel

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

---

6. 已发布菜品内容代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122

---

7. 加载图片页面代码

点击跳转至 element-ui 中加载使用方法：https://element.eleme.cn/#/zh-CN/component/loading

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

---

总结：

总结：
以上就是 美食杰项目 中 首页的具体实现方法，不懂得也可以在评论区里问我，以后会持续发布一些新的功能，敬请关注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog