|
|
<!DOCTYPE html>
|
|
|
<!-- 定义文档类型为HTML5，告知浏览器按照HTML5的标准来解析和渲染此页面 -->
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<!-- 设置字符编码为UTF-8-->
|
|
|
<!--确保页面中的各种字符（包括中文、特殊符号等）能够正确显示，避免出现乱码问题 -->
|
|
|
<meta charset="utf-8">
|
|
|
<!-- 强制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">
|
|
|
<!-- 根据是否是生产环境设置标题，htmlWebpackPlugin.options.isProd是一个布尔值（通过构建工具的插件配置传入），如果是生产环境（isProd为true），则标题只显示“电商后台管理系统”，如果是非生产环境（isProd为false），标题会显示“dev - 电商后台管理系统”，方便在开发阶段和正式上线阶段区分页面 -->
|
|
|
<title><%= htmlWebpackPlugin.options.isProd? '' : 'dev - ' %>电商后台管理系统</title>
|
|
|
|
|
|
<% if(htmlWebpackPlugin.options.isProd){ %>
|
|
|
<!-- 如果是生产环境，加载nprogress的样式表文件。nprogress通常用于在页面加载、路由切换等操作时显示进度条，这里通过CDN（内容分发网络）引入其最小化的样式表文件，以减少文件体积并提升加载速度 -->
|
|
|
<link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
|
|
|
<!-- 加载富文本编辑器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.css），Quill提供了不同的主题样式，“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是一个基于Vue.js的UI组件库，提供了丰富的组件（如按钮、表单、表格等）来快速构建页面界面，这里引入其主题样式文件（theme-chalk/index.css），使其组件按照设定的样式显示 -->
|
|
|
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
|
|
|
|
|
<!-- 加载Vue.js库，通过CDN引入Vue.js的最小化版本（vue.min.js），Vue.js是一个用于构建用户界面的渐进式JavaScript框架，是整个项目实现响应式界面、组件化开发等功能的核心基础 -->
|
|
|
<script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
|
|
|
<!-- 加载Vue Router库，同样通过CDN引入其最小化版本（vue-router.min.js），Vue Router用于在Vue.js项目中实现路由功能，即管理页面之间的跳转和导航逻辑 -->
|
|
|
<script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
|
|
|
<!-- 加载Axios库，用于HTTP请求，通过CDN引入最小化版本（axios.min.js），Axios可以方便地在JavaScript中发起各种HTTP请求（如GET、POST等），用于与后端服务器进行数据交互 -->
|
|
|
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
|
|
|
<!-- 加载Lodash库，提供实用函数，通过CDN引入最小化版本（lodash.min.js），Lodash包含了大量用于操作数组、对象、字符串等数据类型的实用函数，能帮助简化开发过程中的一些复杂数据处理逻辑 -->
|
|
|
<script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
|
|
|
<!-- 加载ECharts库，用于数据可视化，通过CDN引入最小化版本（echarts.min.js），ECharts可以帮助将数据以各种图表（如柱状图、折线图、饼图等）的形式展示出来，方便直观地分析和呈现数据 -->
|
|
|
<script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
|
|
|
<!-- 加载nprogress的JavaScript文件，与前面加载的样式表文件配合使用，用于在页面加载、操作过程中控制进度条的显示逻辑，实现动态的进度展示效果 -->
|
|
|
<script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
|
|
|
<!-- 加载富文本编辑器Quill的JavaScript文件，使前面引入的Quill样式表生效，并且为页面赋予富文本编辑的功能，让用户可以在页面中进行文本的编辑操作 -->
|
|
|
<script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
|
|
|
<!-- 加载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样式表对应的组件具备交互功能，-->
|
|
|
<!--从而可以在页面中使用Element UI提供的各种UI组件来构建页面界面 -->
|
|
|
<script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
|
|
|
|
|
|
<% } %>
|
|
|
|
|
|
</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>
|
|
|
</noscript>
|
|
|
<!-- Vue应用挂载点，这是Vue.js项目中用于将Vue实例挂载到DOM节点上的标识，后续通过JavaScript代码会将创建的Vue实例挂载到这个id为“app”的div元素上，使得Vue应用的内容能够渲染显示在页面中 -->
|
|
|
<div id="app"></div>
|
|
|
<!-- 构建后的文件将自动注入到此处，意味着通过构建工具（如Webpack等）打包生成的JavaScript、CSS等文件，会按照配置自动插入到这个位置，实现页面的最终整合和功能呈现 -->
|
|
|
</body>
|
|
|
</html> |
