实战项目名称：仿知识星球App
技术栈：前端 => uni-app （ 后端：Node.js + Mysql + Apollo + Graphql ）
已实现功能：微信登录，创建星球，内容管理，星球管理
项目git地址：请点击访问

项目最终效果图：@点击访问效果图，欢迎关注收藏订阅专栏！！！

• 文章会先按照 ① uni-app端 、 ② Node.js后端 、③ 微信小程序、④ 利用宝塔面板部署项目；先后顺序更新文章。

---

提示：该项目只用于个人实战，不应用于任何商业用途。

一、今日实战目标

• 配置好开发工具
• 项目全局配置
• 引入uView UI框架

---

二、实战步骤

1.安装HBuilderX开发工具

开发工具下载地址：HBuilderX下载链接

我用的是MacOS，以后展示也是Mac版的，建议下载正式版。

2.新建项目

打开HBuilderX工具，点击新建 => 新建项目;并按下方图片进行设置，项目类型选择uni-app，Vue版本选择2

3.配置全局通用css样式文件

• 项目根目录新建static目录，新增default.css文件,内容如下

/* default Setting */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	color: #384268;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: 'PingFangSC-Regular', 'Noto Sans TC', sans-serif;
}

.overflow-hidden {
	overflow: hidden;
}

.full{
	width: 100%;
}
/* Font Setting */
.bold {
	font-weight: bold;
}

/* Element specific css */
.stgap>*:not(:first-child) {
	margin-top: 5px;
}

.stgap1>*:not(:first-child) {
	margin-top: 10px;
}

.stgap2>*:not(:first-child) {
	margin-top: 20px;
}

.stgap3>*:not(:first-child) {
	margin-top: 30px;
}

.stgap4>*:not(:first-child) {
	margin-top: 40px;
}

.stgap5>*:not(:first-child) {
	margin-top: 50px;
}

.stgap6>*:not(:first-child) {
	margin-top: 60px;
}

.stgap7>*:not(:first-child) {
	margin-top: 70px;
}

.stgap8>*:not(:first-child) {
	margin-top: 80px;
}

.stgap9>*:not(:first-child) {
	margin-top: 90px;
}

.stgaph1>*:not(:first-child) {
	margin-top: 15px;
}

.stgaph2>*:not(:first-child) {
	margin-top: 25px;
}

.stgaph3>*:not(:first-child) {
	margin-top: 35px;
}

.stgaph4>*:not(:first-child) {
	margin-top: 45px;
}

.stgaph5>*:not(:first-child) {
	margin-top: 55px;
}

.stgaph6>*:not(:first-child) {
	margin-top: 65px;
}

.stgaph7>*:not(:first-child) {
	margin-top: 75px;
}

.stgaph8>*:not(:first-child) {
	margin-top: 85px;
}

.stgaph9>*:not(:first-child) {
	margin-top: 95px;
}

.slgap>*:not(:first-child) {
	margin-left: 5px;
}

.slgap1>*:not(:first-child) {
	margin-left: 10px;
}

.slgap2>*:not(:first-child) {
	margin-left: 20px;
}

.slgap3>*:not(:first-child) {
	margin-left: 30px;
}

.slgap4>*:not(:first-child) {
	margin-left: 40px;
}

.slgap5>*:not(:first-child) {
	margin-left: 50px;
}

.slgap6>*:not(:first-child) {
	margin-left: 60px;
}

.slgap7>*:not(:first-child) {
	margin-left: 70px;
}

.slgap8>*:not(:first-child) {
	margin-left: 80px;
}

.slgap9>*:not(:first-child) {
	margin-left: 90px;
}

.slgaph1>*:not(:first-child) {
	margin-left: 15px;
}

.slgaph2>*:not(:first-child) {
	margin-left: 25px;
}

.slgaph3>*:not(:first-child) {
	margin-left: 35px;
}

.slgaph4>*:not(:first-child) {
	margin-left: 45px;
}

.slgaph5>*:not(:first-child) {
	margin-left: 55px;
}

.slgaph6>*:not(:first-child) {
	margin-left: 65px;
}

.slgaph7>*:not(:first-child) {
	margin-left: 75px;
}

.slgaph8>*:not(:first-child) {
	margin-left: 85px;
}

.slgaph9>*:not(:first-child) {
	margin-left: 95px;
}

/* New flex css */
.flex {
	display: flex;
}

.row {
	display: flex;
	flex-direction: row !important;
}

.col {
	display: flex;
	flex-direction: column;
}

.row-rev {
	display: flex;
	flex-direction: row-reverse;
}

.col-rev {
	display: flex;
	flex-direction: column-reverse;
}

.warp {
	display: flex;
	flex-wrap: wrap;
}

.nowrap {
	display: flex;
	flex-wrap: nowrap;
}

.space-between {
	display: flex;
	justify-content: space-between;
}

.flex-start {
	display: flex;
	justify-content: flex-start;
}

.flex-center {
	display: flex;
	justify-content: center;
}

.flex-end {
	display: flex;
	justify-content: flex-end;
}



/* (Horizontal) The main spindle is X, the X axis is symmetrical */
.hor-center {
	display: flex;
	align-items: center;
}

.hor-start{
	display: flex;
	align-items: flex-start;
}
.hor-end {
	display: flex;
	align-items: flex-end;
}
/* (Vertical) The main spindle is Y, the Y axis is symmetrical */
.ver-center {
	display: flex;
	justify-content: center;
}

.ver-start{
	display: flex;
	justify-content: flex-start;
}
.ver-end {
	display: flex;
	justify-content: flex-end;
}

.both-center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.text-overflow {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.text-overflow1,
.text-overflow2,
.text-overflow3,
.text-overflow4,
.text-overflow5 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
}

.text-overflow1 {
	-webkit-line-clamp: 1;
}

.text-overflow2 {
	-webkit-line-clamp: 2;
}

.text-overflow3 {
	-webkit-line-clamp: 3;
}

.text-overflow4 {
	-webkit-line-clamp: 4;
}

.text-overflow5 {
	-webkit-line-clamp: 5;
}

.relative {
	position: relative;
}

.absolute {
	position: absolute;
}

.pre-line {
	white-space: pre-line;
	/*換行\n 
都能*/
}

/*== New CSS End ==*/

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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324

• 在App.vue文件中，引入上面新增的css文件，配置这个是为了项目提高项目的开发效率，里面都是项目中会常用到的css样式
  

---

总结

为了提高开发效率，项目也使用了uView UI框架，下一篇讲解如何引入uView框架，想了解这个框架的可以点击上面的蓝色字体链接进行访问

由于项目目前在对接后台api中，项目git地址：请点击访问，大家可以去clone下来借鉴下；

• 温馨提示：

1. 项目仅用于个人实战，设计图和架构是自己基于知识星球APP进行设计的，算得上是入门级的uni-app，后期会更新一个企业级uniapp项目。
2. 我是在空闲中写写博客，并没有很规范，欢迎在评论区留下你的建议与意见。
3. git项目拷贝下来的代码有不懂的，可以截图私信给我，看到会回复你，希望可以帮助到你了解和开发uniapp。