（系列九）使用Vue3+Element Plus创建前端框架（附源码）

说明

    该文章是属于OverallAuth2.0系列文章，每周更新一篇该系列文章（从0到1完成系统开发）。
    该系统文章，我会尽量说的非常详细，做到不管新手、老手都能看懂。
    说明：OverallAuth2.0 是一个简单、易懂、功能强大的权限+可视化流程管理系统。
友情提醒：本篇文章是属于系列文章，看该文章前，建议先看之前文章，可以更好理解项目结构。
qq群：801913255
有兴趣的朋友，请关注我吧(*^▽^*)。

关注我，学不会你来打我
废话文学
震惊！什么？你还不会使用Vue3+Element Plus搭建前端框架？
什么？你还在为找Vue3+Element Plus的前端框架模板而烦恼？
简单的不符合心意，成熟的又复杂看不懂？怎么办？
那还等什么，关注我，手把手教你搭建自己的前端模板。
创建项目，前置条件
安装VsCode
安装脚手架：npm install -g @vue/cli  我的版本v5.0.8
安装node.js（下载地址）：点击下载  我用的版本v21.7.3
创建Vue3项目
打开vsCode，在终端中切换创建项目路径（如果不切换，默认安装在C:\Users\admin）：如：cd  E:\Vue项目
使用vue create xxx命令创建项目，这里需要注意的是，项目名称中，不能包含大写字母
如下图所示

这里我们直接选择：使用Vue3安装，当然你也可以选择手动选择功能。
安装成功后，我们打开项目。

可以看到，新建项目的目录结构，非常简单明了。我们使用命令，运行看下效果
运行命令：npm run serve

默认项目样式

出现如下界面，证明我们创建项目成功。
安装Element Plus
--使用npm
npm install element-plus --save 
--使用
yarn add element-plus
--使用
pnpm install element-plus
安装成功后，我们在main中配置全局变量

1. import { createApp } from 'vue'
2. import App from './App.vue'
3. import ElementPlus from 'element-plus'
4. import 'element-plus/dist/index.css'
6. const app = createApp(App)
7. app.use(ElementPlus)
8. app.mount('#app')

复制代码

 安装小图标：npm install @element-plus/icons-vue   
全局配置：

1. import { createApp } from 'vue'
2. import App from './App.vue'
3. import ElementPlus from 'element-plus'
4. import 'element-plus/dist/index.css'
5. import * as Icons from '@element-plus/icons-vue'
7. const app = createApp(App)
8. app.use(ElementPlus)
9. for (const [key, component] of Object.entries(Icons)) {
10. <template>
11. <template>
12.   <HelloWorld />
13. </template><HelloWorld />
14. </template><template>
15. <template>
16.   <HelloWorld />
17. </template><HelloWorld />
18. </template>app.component(key, component)
19. <template>
20. <template>
21.   <HelloWorld />
22. </template><HelloWorld />
23. </template>}
24. app.mount('#app')

复制代码

安装Typescript :npm install  --save-dev typescript ts-loader
把js文件转成ts： vue add typescript
说明下：因为element plus 官方用例也是使用ts，所以我们需要把js转换成ts
添加tsconfig.json配置文件，示例如下（不然使用ts会报错）

1. {
2. <template>
3. <template>
4.   <HelloWorld />
5. </template><HelloWorld />
6. </template>"compilerOptions": {
7. <template>
8. <template>
9.   <HelloWorld />
10. </template><HelloWorld />
11. </template><template>
12. <template>
13.   <HelloWorld />
14. </template><HelloWorld />
15. </template>"target": "esnext",
16. <template>
17. <template>
18.   <HelloWorld />
19. </template><HelloWorld />
20. </template><template>
21. <template>
22.   <HelloWorld />
23. </template><HelloWorld />
24. </template>"module": "esnext",
25. <template>
26. <template>
27.   <HelloWorld />
28. </template><HelloWorld />
29. </template><template>
30. <template>
31.   <HelloWorld />
32. </template><HelloWorld />
33. </template>"strict": true,
34. <template>
35. <template>
36.   <HelloWorld />
37. </template><HelloWorld />
38. </template><template>
39. <template>
40.   <HelloWorld />
41. </template><HelloWorld />
42. </template>"jsx": "preserve",
43. <template>
44. <template>
45.   <HelloWorld />
46. </template><HelloWorld />
47. </template><template>
48. <template>
49.   <HelloWorld />
50. </template><HelloWorld />
51. </template>"moduleResolution": "node",
52. <template>
53. <template>
54.   <HelloWorld />
55. </template><HelloWorld />
56. </template><template>
57. <template>
58.   <HelloWorld />
59. </template><HelloWorld />
60. </template>"experimentalDecorators": true,
61. <template>
62. <template>
63.   <HelloWorld />
64. </template><HelloWorld />
65. </template><template>
66. <template>
67.   <HelloWorld />
68. </template><HelloWorld />
69. </template>"allowJs": true,
70. <template>
71. <template>
72.   <HelloWorld />
73. </template><HelloWorld />
74. </template><template>
75. <template>
76.   <HelloWorld />
77. </template><HelloWorld />
78. </template>"skipLibCheck": true,
79. <template>
80. <template>
81.   <HelloWorld />
82. </template><HelloWorld />
83. </template><template>
84. <template>
85.   <HelloWorld />
86. </template><HelloWorld />
87. </template>"esModuleInterop": true,
88. <template>
89. <template>
90.   <HelloWorld />
91. </template><HelloWorld />
92. </template><template>
93. <template>
94.   <HelloWorld />
95. </template><HelloWorld />
96. </template>"allowSyntheticDefaultImports": true,
97. <template>
98. <template>
99.   <HelloWorld />
100. </template><HelloWorld />
101. </template><template>
102. <template>
103.   <HelloWorld />
104. </template><HelloWorld />
105. </template>"forceConsistentCasingInFileNames": true,
106. <template>
107. <template>
108.   <HelloWorld />
109. </template><HelloWorld />
110. </template><template>
111. <template>
112.   <HelloWorld />
113. </template><HelloWorld />
114. </template>"useDefineForClassFields": true,
115. <template>
116. <template>
117.   <HelloWorld />
118. </template><HelloWorld />
119. </template><template>
120. <template>
121.   <HelloWorld />
122. </template><HelloWorld />
123. </template>"sourceMap": true,
124. <template>
125. <template>
126.   <HelloWorld />
127. </template><HelloWorld />
128. </template><template>
129. <template>
130.   <HelloWorld />
131. </template><HelloWorld />
132. </template>"baseUrl": ".",
133. <template>
134. <template>
135.   <HelloWorld />
136. </template><HelloWorld />
137. </template><template>
138. <template>
139.   <HelloWorld />
140. </template><HelloWorld />
141. </template>"types": [
142. <template>
143. <template>
144.   <HelloWorld />
145. </template><HelloWorld />
146. </template><template>
147. <template>
148.   <HelloWorld />
149. </template><HelloWorld />
150. </template><template>
151. <template>
152.   <HelloWorld />
153. </template><HelloWorld />
154. </template>"webpack-env"
155. <template>
156. <template>
157.   <HelloWorld />
158. </template><HelloWorld />
159. </template><template>
160. <template>
161.   <HelloWorld />
162. </template><HelloWorld />
163. </template>],
164. <template>
165. <template>
166.   <HelloWorld />
167. </template><HelloWorld />
168. </template><template>
169. <template>
170.   <HelloWorld />
171. </template><HelloWorld />
172. </template>"paths": {
173. <template>
174. <template>
175.   <HelloWorld />
176. </template><HelloWorld />
177. </template><template>
178. <template>
179.   <HelloWorld />
180. </template><HelloWorld />
181. </template><template>
182. <template>
183.   <HelloWorld />
184. </template><HelloWorld />
185. </template>"@/*": [
186. <template>
187. <template>
188.   <HelloWorld />
189. </template><HelloWorld />
190. </template><template>
191. <template>
192.   <HelloWorld />
193. </template><HelloWorld />
194. </template><template>
195. <template>
196.   <HelloWorld />
197. </template><HelloWorld />
198. </template><template>
199. <template>
200.   <HelloWorld />
201. </template><HelloWorld />
202. </template>"src/*"
203. <template>
204. <template>
205.   <HelloWorld />
206. </template><HelloWorld />
207. </template><template>
208. <template>
209.   <HelloWorld />
210. </template><HelloWorld />
211. </template><template>
212. <template>
213.   <HelloWorld />
214. </template><HelloWorld />
215. </template>]
216. <template>
217. <template>
218.   <HelloWorld />
219. </template><HelloWorld />
220. </template><template>
221. <template>
222.   <HelloWorld />
223. </template><HelloWorld />
224. </template>},
225. <template>
226. <template>
227.   <HelloWorld />
228. </template><HelloWorld />
229. </template><template>
230. <template>
231.   <HelloWorld />
232. </template><HelloWorld />
233. </template>"lib": [
234. <template>
235. <template>
236.   <HelloWorld />
237. </template><HelloWorld />
238. </template><template>
239. <template>
240.   <HelloWorld />
241. </template><HelloWorld />
242. </template><template>
243. <template>
244.   <HelloWorld />
245. </template><HelloWorld />
246. </template>"esnext",
247. <template>
248. <template>
249.   <HelloWorld />
250. </template><HelloWorld />
251. </template><template>
252. <template>
253.   <HelloWorld />
254. </template><HelloWorld />
255. </template><template>
256. <template>
257.   <HelloWorld />
258. </template><HelloWorld />
259. </template>"dom",
260. <template>
261. <template>
262.   <HelloWorld />
263. </template><HelloWorld />
264. </template><template>
265. <template>
266.   <HelloWorld />
267. </template><HelloWorld />
268. </template><template>
269. <template>
270.   <HelloWorld />
271. </template><HelloWorld />
272. </template>"dom.iterable",
273. <template>
274. <template>
275.   <HelloWorld />
276. </template><HelloWorld />
277. </template><template>
278. <template>
279.   <HelloWorld />
280. </template><HelloWorld />
281. </template><template>
282. <template>
283.   <HelloWorld />
284. </template><HelloWorld />
285. </template>"scripthost"
286. <template>
287. <template>
288.   <HelloWorld />
289. </template><HelloWorld />
290. </template><template>
291. <template>
292.   <HelloWorld />
293. </template><HelloWorld />
294. </template>]
295. <template>
296. <template>
297.   <HelloWorld />
298. </template><HelloWorld />
299. </template>},
300. <template>
301. <template>
302.   <HelloWorld />
303. </template><HelloWorld />
304. </template>"include": [
305. <template>
306. <template>
307.   <HelloWorld />
308. </template><HelloWorld />
309. </template><template>
310. <template>
311.   <HelloWorld />
312. </template><HelloWorld />
313. </template>"src/**/*.ts",
314. <template>
315. <template>
316.   <HelloWorld />
317. </template><HelloWorld />
318. </template><template>
319. <template>
320.   <HelloWorld />
321. </template><HelloWorld />
322. </template>"src/**/*.tsx",
323. <template>
324. <template>
325.   <HelloWorld />
326. </template><HelloWorld />
327. </template><template>
328. <template>
329.   <HelloWorld />
330. </template><HelloWorld />
331. </template>"src/**/*.vue",
332. <template>
333. <template>
334.   <HelloWorld />
335. </template><HelloWorld />
336. </template><template>
337. <template>
338.   <HelloWorld />
339. </template><HelloWorld />
340. </template>"tests/**/*.ts",
341. <template>
342. <template>
343.   <HelloWorld />
344. </template><HelloWorld />
345. </template><template>
346. <template>
347.   <HelloWorld />
348. </template><HelloWorld />
349. </template>"tests/**/*.tsx"
350. <template>
351. <template>
352.   <HelloWorld />
353. </template><HelloWorld />
354. </template>],
355. <template>
356. <template>
357.   <HelloWorld />
358. </template><HelloWorld />
359. </template>"exclude": [
360. <template>
361. <template>
362.   <HelloWorld />
363. </template><HelloWorld />
364. </template><template>
365. <template>
366.   <HelloWorld />
367. </template><HelloWorld />
368. </template>"node_modules"
369. <template>
370. <template>
371.   <HelloWorld />
372. </template><HelloWorld />
373. </template>]
374. }

复制代码

做完以上操作后，我们vue项目的基本结构如下图

测试Element Plus
做好以上步骤，我们vue3+Element Plus搭建项目的基本模板已经创建好，接下来测试Element Plus是否可以使用
这里我选择使用Element Plus 中的Menu组件，因为接下来我们会使用Menu做系统菜单
找到系统默认生成的HelloWorld.vue文件，用如下代码替换里面的代码

1. <template>
2. <template>
3. <template>
4.   <HelloWorld />
5. </template><HelloWorld />
6. </template><template>
7. <template>
8.   <HelloWorld />
9. </template><HelloWorld />
10. </template><template>
11. <template>
12.   <HelloWorld />
13. </template><HelloWorld />
14. </template><el-menu
15. <template>
16. <template>
17.   <HelloWorld />
18. </template><HelloWorld />
19. </template><template>
20. <template>
21.   <HelloWorld />
22. </template><HelloWorld />
23. </template><template>
24. <template>
25.   <HelloWorld />
26. </template><HelloWorld />
27. </template><template>
28. <template>
29.   <HelloWorld />
30. </template><HelloWorld />
31. </template>active-text-color="#ffd04b"
32. <template>
33. <template>
34.   <HelloWorld />
35. </template><HelloWorld />
36. </template><template>
37. <template>
38.   <HelloWorld />
39. </template><HelloWorld />
40. </template><template>
41. <template>
42.   <HelloWorld />
43. </template><HelloWorld />
44. </template><template>
45. <template>
46.   <HelloWorld />
47. </template><HelloWorld />
48. </template>background-color="#545c64"
49. <template>
50. <template>
51.   <HelloWorld />
52. </template><HelloWorld />
53. </template><template>
54. <template>
55.   <HelloWorld />
56. </template><HelloWorld />
57. </template><template>
58. <template>
59.   <HelloWorld />
60. </template><HelloWorld />
61. </template><template>
62. <template>
63.   <HelloWorld />
64. </template><HelloWorld />
65. </template>class="el-menu-vertical-demo"
66. <template>
67. <template>
68.   <HelloWorld />
69. </template><HelloWorld />
70. </template><template>
71. <template>
72.   <HelloWorld />
73. </template><HelloWorld />
74. </template><template>
75. <template>
76.   <HelloWorld />
77. </template><HelloWorld />
78. </template><template>
79. <template>
80.   <HelloWorld />
81. </template><HelloWorld />
82. </template>default-active="2"
83. <template>
84. <template>
85.   <HelloWorld />
86. </template><HelloWorld />
87. </template><template>
88. <template>
89.   <HelloWorld />
90. </template><HelloWorld />
91. </template><template>
92. <template>
93.   <HelloWorld />
94. </template><HelloWorld />
95. </template><template>
96. <template>
97.   <HelloWorld />
98. </template><HelloWorld />
99. </template>text-color="#fff"
100. <template>
101. <template>
102.   <HelloWorld />
103. </template><HelloWorld />
104. </template><template>
105. <template>
106.   <HelloWorld />
107. </template><HelloWorld />
108. </template><template>
109. <template>
110.   <HelloWorld />
111. </template><HelloWorld />
112. </template>>
113. <template>
114. <template>
115.   <HelloWorld />
116. </template><HelloWorld />
117. </template><template>
118. <template>
119.   <HelloWorld />
120. </template><HelloWorld />
121. </template><template>
122. <template>
123.   <HelloWorld />
124. </template><HelloWorld />
125. </template><template>
126. <template>
127.   <HelloWorld />
128. </template><HelloWorld />
129. </template><el-sub-menu index="1">
130. <template>
131. <template>
132.   <HelloWorld />
133. </template><HelloWorld />
134. </template><template>
135. <template>
136.   <HelloWorld />
137. </template><HelloWorld />
138. </template><template>
139. <template>
140.   <HelloWorld />
141. </template><HelloWorld />
142. </template><template>
143. <template>
144.   <HelloWorld />
145. </template><HelloWorld />
146. </template><template>
147. <template>
148.   <HelloWorld />
149. </template><HelloWorld />
150. </template><template #title>
151. <template>
152. <template>
153.   <HelloWorld />
154. </template><HelloWorld />
155. </template><template>
156. <template>
157.   <HelloWorld />
158. </template><HelloWorld />
159. </template><template>
160. <template>
161.   <HelloWorld />
162. </template><HelloWorld />
163. </template><template>
164. <template>
165.   <HelloWorld />
166. </template><HelloWorld />
167. </template><template>
168. <template>
169.   <HelloWorld />
170. </template><HelloWorld />
171. </template><template>
172. <template>
173.   <HelloWorld />
174. </template><HelloWorld />
175. </template><el-icon><location /></el-icon>
176. <template>
177. <template>
178.   <HelloWorld />
179. </template><HelloWorld />
180. </template><template>
181. <template>
182.   <HelloWorld />
183. </template><HelloWorld />
184. </template><template>
185. <template>
186.   <HelloWorld />
187. </template><HelloWorld />
188. </template><template>
189. <template>
190.   <HelloWorld />
191. </template><HelloWorld />
192. </template><template>
193. <template>
194.   <HelloWorld />
195. </template><HelloWorld />
196. </template><template>
197. <template>
198.   <HelloWorld />
199. </template><HelloWorld />
200. </template><span>Navigator One</span>
201. <template>
202. <template>
203.   <HelloWorld />
204. </template><HelloWorld />
205. </template><template>
206. <template>
207.   <HelloWorld />
208. </template><HelloWorld />
209. </template><template>
210. <template>
211.   <HelloWorld />
212. </template><HelloWorld />
213. </template><template>
214. <template>
215.   <HelloWorld />
216. </template><HelloWorld />
217. </template><template>
218. <template>
219.   <HelloWorld />
220. </template><HelloWorld />
221. </template></template>
222. <template>
223. <template>
224.   <HelloWorld />
225. </template><HelloWorld />
226. </template><template>
227. <template>
228.   <HelloWorld />
229. </template><HelloWorld />
230. </template><template>
231. <template>
232.   <HelloWorld />
233. </template><HelloWorld />
234. </template><template>
235. <template>
236.   <HelloWorld />
237. </template><HelloWorld />
238. </template><template>
239. <template>
240.   <HelloWorld />
241. </template><HelloWorld />
242. </template><el-menu-item-group title="Group One">
243. <template>
244. <template>
245.   <HelloWorld />
246. </template><HelloWorld />
247. </template><template>
248. <template>
249.   <HelloWorld />
250. </template><HelloWorld />
251. </template><template>
252. <template>
253.   <HelloWorld />
254. </template><HelloWorld />
255. </template><template>
256. <template>
257.   <HelloWorld />
258. </template><HelloWorld />
259. </template><template>
260. <template>
261.   <HelloWorld />
262. </template><HelloWorld />
263. </template><template>
264. <template>
265.   <HelloWorld />
266. </template><HelloWorld />
267. </template><el-menu-item index="1-1">item one</el-menu-item>
268. <template>
269. <template>
270.   <HelloWorld />
271. </template><HelloWorld />
272. </template><template>
273. <template>
274.   <HelloWorld />
275. </template><HelloWorld />
276. </template><template>
277. <template>
278.   <HelloWorld />
279. </template><HelloWorld />
280. </template><template>
281. <template>
282.   <HelloWorld />
283. </template><HelloWorld />
284. </template><template>
285. <template>
286.   <HelloWorld />
287. </template><HelloWorld />
288. </template><template>
289. <template>
290.   <HelloWorld />
291. </template><HelloWorld />
292. </template><el-menu-item index="1-2">item two</el-menu-item>
293. <template>
294. <template>
295.   <HelloWorld />
296. </template><HelloWorld />
297. </template><template>
298. <template>
299.   <HelloWorld />
300. </template><HelloWorld />
301. </template><template>
302. <template>
303.   <HelloWorld />
304. </template><HelloWorld />
305. </template><template>
306. <template>
307.   <HelloWorld />
308. </template><HelloWorld />
309. </template><template>
310. <template>
311.   <HelloWorld />
312. </template><HelloWorld />
313. </template></el-menu-item-group>
314. <template>
315. <template>
316.   <HelloWorld />
317. </template><HelloWorld />
318. </template><template>
319. <template>
320.   <HelloWorld />
321. </template><HelloWorld />
322. </template><template>
323. <template>
324.   <HelloWorld />
325. </template><HelloWorld />
326. </template><template>
327. <template>
328.   <HelloWorld />
329. </template><HelloWorld />
330. </template><template>
331. <template>
332.   <HelloWorld />
333. </template><HelloWorld />
334. </template><el-menu-item-group title="Group Two">
335. <template>
336. <template>
337.   <HelloWorld />
338. </template><HelloWorld />
339. </template><template>
340. <template>
341.   <HelloWorld />
342. </template><HelloWorld />
343. </template><template>
344. <template>
345.   <HelloWorld />
346. </template><HelloWorld />
347. </template><template>
348. <template>
349.   <HelloWorld />
350. </template><HelloWorld />
351. </template><template>
352. <template>
353.   <HelloWorld />
354. </template><HelloWorld />
355. </template><template>
356. <template>
357.   <HelloWorld />
358. </template><HelloWorld />
359. </template><el-menu-item index="1-3">item three</el-menu-item>
360. <template>
361. <template>
362.   <HelloWorld />
363. </template><HelloWorld />
364. </template><template>
365. <template>
366.   <HelloWorld />
367. </template><HelloWorld />
368. </template><template>
369. <template>
370.   <HelloWorld />
371. </template><HelloWorld />
372. </template><template>
373. <template>
374.   <HelloWorld />
375. </template><HelloWorld />
376. </template><template>
377. <template>
378.   <HelloWorld />
379. </template><HelloWorld />
380. </template></el-menu-item-group>
381. <template>
382. <template>
383.   <HelloWorld />
384. </template><HelloWorld />
385. </template><template>
386. <template>
387.   <HelloWorld />
388. </template><HelloWorld />
389. </template><template>
390. <template>
391.   <HelloWorld />
392. </template><HelloWorld />
393. </template><template>
394. <template>
395.   <HelloWorld />
396. </template><HelloWorld />
397. </template><template>
398. <template>
399.   <HelloWorld />
400. </template><HelloWorld />
401. </template><el-sub-menu index="1-4">
402. <template>
403. <template>
404.   <HelloWorld />
405. </template><HelloWorld />
406. </template><template>
407. <template>
408.   <HelloWorld />
409. </template><HelloWorld />
410. </template><template>
411. <template>
412.   <HelloWorld />
413. </template><HelloWorld />
414. </template><template>
415. <template>
416.   <HelloWorld />
417. </template><HelloWorld />
418. </template><template>
419. <template>
420.   <HelloWorld />
421. </template><HelloWorld />
422. </template><template>
423. <template>
424.   <HelloWorld />
425. </template><HelloWorld />
426. </template><template #title>item four</template>
427. <template>
428. <template>
429.   <HelloWorld />
430. </template><HelloWorld />
431. </template><template>
432. <template>
433.   <HelloWorld />
434. </template><HelloWorld />
435. </template><template>
436. <template>
437.   <HelloWorld />
438. </template><HelloWorld />
439. </template><template>
440. <template>
441.   <HelloWorld />
442. </template><HelloWorld />
443. </template><template>
444. <template>
445.   <HelloWorld />
446. </template><HelloWorld />
447. </template><template>
448. <template>
449.   <HelloWorld />
450. </template><HelloWorld />
451. </template><el-menu-item index="1-4-1">item one</el-menu-item>
452. <template>
453. <template>
454.   <HelloWorld />
455. </template><HelloWorld />
456. </template><template>
457. <template>
458.   <HelloWorld />
459. </template><HelloWorld />
460. </template><template>
461. <template>
462.   <HelloWorld />
463. </template><HelloWorld />
464. </template><template>
465. <template>
466.   <HelloWorld />
467. </template><HelloWorld />
468. </template><template>
469. <template>
470.   <HelloWorld />
471. </template><HelloWorld />
472. </template></el-sub-menu>
473. <template>
474. <template>
475.   <HelloWorld />
476. </template><HelloWorld />
477. </template><template>
478. <template>
479.   <HelloWorld />
480. </template><HelloWorld />
481. </template><template>
482. <template>
483.   <HelloWorld />
484. </template><HelloWorld />
485. </template><template>
486. <template>
487.   <HelloWorld />
488. </template><HelloWorld />
489. </template></el-sub-menu>
490. <template>
491. <template>
492.   <HelloWorld />
493. </template><HelloWorld />
494. </template><template>
495. <template>
496.   <HelloWorld />
497. </template><HelloWorld />
498. </template><template>
499. <template>
500.   <HelloWorld />
501. </template><HelloWorld />
502. </template><template>
503. <template>
504.   <HelloWorld />
505. </template><HelloWorld />
506. </template><el-menu-item index="2">
507. <template>
508. <template>
509.   <HelloWorld />
510. </template><HelloWorld />
511. </template><template>
512. <template>
513.   <HelloWorld />
514. </template><HelloWorld />
515. </template><template>
516. <template>
517.   <HelloWorld />
518. </template><HelloWorld />
519. </template><template>
520. <template>
521.   <HelloWorld />
522. </template><HelloWorld />
523. </template><template>
524. <template>
525.   <HelloWorld />
526. </template><HelloWorld />
527. </template><el-icon><icon-menu /></el-icon>
528. <template>
529. <template>
530.   <HelloWorld />
531. </template><HelloWorld />
532. </template><template>
533. <template>
534.   <HelloWorld />
535. </template><HelloWorld />
536. </template><template>
537. <template>
538.   <HelloWorld />
539. </template><HelloWorld />
540. </template><template>
541. <template>
542.   <HelloWorld />
543. </template><HelloWorld />
544. </template><template>
545. <template>
546.   <HelloWorld />
547. </template><HelloWorld />
548. </template><span>Navigator Two</span>
549. <template>
550. <template>
551.   <HelloWorld />
552. </template><HelloWorld />
553. </template><template>
554. <template>
555.   <HelloWorld />
556. </template><HelloWorld />
557. </template><template>
558. <template>
559.   <HelloWorld />
560. </template><HelloWorld />
561. </template><template>
562. <template>
563.   <HelloWorld />
564. </template><HelloWorld />
565. </template></el-menu-item>
566. <template>
567. <template>
568.   <HelloWorld />
569. </template><HelloWorld />
570. </template><template>
571. <template>
572.   <HelloWorld />
573. </template><HelloWorld />
574. </template><template>
575. <template>
576.   <HelloWorld />
577. </template><HelloWorld />
578. </template><template>
579. <template>
580.   <HelloWorld />
581. </template><HelloWorld />
582. </template><el-menu-item index="3" disabled>
583. <template>
584. <template>
585.   <HelloWorld />
586. </template><HelloWorld />
587. </template><template>
588. <template>
589.   <HelloWorld />
590. </template><HelloWorld />
591. </template><template>
592. <template>
593.   <HelloWorld />
594. </template><HelloWorld />
595. </template><template>
596. <template>
597.   <HelloWorld />
598. </template><HelloWorld />
599. </template><template>
600. <template>
601.   <HelloWorld />
602. </template><HelloWorld />
603. </template><el-icon><document /></el-icon>
604. <template>
605. <template>
606.   <HelloWorld />
607. </template><HelloWorld />
608. </template><template>
609. <template>
610.   <HelloWorld />
611. </template><HelloWorld />
612. </template><template>
613. <template>
614.   <HelloWorld />
615. </template><HelloWorld />
616. </template><template>
617. <template>
618.   <HelloWorld />
619. </template><HelloWorld />
620. </template><template>
621. <template>
622.   <HelloWorld />
623. </template><HelloWorld />
624. </template><span>Navigator Three</span>
625. <template>
626. <template>
627.   <HelloWorld />
628. </template><HelloWorld />
629. </template><template>
630. <template>
631.   <HelloWorld />
632. </template><HelloWorld />
633. </template><template>
634. <template>
635.   <HelloWorld />
636. </template><HelloWorld />
637. </template><template>
638. <template>
639.   <HelloWorld />
640. </template><HelloWorld />
641. </template></el-menu-item>
642. <template>
643. <template>
644.   <HelloWorld />
645. </template><HelloWorld />
646. </template><template>
647. <template>
648.   <HelloWorld />
649. </template><HelloWorld />
650. </template><template>
651. <template>
652.   <HelloWorld />
653. </template><HelloWorld />
654. </template><template>
655. <template>
656.   <HelloWorld />
657. </template><HelloWorld />
658. </template><el-menu-item index="4">
659. <template>
660. <template>
661.   <HelloWorld />
662. </template><HelloWorld />
663. </template><template>
664. <template>
665.   <HelloWorld />
666. </template><HelloWorld />
667. </template><template>
668. <template>
669.   <HelloWorld />
670. </template><HelloWorld />
671. </template><template>
672. <template>
673.   <HelloWorld />
674. </template><HelloWorld />
675. </template><template>
676. <template>
677.   <HelloWorld />
678. </template><HelloWorld />
679. </template><el-icon><setting /></el-icon>
680. <template>
681. <template>
682.   <HelloWorld />
683. </template><HelloWorld />
684. </template><template>
685. <template>
686.   <HelloWorld />
687. </template><HelloWorld />
688. </template><template>
689. <template>
690.   <HelloWorld />
691. </template><HelloWorld />
692. </template><template>
693. <template>
694.   <HelloWorld />
695. </template><HelloWorld />
696. </template><template>
697. <template>
698.   <HelloWorld />
699. </template><HelloWorld />
700. </template><span>Navigator Four</span>
701. <template>
702. <template>
703.   <HelloWorld />
704. </template><HelloWorld />
705. </template><template>
706. <template>
707.   <HelloWorld />
708. </template><HelloWorld />
709. </template><template>
710. <template>
711.   <HelloWorld />
712. </template><HelloWorld />
713. </template><template>
714. <template>
715.   <HelloWorld />
716. </template><HelloWorld />
717. </template></el-menu-item>
718. <template>
719. <template>
720.   <HelloWorld />
721. </template><HelloWorld />
722. </template><template>
723. <template>
724.   <HelloWorld />
725. </template><HelloWorld />
726. </template><template>
727. <template>
728.   <HelloWorld />
729. </template><HelloWorld />
730. </template></el-menu>
731. </template>

复制代码

该代码，基本和官网的示例一致。是构建一个Menu导航菜单
然后再找到App.vue文件，用如下代码替换里面代码

1. <template>
2. <template>
3.   <HelloWorld />
4. </template><HelloWorld />
5. </template>

复制代码

 做好以上步骤后，我们使用npm run serve命令，启动项目
出下如下界面，证明项目创建成功

搭建框架
安装好Element Plus后，我们就要使用它来搭建框架
使用Element Plus的布局组件container+菜单组件Menu，来搭建框架。
这里是写样式布局，没有啥好说的，直接上代码
HelloWorld.vue 代码如下

1. <template>
2. <template>
3.   <HelloWorld />
4. </template><HelloWorld />
5. </template><template>
6. <template>
7.   <HelloWorld />
8. </template><HelloWorld />
9. </template><template>
10. <template>
11.   <HelloWorld />
12. </template><HelloWorld />
13. </template><template>
14. <template>
15.   <HelloWorld />
16. </template><HelloWorld />
17. </template><template>
18. <template>
19.   <HelloWorld />
20. </template><HelloWorld />
21. </template><template>
22. <template>
23.   <HelloWorld />
24. </template><HelloWorld />
25. </template><template>
26. <template>
27.   <HelloWorld />
28. </template><HelloWorld />
29. </template><template>
30. <template>
31.   <HelloWorld />
32. </template><HelloWorld />
33. </template><template>
34. <template>
35.   <HelloWorld />
36. </template><HelloWorld />
37. </template><template>
38. <template>
39.   <HelloWorld />
40. </template><HelloWorld />
41. </template><template>
42. <template>
43.   <HelloWorld />
44. </template><HelloWorld />
45. </template><template>
46. <template>
47.   <HelloWorld />
48. </template><HelloWorld />
49. </template><template>
50. <template>
51.   <HelloWorld />
52. </template><HelloWorld />
53. </template><template>
54. <template>
55.   <HelloWorld />
56. </template><HelloWorld />
57. </template><template>
58. <template>
59.   <HelloWorld />
60. </template><HelloWorld />
61. </template><template>
62. <template>
63.   <HelloWorld />
64. </template><HelloWorld />
65. </template><template>
66. <template>
67.   <HelloWorld />
68. </template><HelloWorld />
69. </template><template>
70. <template>
71.   <HelloWorld />
72. </template><HelloWorld />
73. </template><template>
74. <template>
75.   <HelloWorld />
76. </template><HelloWorld />
77. </template><template>
78. <template>
79.   <HelloWorld />
80. </template><HelloWorld />
81. </template><template>
82. <template>
83.   <HelloWorld />
84. </template><HelloWorld />
85. </template><template>
86. <template>
87.   <HelloWorld />
88. </template><HelloWorld />
89. </template><template>
90. <template>
91.   <HelloWorld />
92. </template><HelloWorld />
93. </template><template>
94. <template>
95.   <HelloWorld />
96. </template><HelloWorld />
97. </template><template>
98. <template>
99.   <HelloWorld />
100. </template><HelloWorld />
101. </template><template>
102. <template>
103.   <HelloWorld />
104. </template><HelloWorld />
105. </template><template>
106. <template>
107.   <HelloWorld />
108. </template><HelloWorld />
109. </template><template>
110. <template>
111.   <HelloWorld />
112. </template><HelloWorld />
113. </template><template>
114. <template>
115.   <HelloWorld />
116. </template><HelloWorld />
117. </template><template>
118. <template>
119.   <HelloWorld />
120. </template><HelloWorld />
121. </template><template>
122. <template>
123.   <HelloWorld />
124. </template><HelloWorld />
125. </template><template>
126. <template>
127.   <HelloWorld />
128. </template><HelloWorld />
129. </template><template>
130. <template>
131.   <HelloWorld />
132. </template><HelloWorld />
133. </template>OverallAuth2.0<template>
134. <template>
135.   <HelloWorld />
136. </template><HelloWorld />
137. </template><template>
138. <template>
139.   <HelloWorld />
140. </template><HelloWorld />
141. </template><template>
142. <template>
143.   <HelloWorld />
144. </template><HelloWorld />
145. </template><template>
146. <template>
147.   <HelloWorld />
148. </template><HelloWorld />
149. </template><template>
150. <template>
151.   <HelloWorld />
152. </template><HelloWorld />
153. </template><template>
154. <template>
155.   <HelloWorld />
156. </template><HelloWorld />
157. </template><template>
158. <template>
159.   <HelloWorld />
160. </template><HelloWorld />
161. </template><template>
162. <template>
163.   <HelloWorld />
164. </template><HelloWorld />
165. </template><template>
166. <template>
167.   <HelloWorld />
168. </template><HelloWorld />
169. </template><template>
170. <template>
171.   <HelloWorld />
172. </template><HelloWorld />
173. </template><template>
174. <template>
175.   <HelloWorld />
176. </template><HelloWorld />
177. </template><template>
178. <template>
179.   <HelloWorld />
180. </template><HelloWorld />
181. </template><template>
182. <template>
183.   <HelloWorld />
184. </template><HelloWorld />
185. </template><template>
186. <template>
187.   <HelloWorld />
188. </template><HelloWorld />
189. </template><template>
190. <template>
191.   <HelloWorld />
192. </template><HelloWorld />
193. </template><template>
194. <template>
195.   <HelloWorld />
196. </template><HelloWorld />
197. </template><template>
198. <template>
199.   <HelloWorld />
200. </template><HelloWorld />
201. </template><template>
202. <template>
203.   <HelloWorld />
204. </template><HelloWorld />
205. </template><template>
206. <template>
207.   <HelloWorld />
208. </template><HelloWorld />
209. </template><template>
210. <template>
211.   <HelloWorld />
212. </template><HelloWorld />
213. </template><template>
214. <template>
215.   <HelloWorld />
216. </template><HelloWorld />
217. </template><template>
218. <template>
219.   <HelloWorld />
220. </template><HelloWorld />
221. </template><template>
222. <template>
223.   <HelloWorld />
224. </template><HelloWorld />
225. </template><template>
226. <template>
227.   <HelloWorld />
228. </template><HelloWorld />
229. </template><template>
230. <template>
231.   <HelloWorld />
232. </template><HelloWorld />
233. </template><template>
234. <template>
235.   <HelloWorld />
236. </template><HelloWorld />
237. </template><template>
238. <template>
239.   <HelloWorld />
240. </template><HelloWorld />
241. </template><template>
242. <template>
243.   <HelloWorld />
244. </template><HelloWorld />
245. </template><template>
246. <template>
247.   <HelloWorld />
248. </template><HelloWorld />
249. </template><template>
250. <template>
251.   <HelloWorld />
252. </template><HelloWorld />
253. </template><template>
254. <template>
255.   <HelloWorld />
256. </template><HelloWorld />
257. </template><template>
258. <template>
259.   <HelloWorld />
260. </template><HelloWorld />
261. </template><template>
262. <template>
263.   <HelloWorld />
264. </template><HelloWorld />
265. </template><template>
266. <template>
267.   <HelloWorld />
268. </template><HelloWorld />
269. </template><template>
270. <template>
271.   <HelloWorld />
272. </template><HelloWorld />
273. </template><template>
274. <template>
275.   <HelloWorld />
276. </template><HelloWorld />
277. </template>Navigator One<template>
278. <template>
279.   <HelloWorld />
280. </template><HelloWorld />
281. </template><template>
282. <template>
283.   <HelloWorld />
284. </template><HelloWorld />
285. </template><template>
286. <template>
287.   <HelloWorld />
288. </template><HelloWorld />
289. </template><template>
290. <template>
291.   <HelloWorld />
292. </template><HelloWorld />
293. </template><template>
294. <template>
295.   <HelloWorld />
296. </template><HelloWorld />
297. </template><template>
298. <template>
299.   <HelloWorld />
300. </template><HelloWorld />
301. </template><template>
302. <template>
303.   <HelloWorld />
304. </template><HelloWorld />
305. </template><template>
306. <template>
307.   <HelloWorld />
308. </template><HelloWorld />
309. </template><template>
310. <template>
311.   <HelloWorld />
312. </template><HelloWorld />
313. </template><template>
314. <template>
315.   <HelloWorld />
316. </template><HelloWorld />
317. </template><template>
318. <template>
319.   <HelloWorld />
320. </template><HelloWorld />
321. </template><template>
322. <template>
323.   <HelloWorld />
324. </template><HelloWorld />
325. </template><template>
326. <template>
327.   <HelloWorld />
328. </template><HelloWorld />
329. </template><template>
330. <template>
331.   <HelloWorld />
332. </template><HelloWorld />
333. </template><template>
334. <template>
335.   <HelloWorld />
336. </template><HelloWorld />
337. </template><template>
338. <template>
339.   <HelloWorld />
340. </template><HelloWorld />
341. </template><template>
342. <template>
343.   <HelloWorld />
344. </template><HelloWorld />
345. </template><template>
346. <template>
347.   <HelloWorld />
348. </template><HelloWorld />
349. </template><template>
350. <template>
351.   <HelloWorld />
352. </template><HelloWorld />
353. </template>item one<template>
354. <template>
355.   <HelloWorld />
356. </template><HelloWorld />
357. </template><template>
358. <template>
359.   <HelloWorld />
360. </template><HelloWorld />
361. </template><template>
362. <template>
363.   <HelloWorld />
364. </template><HelloWorld />
365. </template><template>
366. <template>
367.   <HelloWorld />
368. </template><HelloWorld />
369. </template><template>
370. <template>
371.   <HelloWorld />
372. </template><HelloWorld />
373. </template><template>
374. <template>
375.   <HelloWorld />
376. </template><HelloWorld />
377. </template><template>
378. <template>
379.   <HelloWorld />
380. </template><HelloWorld />
381. </template>item two<template>
382. <template>
383.   <HelloWorld />
384. </template><HelloWorld />
385. </template><template>
386. <template>
387.   <HelloWorld />
388. </template><HelloWorld />
389. </template><template>
390. <template>
391.   <HelloWorld />
392. </template><HelloWorld />
393. </template><template>
394. <template>
395.   <HelloWorld />
396. </template><HelloWorld />
397. </template><template>
398. <template>
399.   <HelloWorld />
400. </template><HelloWorld />
401. </template><template>
402. <template>
403.   <HelloWorld />
404. </template><HelloWorld />
405. </template><template>
406. <template>
407.   <HelloWorld />
408. </template><HelloWorld />
409. </template><template>
410. <template>
411.   <HelloWorld />
412. </template><HelloWorld />
413. </template><template>
414. <template>
415.   <HelloWorld />
416. </template><HelloWorld />
417. </template><template>
418. <template>
419.   <HelloWorld />
420. </template><HelloWorld />
421. </template><template>
422. <template>
423.   <HelloWorld />
424. </template><HelloWorld />
425. </template><template>
426. <template>
427.   <HelloWorld />
428. </template><HelloWorld />
429. </template><template>
430. <template>
431.   <HelloWorld />
432. </template><HelloWorld />
433. </template><template>
434. <template>
435.   <HelloWorld />
436. </template><HelloWorld />
437. </template><template>
438. <template>
439.   <HelloWorld />
440. </template><HelloWorld />
441. </template><template>
442. <template>
443.   <HelloWorld />
444. </template><HelloWorld />
445. </template><template>
446. <template>
447.   <HelloWorld />
448. </template><HelloWorld />
449. </template><template>
450. <template>
451.   <HelloWorld />
452. </template><HelloWorld />
453. </template><template>
454. <template>
455.   <HelloWorld />
456. </template><HelloWorld />
457. </template>item three<template>
458. <template>
459.   <HelloWorld />
460. </template><HelloWorld />
461. </template><template>
462. <template>
463.   <HelloWorld />
464. </template><HelloWorld />
465. </template><template>
466. <template>
467.   <HelloWorld />
468. </template><HelloWorld />
469. </template><template>
470. <template>
471.   <HelloWorld />
472. </template><HelloWorld />
473. </template><template>
474. <template>
475.   <HelloWorld />
476. </template><HelloWorld />
477. </template><template>
478. <template>
479.   <HelloWorld />
480. </template><HelloWorld />
481. </template><template>
482. <template>
483.   <HelloWorld />
484. </template><HelloWorld />
485. </template><template>
486. <template>
487.   <HelloWorld />
488. </template><HelloWorld />
489. </template><template>
490. <template>
491.   <HelloWorld />
492. </template><HelloWorld />
493. </template><template>
494. <template>
495.   <HelloWorld />
496. </template><HelloWorld />
497. </template><template>
498. <template>
499.   <HelloWorld />
500. </template><HelloWorld />
501. </template><template>
502. <template>
503.   <HelloWorld />
504. </template><HelloWorld />
505. </template><template>
506. <template>
507.   <HelloWorld />
508. </template><HelloWorld />
509. </template><template>
510. <template>
511.   <HelloWorld />
512. </template><HelloWorld />
513. </template><template>
514. <template>
515.   <HelloWorld />
516. </template><HelloWorld />
517. </template><template>
518. <template>
519.   <HelloWorld />
520. </template><HelloWorld />
521. </template><template>
522. <template>
523.   <HelloWorld />
524. </template><HelloWorld />
525. </template><template>
526. <template>
527.   <HelloWorld />
528. </template><HelloWorld />
529. </template><template>
530. <template>
531.   <HelloWorld />
532. </template><HelloWorld />
533. </template>item four<template>
534. <template>
535.   <HelloWorld />
536. </template><HelloWorld />
537. </template><template>
538. <template>
539.   <HelloWorld />
540. </template><HelloWorld />
541. </template><template>
542. <template>
543.   <HelloWorld />
544. </template><HelloWorld />
545. </template><template>
546. <template>
547.   <HelloWorld />
548. </template><HelloWorld />
549. </template><template>
550. <template>
551.   <HelloWorld />
552. </template><HelloWorld />
553. </template><template>
554. <template>
555.   <HelloWorld />
556. </template><HelloWorld />
557. </template><template>
558. <template>
559.   <HelloWorld />
560. </template><HelloWorld />
561. </template>item one<template>
562. <template>
563.   <HelloWorld />
564. </template><HelloWorld />
565. </template><template>
566. <template>
567.   <HelloWorld />
568. </template><HelloWorld />
569. </template><template>
570. <template>
571.   <HelloWorld />
572. </template><HelloWorld />
573. </template><template>
574. <template>
575.   <HelloWorld />
576. </template><HelloWorld />
577. </template><template>
578. <template>
579.   <HelloWorld />
580. </template><HelloWorld />
581. </template><template>
582. <template>
583.   <HelloWorld />
584. </template><HelloWorld />
585. </template><template>
586. <template>
587.   <HelloWorld />
588. </template><HelloWorld />
589. </template><template>
590. <template>
591.   <HelloWorld />
592. </template><HelloWorld />
593. </template><template>
594. <template>
595.   <HelloWorld />
596. </template><HelloWorld />
597. </template><template>
598. <template>
599.   <HelloWorld />
600. </template><HelloWorld />
601. </template><template>
602. <template>
603.   <HelloWorld />
604. </template><HelloWorld />
605. </template><template>
606. <template>
607.   <HelloWorld />
608. </template><HelloWorld />
609. </template><template>
610. <template>
611.   <HelloWorld />
612. </template><HelloWorld />
613. </template><template>
614. <template>
615.   <HelloWorld />
616. </template><HelloWorld />
617. </template><template>
618. <template>
619.   <HelloWorld />
620. </template><HelloWorld />
621. </template><template>
622. <template>
623.   <HelloWorld />
624. </template><HelloWorld />
625. </template><template>
626. <template>
627.   <HelloWorld />
628. </template><HelloWorld />
629. </template><template>
630. <template>
631.   <HelloWorld />
632. </template><HelloWorld />
633. </template><template>
634. <template>
635.   <HelloWorld />
636. </template><HelloWorld />
637. </template><template>
638. <template>
639.   <HelloWorld />
640. </template><HelloWorld />
641. </template><template>
642. <template>
643.   <HelloWorld />
644. </template><HelloWorld />
645. </template><template>
646. <template>
647.   <HelloWorld />
648. </template><HelloWorld />
649. </template><template>
650. <template>
651.   <HelloWorld />
652. </template><HelloWorld />
653. </template><template>
654. <template>
655.   <HelloWorld />
656. </template><HelloWorld />
657. </template><template>
658. <template>
659.   <HelloWorld />
660. </template><HelloWorld />
661. </template><template>
662. <template>
663.   <HelloWorld />
664. </template><HelloWorld />
665. </template><template>
666. <template>
667.   <HelloWorld />
668. </template><HelloWorld />
669. </template><template>
670. <template>
671.   <HelloWorld />
672. </template><HelloWorld />
673. </template>Navigator Two<template>
674. <template>
675.   <HelloWorld />
676. </template><HelloWorld />
677. </template><template>
678. <template>
679.   <HelloWorld />
680. </template><HelloWorld />
681. </template><template>
682. <template>
683.   <HelloWorld />
684. </template><HelloWorld />
685. </template><template>
686. <template>
687.   <HelloWorld />
688. </template><HelloWorld />
689. </template><template>
690. <template>
691.   <HelloWorld />
692. </template><HelloWorld />
693. </template><template>
694. <template>
695.   <HelloWorld />
696. </template><HelloWorld />
697. </template><template>
698. <template>
699.   <HelloWorld />
700. </template><HelloWorld />
701. </template><template>
702. <template>
703.   <HelloWorld />
704. </template><HelloWorld />
705. </template><template>
706. <template>
707.   <HelloWorld />
708. </template><HelloWorld />
709. </template><template>
710. <template>
711.   <HelloWorld />
712. </template><HelloWorld />
713. </template><template>
714. <template>
715.   <HelloWorld />
716. </template><HelloWorld />
717. </template><template>
718. <template>
719.   <HelloWorld />
720. </template><HelloWorld />
721. </template><template>
722. <template>
723.   <HelloWorld />
724. </template><HelloWorld />
725. </template><template>
726. <template>
727.   <HelloWorld />
728. </template><HelloWorld />
729. </template><template>
730. <template>
731.   <HelloWorld />
732. </template><HelloWorld />
733. </template><template>
734. <template>
735.   <HelloWorld />
736. </template><HelloWorld />
737. </template><template>
738. <template>
739.   <HelloWorld />
740. </template><HelloWorld />
741. </template><template>
742. <template>
743.   <HelloWorld />
744. </template><HelloWorld />
745. </template><template>
746. <template>
747.   <HelloWorld />
748. </template><HelloWorld />
749. </template><template>
750. <template>
751.   <HelloWorld />
752. </template><HelloWorld />
753. </template><template>
754. <template>
755.   <HelloWorld />
756. </template><HelloWorld />
757. </template><template>
758. <template>
759.   <HelloWorld />
760. </template><HelloWorld />
761. </template>Navigator Three<template>
762. <template>
763.   <HelloWorld />
764. </template><HelloWorld />
765. </template><template>
766. <template>
767.   <HelloWorld />
768. </template><HelloWorld />
769. </template><template>
770. <template>
771.   <HelloWorld />
772. </template><HelloWorld />
773. </template><template>
774. <template>
775.   <HelloWorld />
776. </template><HelloWorld />
777. </template><template>
778. <template>
779.   <HelloWorld />
780. </template><HelloWorld />
781. </template><template>
782. <template>
783.   <HelloWorld />
784. </template><HelloWorld />
785. </template><template>
786. <template>
787.   <HelloWorld />
788. </template><HelloWorld />
789. </template><template>
790. <template>
791.   <HelloWorld />
792. </template><HelloWorld />
793. </template><template>
794. <template>
795.   <HelloWorld />
796. </template><HelloWorld />
797. </template><template>
798. <template>
799.   <HelloWorld />
800. </template><HelloWorld />
801. </template><template>
802. <template>
803.   <HelloWorld />
804. </template><HelloWorld />
805. </template><template>
806. <template>
807.   <HelloWorld />
808. </template><HelloWorld />
809. </template><template>
810. <template>
811.   <HelloWorld />
812. </template><HelloWorld />
813. </template><template>
814. <template>
815.   <HelloWorld />
816. </template><HelloWorld />
817. </template><template>
818. <template>
819.   <HelloWorld />
820. </template><HelloWorld />
821. </template><template>
822. <template>
823.   <HelloWorld />
824. </template><HelloWorld />
825. </template><template>
826. <template>
827.   <HelloWorld />
828. </template><HelloWorld />
829. </template><template>
830. <template>
831.   <HelloWorld />
832. </template><HelloWorld />
833. </template><template>
834. <template>
835.   <HelloWorld />
836. </template><HelloWorld />
837. </template><template>
838. <template>
839.   <HelloWorld />
840. </template><HelloWorld />
841. </template><template>
842. <template>
843.   <HelloWorld />
844. </template><HelloWorld />
845. </template><template>
846. <template>
847.   <HelloWorld />
848. </template><HelloWorld />
849. </template>Navigator Four<template>
850. <template>
851.   <HelloWorld />
852. </template><HelloWorld />
853. </template><template>
854. <template>
855.   <HelloWorld />
856. </template><HelloWorld />
857. </template><template>
858. <template>
859.   <HelloWorld />
860. </template><HelloWorld />
861. </template><template>
862. <template>
863.   <HelloWorld />
864. </template><HelloWorld />
865. </template><template>
866. <template>
867.   <HelloWorld />
868. </template><HelloWorld />
869. </template><template>
870. <template>
871.   <HelloWorld />
872. </template><HelloWorld />
873. </template><template>
874. <template>
875.   <HelloWorld />
876. </template><HelloWorld />
877. </template><template>
878. <template>
879.   <HelloWorld />
880. </template><HelloWorld />
881. </template><template>
882. <template>
883.   <HelloWorld />
884. </template><HelloWorld />
885. </template><template>
886. <template>
887.   <HelloWorld />
888. </template><HelloWorld />
889. </template><template>
890. <template>
891.   <HelloWorld />
892. </template><HelloWorld />
893. </template><template>
894. <template>
895.   <HelloWorld />
896. </template><HelloWorld />
897. </template><template>
898. <template>
899.   <HelloWorld />
900. </template><HelloWorld />
901. </template><template>
902. <template>
903.   <HelloWorld />
904. </template><HelloWorld />
905. </template><template>
906. <template>
907.   <HelloWorld />
908. </template><HelloWorld />
909. </template><template>
910. <template>
911.   <HelloWorld />
912. </template><HelloWorld />
913. </template><template>
914. <template>
915.   <HelloWorld />
916. </template><HelloWorld />
917. </template><template>
918. <template>
919.   <HelloWorld />
920. </template><HelloWorld />
921. </template><template>
922. <template>
923.   <HelloWorld />
924. </template><HelloWorld />
925. </template><template>
926. <template>
927.   <HelloWorld />
928. </template><HelloWorld />
929. </template><template>
930. <template>
931.   <HelloWorld />
932. </template><HelloWorld />
933. </template><template>
934. <template>
935.   <HelloWorld />
936. </template><HelloWorld />
937. </template><template>
938. <template>
939.   <HelloWorld />
940. </template><HelloWorld />
941. </template><template>
942. <template>
943.   <HelloWorld />
944. </template><HelloWorld />
945. </template><template>
946. <template>
947.   <HelloWorld />
948. </template><HelloWorld />
949. </template><template>
950. <template>
951.   <HelloWorld />
952. </template><HelloWorld />
953. </template><template>
954. <template>
955.   <HelloWorld />
956. </template><HelloWorld />
957. </template><template>
958. <template>
959.   <HelloWorld />
960. </template><HelloWorld />
961. </template><template>
962. <template>
963.   <HelloWorld />
964. </template><HelloWorld />
965. </template><template>
966. <template>
967.   <HelloWorld />
968. </template><HelloWorld />
969. </template><template>
970. <template>
971.   <HelloWorld />
972. </template><HelloWorld />
973. </template><template>
974. <template>
975.   <HelloWorld />
976. </template><HelloWorld />
977. </template><template>
978. <template>
979.   <HelloWorld />
980. </template><HelloWorld />
981. </template><template>
982. <template>
983.   <HelloWorld />
984. </template><HelloWorld />
985. </template><template>
986. <template>
987.   <HelloWorld />
988. </template><HelloWorld />
989. </template><template>
990. <template>
991.   <HelloWorld />
992. </template><HelloWorld />
993. </template><template>
994. <template>
995.   <HelloWorld />
996. </template><HelloWorld />
997. </template><template>
998. <template>
999.   <HelloWorld />
1000. </template><HelloWorld />
1001. </template><template>
1002. <template>
1003.   <HelloWorld />
1004. </template><HelloWorld />
1005. </template><template>
1006. <template>
1007.   <HelloWorld />
1008. </template><HelloWorld />
1009. </template><template>
1010. <template>
1011.   <HelloWorld />
1012. </template><HelloWorld />
1013. </template><template>
1014. <template>
1015.   <HelloWorld />
1016. </template><HelloWorld />
1017. </template><template>
1018. <template>
1019.   <HelloWorld />
1020. </template><HelloWorld />
1021. </template><template>
1022. <template>
1023.   <HelloWorld />
1024. </template><HelloWorld />
1025. </template><template>
1026. <template>
1027.   <HelloWorld />
1028. </template><HelloWorld />
1029. </template><template>
1030. <template>
1031.   <HelloWorld />
1032. </template><HelloWorld />
1033. </template><template>
1034. <template>
1035.   <HelloWorld />
1036. </template><HelloWorld />
1037. </template><template>
1038. <template>
1039.   <HelloWorld />
1040. </template><HelloWorld />
1041. </template><template>
1042. <template>
1043.   <HelloWorld />
1044. </template><HelloWorld />
1045. </template><template>
1046. <template>
1047.   <HelloWorld />
1048. </template><HelloWorld />
1049. </template><template>
1050. <template>
1051.   <HelloWorld />
1052. </template><HelloWorld />
1053. </template><template>
1054. <template>
1055.   <HelloWorld />
1056. </template><HelloWorld />
1057. </template>OverallAuth2.0 权限管理系统<template>
1058. <template>
1059.   <HelloWorld />
1060. </template><HelloWorld />
1061. </template><template>
1062. <template>
1063.   <HelloWorld />
1064. </template><HelloWorld />
1065. </template><template>
1066. <template>
1067.   <HelloWorld />
1068. </template><HelloWorld />
1069. </template><template>
1070. <template>
1071.   <HelloWorld />
1072. </template><HelloWorld />
1073. </template><template>
1074. <template>
1075.   <HelloWorld />
1076. </template><HelloWorld />
1077. </template><template>
1078. <template>
1079.   <HelloWorld />
1080. </template><HelloWorld />
1081. </template><template>
1082. <template>
1083.   <HelloWorld />
1084. </template><HelloWorld />
1085. </template><template>
1086. <template>
1087.   <HelloWorld />
1088. </template><HelloWorld />
1089. </template><template>
1090. <template>
1091.   <HelloWorld />
1092. </template><HelloWorld />
1093. </template><template>
1094. <template>
1095.   <HelloWorld />
1096. </template><HelloWorld />
1097. </template><template>
1098. <template>
1099.   <HelloWorld />
1100. </template><HelloWorld />
1101. </template><template>
1102. <template>
1103.   <HelloWorld />
1104. </template><HelloWorld />
1105. </template><template>
1106. <template>
1107.   <HelloWorld />
1108. </template><HelloWorld />
1109. </template><template>
1110. <template>
1111.   <HelloWorld />
1112. </template><HelloWorld />
1113. </template><template>
1114. <template>
1115.   <HelloWorld />
1116. </template><HelloWorld />
1117. </template><template>
1118. <template>
1119.   <HelloWorld />
1120. </template><HelloWorld />
1121. </template><template>
1122. <template>
1123.   <HelloWorld />
1124. </template><HelloWorld />
1125. </template><template>
1126. <template>
1127.   <HelloWorld />
1128. </template><HelloWorld />
1129. </template><template>
1130. <template>
1131.   <HelloWorld />
1132. </template><HelloWorld />
1133. </template><template>
1134. <template>
1135.   <HelloWorld />
1136. </template><HelloWorld />
1137. </template><template>
1138. <template>
1139.   <HelloWorld />
1140. </template><HelloWorld />
1141. </template><template>
1142. <template>
1143.   <HelloWorld />
1144. </template><HelloWorld />
1145. </template><template>
1146. <template>
1147.   <HelloWorld />
1148. </template><HelloWorld />
1149. </template><template>
1150. <template>
1151.   <HelloWorld />
1152. </template><HelloWorld />
1153. </template><template>
1154. <template>
1155.   <HelloWorld />
1156. </template><HelloWorld />
1157. </template><template>
1158. <template>
1159.   <HelloWorld />
1160. </template><HelloWorld />
1161. </template><template>
1162. <template>
1163.   <HelloWorld />
1164. </template><HelloWorld />
1165. </template><template>
1166. <template>
1167.   <HelloWorld />
1168. </template><HelloWorld />
1169. </template><template>
1170. <template>
1171.   <HelloWorld />
1172. </template><HelloWorld />
1173. </template><template>
1174. <template>
1175.   <HelloWorld />
1176. </template><HelloWorld />
1177. </template><template>
1178. <template>
1179.   <HelloWorld />
1180. </template><HelloWorld />
1181. </template><template>
1182. <template>
1183.   <HelloWorld />
1184. </template><HelloWorld />
1185. </template><template>
1186. <template>
1187.   <HelloWorld />
1188. </template><HelloWorld />
1189. </template>王小虎<template>
1190. <template>
1191.   <HelloWorld />
1192. </template><HelloWorld />
1193. </template><template>
1194. <template>
1195.   <HelloWorld />
1196. </template><HelloWorld />
1197. </template><template>
1198. <template>
1199.   <HelloWorld />
1200. </template><HelloWorld />
1201. </template><template>
1202. <template>
1203.   <HelloWorld />
1204. </template><HelloWorld />
1205. </template><template>
1206. <template>
1207.   <HelloWorld />
1208. </template><HelloWorld />
1209. </template><template>
1210. <template>
1211.   <HelloWorld />
1212. </template><HelloWorld />
1213. </template><template>
1214. <template>
1215.   <HelloWorld />
1216. </template><HelloWorld />
1217. </template><template>
1218. <template>
1219.   <HelloWorld />
1220. </template><HelloWorld />
1221. </template><template>
1222. <template>
1223.   <HelloWorld />
1224. </template><HelloWorld />
1225. </template><template>
1226. <template>
1227.   <HelloWorld />
1228. </template><HelloWorld />
1229. </template><template>
1230. <template>
1231.   <HelloWorld />
1232. </template><HelloWorld />
1233. </template><template>
1234. <template>
1235.   <HelloWorld />
1236. </template><HelloWorld />
1237. </template><template>
1238. <template>
1239.   <HelloWorld />
1240. </template><HelloWorld />
1241. </template><template>
1242. <template>
1243.   <HelloWorld />
1244. </template><HelloWorld />
1245. </template><template>
1246. <template>
1247.   <HelloWorld />
1248. </template><HelloWorld />
1249. </template><template>
1250. <template>
1251.   <HelloWorld />
1252. </template><HelloWorld />
1253. </template><template>
1254. <template>
1255.   <HelloWorld />
1256. </template><HelloWorld />
1257. </template><template>
1258. <template>
1259.   <HelloWorld />
1260. </template><HelloWorld />
1261. </template><template>
1262. <template>
1263.   <HelloWorld />
1264. </template><HelloWorld />
1265. </template><template>
1266. <template>
1267.   <HelloWorld />
1268. </template><HelloWorld />
1269. </template><template>
1270. <template>
1271.   <HelloWorld />
1272. </template><HelloWorld />
1273. </template><template>
1274. <template>
1275.   <HelloWorld />
1276. </template><HelloWorld />
1277. </template><template>
1278. <template>
1279.   <HelloWorld />
1280. </template><HelloWorld />
1281. </template><template>
1282. <template>
1283.   <HelloWorld />
1284. </template><HelloWorld />
1285. </template>欢迎<template>
1286. <template>
1287.   <HelloWorld />
1288. </template><HelloWorld />
1289. </template><template>
1290. <template>
1291.   <HelloWorld />
1292. </template><HelloWorld />
1293. </template><template>
1294. <template>
1295.   <HelloWorld />
1296. </template><HelloWorld />
1297. </template><template>
1298. <template>
1299.   <HelloWorld />
1300. </template><HelloWorld />
1301. </template><template>
1302. <template>
1303.   <HelloWorld />
1304. </template><HelloWorld />
1305. </template><template>
1306. <template>
1307.   <HelloWorld />
1308. </template><HelloWorld />
1309. </template><template>
1310. <template>
1311.   <HelloWorld />
1312. </template><HelloWorld />
1313. </template><template>
1314. <template>
1315.   <HelloWorld />
1316. </template><HelloWorld />
1317. </template><template>
1318. <template>
1319.   <HelloWorld />
1320. </template><HelloWorld />
1321. </template><template>
1322. <template>
1323.   <HelloWorld />
1324. </template><HelloWorld />
1325. </template>

复制代码

App.vue 代码如下

1. <template>
2. <template>
3.   <HelloWorld />
4. </template><HelloWorld />
5. </template>

复制代码

ps：页面中的图标，可以用任何小图标替换（也可以删除）。
运行项目

 下一篇：Vue3菜单和路由的结合使用
 
后端WebApi 预览地址：http://139.155.137.144:8880/swagger/index.html
前端vue 预览地址：http://139.155.137.144:8881
关注公众号：发送【权限】，获取前后端代码
有兴趣的朋友，请关注我微信公众号吧(*^▽^*)。

关注我：一个全栈多端的宝藏博主，定时分享技术文章，不定时分享开源项目。关注我，带你认识不一样的程序世界

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！