mhx

src/main-dev.js

@@ -49,17 +49,43 @@ Vue.config.productionTip = false
 // 组件全局注册 表格树
 Vue.component('tree-table', TreeTable)
 // 全局注册富文本编辑器
+// 引入并使用VueQuillEditor插件，该插件可能是一个富文本编辑器组件，用于Vue应用中的文本编辑功能。
 Vue.use(VueQuillEditor)
+
+// 定义一个全局过滤器，名为'dataFormat'。
+// 这个过滤器接收一个参数originVal，它可能是一个日期字符串或时间戳，用于格式化日期时间。
 Vue.filter('dataFormat', function (originVal) {
+  // 创建一个新的Date对象，将传入的originVal作为日期时间值。
   const dt = new Date(originVal)
 
+  // 从Date对象中获取年份，并存储在变量y中。
   const y = dt.getFullYear()
+  
+  // 从Date对象中获取月份（注意：月份是从0开始的，所以需要加1），
+  // 然后将月份转换为字符串，并使用padStart方法确保月份始终为两位数，不足两位时前面补0。
   const m = (dt.getMonth() + 1 + '').padStart(2, '0')
+  
+  // 从Date对象中获取日期，转换为字符串，并使用padStart方法确保日期始终为两位数。
   const d = (dt.getDate() + '').padStart(2, '0')
 
+  // 从Date对象中获取小时，转换为字符串，并使用padStart方法确保小时始终为两位数。
   const hh = (dt.getHours() + '').padStart(2, '0')
+  
+  // 从Date对象中获取分钟，转换为字符串，并使用padStart方法确保分钟始终为两位数。
   const mm = (dt.getMinutes() + '').padStart(2, '0')
+  
+  // 从Date对象中获取秒数，转换为字符串，并使用padStart方法确保秒数始终为两位数。
   const ss = (dt.getSeconds() + '').padStart(2, '0')
+
+  // 注意：此代码段在定义完所有时间部分后没有返回或拼接成格式化后的日期时间字符串。
+  // 通常情况下，您可能想要将y, m, d, hh, mm, ss拼接成一个格式化的字符串，例如：
+  // return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
+  // 但由于原代码没有这一步，所以在此注释中说明。
+})
+
+// 注意：为了让上述过滤器生效，您需要在Vue模板中通过管道符(|)使用它，
+// 例如：{{ someDateValue | dataFormat }}。但是，由于Vue 3中不推荐使用全局过滤器，
+// 如果您使用的是Vue 3，则可能需要考虑其他方法来实现相同的功能，如局部过滤器或计算属性。
   // yyyy-mm-dd hh:mm:ss
   return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
 })

src/main-prod.js

@@ -46,21 +46,56 @@ Vue.component('tree-table', TreeTable)
 // 全局注册富文本编辑器
 Vue.use(VueQuillEditor)
 // 全局时间过滤器
+// 定义一个全局过滤器，名为'dataFormat'。
+// 过滤器通常用于文本格式化。这里，它接收一个参数originVal，可能是一个日期时间值。
 Vue.filter('dataFormat', function (originVal) {
+  // 使用传入的originVal创建一个新的Date对象。
+  // 这允许我们利用Date对象的方法来获取年、月、日、时、分、秒等信息。
   const dt = new Date(originVal)
 
+  // 从Date对象中获取完整的年份，并存储在变量y中。
   const y = dt.getFullYear()
+  
+  // 从Date对象中获取月份（注意：月份是从0开始的，即0代表一月）。
+  // 因此，我们需要加1来得到正确的月份。
+  // 然后，将月份转换为字符串，并使用padStart方法确保月份始终为两位数，不足时前面补0。
   const m = (dt.getMonth() + 1 + '').padStart(2, '0')
+  
+  // 从Date对象中获取日期，并转换为字符串。
+  // 同样使用padStart方法确保日期始终为两位数。
   const d = (dt.getDate() + '').padStart(2, '0')
 
+  // 从Date对象中获取小时，并转换为字符串。
+  // 使用padStart方法确保小时始终为两位数。
   const hh = (dt.getHours() + '').padStart(2, '0')
+  
+  // 从Date对象中获取分钟，并转换为字符串。
+  // 使用padStart方法确保分钟始终为两位数。
   const mm = (dt.getMinutes() + '').padStart(2, '0')
+  
+  // 从Date对象中获取秒数，并转换为字符串。
+  // 使用padStart方法确保秒数始终为两位数。
   const ss = (dt.getSeconds() + '').padStart(2, '0')
-  // yyyy-mm-dd hh:mm:ss
+  
+  // 将年、月、日、时、分、秒按照'yyyy-mm-dd hh:mm:ss'的格式拼接成一个字符串。
+  // 然后，返回这个格式化后的日期时间字符串。
+  // 这使得过滤器可以在Vue模板中用来格式化日期时间值。
   return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
 })
 
+// 创建一个新的Vue实例。
+// 这是Vue应用的起点，它包含了整个应用的配置。
 new Vue({
+  // 将Vue Router实例作为router选项传入Vue实例。
+  // 这允许Vue应用支持路由功能，即页面之间的导航。
   router,
+  
+  // 使用render函数来渲染Vue组件。
+  // 这里，render函数接收一个创建元素的函数h作为参数。
+  // h函数是一个常用的约定，它来自于hyperscript，用于创建虚拟DOM元素。
+  // render函数返回App组件的虚拟DOM节点，这是Vue应用的根组件。
   render: h => h(App)
 }).$mount('#app')
+// 使用$mount方法将Vue实例挂载到DOM元素上。
+// 在这里，'#app'是挂载点的选择器，它指向HTML中id为'app'的元素。
+// 当Vue实例被挂载时，它会接管这个元素及其子元素，并将其转换为由Vue管理的虚拟DOM。