feat(dayjs): dayjs 引入并全局挂载

Author: ZYCHOOO

README.md

@@ -83,6 +83,7 @@ vue-h5-template
 - [vue-router](#router)
 - [本地存储 storage 封装](#storage)
 - [哀悼模式](#mourn)
+- [dayjs 处理时间](#dayjs)
 
 ### <span id="env">⚙️ 环境变量配置</span>
 
@@ -841,6 +842,7 @@ router.beforeEach((to, from, next) => {
 ### <span id="mourn">🕯️ 哀悼模式</span>
 
 通过 filter.grayscale() 实现页面哀悼模式
+
 2022/11/30 祝长者一路走好 👓🕯️
 
 ```css
@@ -859,6 +861,31 @@ router.beforeEach((to, from, next) => {
 1. 在路由拼接 mourn=true， 项目全页面会进入哀悼模式
 2. 通过 `utils/index` 中 `isMournMode` 和 `mixins.scss` 中的样式，对特定页面开启哀悼模式，如首页 `home/index.vue`
 
+[🔙 返回顶部](#catalogue)
+
+### <span id="dayjs">⚙️ dayjs 处理时间</span>
+
+本项目引入 dayjs 并已在全局挂载，可直接使用
+
+```javascript
+<template>
+  <div class="wrapper">
+    {{ proxy.$dayjs(new Date()).format('YY-MM-DD HH:mm:ss') }}
+  </div>
+</template>
+
+<script setup>
+import { computed, getCurrentInstance } from 'vue'
+
+const { proxy } = getCurrentInstance()
+
+const currentTime = computed(() => {
+  return proxy.$dayjs(new Date()).format('YY-MM-DD HH:mm:ss')
+})
+
+</script>
+```
+
 ---
 
 # 鸣谢

package-lock.json

@@ -37,6 +37,7 @@
     "babel-eslint": "^10.1.0",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "cz-customizable": "^6.3.0",
+    "dayjs": "^1.11.7",
     "eruda": "^2.5.0",
     "eslint": "^6.7.2",
     "eslint-plugin-import": "^2.20.2",

package.json

@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import dayjs from 'dayjs'
 
 import { initDebugTool } from '@/utils/debug'
 import { initMockServer } from '@/mock/mock-server'
@@ -17,4 +18,7 @@ import '@/router/permission'
 initDebugTool()
 initMockServer()
 
-createApp(App).use(store).use(router).use(Vant).mount('#app')
+const app = createApp(App)
+
+app.config.globalProperties.$dayjs = dayjs
+app.use(store).use(router).use(Vant).mount('#app')

src/main.js

@@ -40,13 +40,17 @@ function mockXHR () {
   }
 
   for (const i of mocks) {
-    Mock.mock(new RegExp(i.url), i.type || 'get', XHR2ExpressReqWrap(i.response))
+    Mock.mock(
+      new RegExp(i.url),
+      i.type || 'get',
+      XHR2ExpressReqWrap(i.response)
+    )
   }
 }
 
 export function initMockServer () {
   const NEED_MOCK = getEnvValue('VUE_APP_NEED_MOCK')
-  if (NEED_MOCK) {
+  if (NEED_MOCK === 'true') {
     mockXHR()
   }
 }