feature/cky
陈钶钰 5 months ago
parent 32d1ce6372
commit 18d7be26de

@ -1,58 +1,62 @@
<!DOCTYPE html>
<!-- 定义文档类型为HTML5 -->
<!-- 定义文档类型为HTML5告知浏览器按照HTML5的标准来解析和渲染此页面 -->
<html lang="en">
<head>
<!-- 设置字符编码为UTF-8 -->
<head>
<!-- 设置字符编码为UTF-8-->
<!--确保页面中的各种字符(包括中文、特殊符号等)能够正确显示,避免出现乱码问题 -->
<meta charset="utf-8">
<!-- 强制IE浏览器使用最新的渲染引擎 -->
<!-- 强制IE浏览器使用最新的渲染引擎目的是让IE浏览器尽可能以符合现代网页标准的方式来渲染页面内容提升页面在IE浏览器中的显示效果和兼容性 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 设置视口,确保页面在移动设备上正确显示 -->
<!-- 设置视口,确保页面在移动设备上正确显示。width=device-width表示视口宽度等于设备宽度initial-scale=1.0表示初始缩放比例为1也就是页面初始加载时按照原始尺寸显示不会进行缩放 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- 设置网站图标 -->
<!-- 设置网站图标href属性中的<%= BASE_URL %>是一个模板语法可能基于构建工具如Webpack等会被替换为实际的基础路径指向网站图标文件favicon.ico所在位置该图标会显示在浏览器标签页、书签栏等位置用于标识网站 -->
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!-- 根据是否是生产环境设置标题,生产环境不显示'dev - ' -->
<title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台管理系统</title>
<!-- 根据是否是生产环境设置标题,htmlWebpackPlugin.options.isProd是一个布尔值通过构建工具的插件配置传入如果是生产环境isProd为true则标题只显示“电商后台管理系统”如果是非生产环境isProd为false标题会显示“dev - 电商后台管理系统”,方便在开发阶段和正式上线阶段区分页面 -->
<title><%= htmlWebpackPlugin.options.isProd? '' : 'dev - ' %>电商后台管理系统</title>
<% if(htmlWebpackPlugin.options.isProd){ %>
<!-- 如果是生产环境加载nprogress的样式表文件 -->
<!-- 如果是生产环境加载nprogress的样式表文件。nprogress通常用于在页面加载、路由切换等操作时显示进度条这里通过CDN内容分发网络引入其最小化的样式表文件以减少文件体积并提升加载速度 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
<!-- 加载富文本编辑器Quill的样式表文件 -->
<!-- 加载富文本编辑器Quill的样式表文件Quill用于在网页中实现富文本编辑功能如编辑带有格式的文章、文档等此处通过CDN引入其核心样式文件quill.core.min.css用于定义基本的编辑区域样式等 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
<!-- 加载Quill的一种主题样式表文件quill.snow.min.cssQuill提供了不同的主题样式“snow”主题可能具有特定的外观风格比如按钮样式、文本框外观等用于给富文本编辑区域赋予相应的视觉效果 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
<!-- 加载Quill的另一种主题样式表文件quill.bubble.min.css与“snow”主题不同“bubble”主题有着别样的样式呈现可能用于满足不同的设计需求和用户体验要求 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />
<!-- 加载Element UI框架的样式表文件 -->
<!-- 加载Element UI框架的样式表文件Element UI是一个基于Vue.js的UI组件库提供了丰富的组件如按钮、表单、表格等来快速构建页面界面这里引入其主题样式文件theme-chalk/index.css使其组件按照设定的样式显示 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 加载Vue.js库 -->
<!-- 加载Vue.js库通过CDN引入Vue.js的最小化版本vue.min.jsVue.js是一个用于构建用户界面的渐进式JavaScript框架是整个项目实现响应式界面、组件化开发等功能的核心基础 -->
<script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
<!-- 加载Vue Router库 -->
<!-- 加载Vue Router库同样通过CDN引入其最小化版本vue-router.min.jsVue Router用于在Vue.js项目中实现路由功能即管理页面之间的跳转和导航逻辑 -->
<script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
<!-- 加载Axios库用于HTTP请求 -->
<!-- 加载Axios库用于HTTP请求通过CDN引入最小化版本axios.min.jsAxios可以方便地在JavaScript中发起各种HTTP请求如GET、POST等用于与后端服务器进行数据交互 -->
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<!-- 加载Lodash库提供实用函数 -->
<!-- 加载Lodash库提供实用函数通过CDN引入最小化版本lodash.min.jsLodash包含了大量用于操作数组、对象、字符串等数据类型的实用函数能帮助简化开发过程中的一些复杂数据处理逻辑 -->
<script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
<!-- 加载ECharts库用于数据可视化 -->
<!-- 加载ECharts库用于数据可视化通过CDN引入最小化版本echarts.min.jsECharts可以帮助将数据以各种图表如柱状图、折线图、饼图等的形式展示出来方便直观地分析和呈现数据 -->
<script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
<!-- 加载nprogress的JavaScript文件 -->
<!-- 加载nprogress的JavaScript文件,与前面加载的样式表文件配合使用,用于在页面加载、操作过程中控制进度条的显示逻辑,实现动态的进度展示效果 -->
<script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
<!-- 加载富文本编辑器Quill的JavaScript文件 -->
<!-- 加载富文本编辑器Quill的JavaScript文件使前面引入的Quill样式表生效并且为页面赋予富文本编辑的功能让用户可以在页面中进行文本的编辑操作 -->
<script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
<!-- 加载Vue Quill Editor的JavaScript文件用于Vue集成Quill -->
<!-- 加载Vue Quill Editor的JavaScript文件用于Vue集成Quill使得Quill富文本编辑器能够更好地与Vue.js项目结合使用方便在Vue组件中调用和操作Quill的功能 -->
<script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>
<!-- 加载Element UI框架的JavaScript文件 -->
<!-- 加载Element UI框架的JavaScript文件使前面引入的Element UI样式表对应的组件具备交互功能-->
<!--从而可以在页面中使用Element UI提供的各种UI组件来构建页面界面 -->
<script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
<% } %>
</head>
<body>
<!-- 如果浏览器禁用JavaScript显示警告信息 -->
</head>
<body>
<!-- 如果浏览器禁用JavaScript显示警告信息告知用户此电商后台管理系统需要启用JavaScript才能正常工作引导用户开启JavaScript功能以便继续使用页面 -->
<noscript>
<strong>We're sorry but vue_shop_admin doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
<strong>We're sorry but vue_shop_admin doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<!-- Vue应用挂载点 -->
<!-- Vue应用挂载点这是Vue.js项目中用于将Vue实例挂载到DOM节点上的标识后续通过JavaScript代码会将创建的Vue实例挂载到这个id为“app”的div元素上使得Vue应用的内容能够渲染显示在页面中 -->
<div id="app"></div>
<!-- 构建后的文件将自动注入到此处 -->
</body>
<!-- 构建后的文件将自动注入到此处意味着通过构建工具如Webpack等打包生成的JavaScript、CSS等文件会按照配置自动插入到这个位置实现页面的最终整合和功能呈现 -->
</body>
</html>

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save