开发demo时遇到的一些问题总结
# 外部js包的引入
由于项目使用的技术为后端SpringBoot+前端Vue，并不能像原生js那样引入资源包，需要在Vue的index.html 文件中使用script标签引入，另外，也可以通过import的方式在组件中进行引入，但这样若js代码存在错误将无法通过编译
index.html:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon2.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<script src="/static/js/jquery-1.10.2.js"></script>
<script src="/static/js/uploadfile/jquery.filer.min.js" type="text/javascript"></script>
<script src="/static/js/layui/layui.js"></script>
<script src="/static/js/initApi.js"></script>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
</body>
<script src="/static/Cesium/Cesium.js"></script>
<script src="/static/Cesium/BIMGISEngine.js"></script>
</html>
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
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
# Vue中外部js代码在组件未完全加载时调用导致not define问题
将相关的调用js代码的语句放在mount方法中，这样只有在界面加载完毕后才会执行这些语句
另外，Vue中的方法、变量不只能在export default中定义，也可以直接在script标签下面使用原生js方式定义
# Vue中的vh、vw
vh、vw和px一样，在Vue中是一种距离度量单位，根据这段时间的使用，它们分别在高度和宽度上能够适应当前的div大小（包括在不同的显示器上）， 100vh指的应该就是高度拉满，100vw指的就是宽度拉满，具体的使用理解目前就这些
# element-plus单页面多菜单的菜单项高亮问题
设置:default-active="$route.path"，这个应该是设定默认激活菜单项等于后面的路由，而$route.path返回的就是当前的路由
编辑 (opens new window)
上次更新: 2024/05/30, 07:49:34