From e350a527a629bebd5f5e1e8a40ff0e5c43925858 Mon Sep 17 00:00:00 2001 From: lyt <1105290566@qq.com> Date: Fri, 25 Dec 2020 18:15:04 +0800 Subject: [PATCH] =?UTF-8?q?'admin-12.25:=E6=96=B0=E5=A2=9E=E8=B7=AF?= =?UTF-8?q?=E7=94=B1=E9=85=8D=E7=BD=AE=EF=BC=8C=E5=AE=9E=E7=8E=B0=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E8=B7=B3=E8=BD=AC'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../docs/config/README.md | 83 ++ .../docs/guide/README.md | 12 + .../docs/update/README.md | 3 + vue-admin-wonderful-next/package.json | 3 +- vue-admin-wonderful-next/src/App.vue | 1234 +---------------- vue-admin-wonderful-next/src/main.ts | 5 +- vue-admin-wonderful-next/src/router/index.ts | 41 +- .../src/utils/formatTime.ts | 118 ++ .../src/views/home/index.vue | 9 + .../src/views/layout/index.vue | 10 + .../src/views/login/index.vue | 3 + .../src/views/login/mock.ts | 32 + 12 files changed, 316 insertions(+), 1237 deletions(-) create mode 100644 vue-admin-wonderful-next/src/utils/formatTime.ts create mode 100644 vue-admin-wonderful-next/src/views/home/index.vue create mode 100644 vue-admin-wonderful-next/src/views/layout/index.vue create mode 100644 vue-admin-wonderful-next/src/views/login/index.vue create mode 100644 vue-admin-wonderful-next/src/views/login/mock.ts diff --git a/vue-admin-wonderful-next-docs/docs/config/README.md b/vue-admin-wonderful-next-docs/docs/config/README.md index 6d501260..ac0f1a8d 100644 --- a/vue-admin-wonderful-next-docs/docs/config/README.md +++ b/vue-admin-wonderful-next-docs/docs/config/README.md @@ -269,4 +269,87 @@ createApp(App).use(ElementPlus).mount('#app') ::: tip 提示 请移步顶部导航 `主题` 中查看详细内容 +::: + +## 安装 vue-router-next +#### 1、cmd 安装 + +- [vue-router-next 代码仓库（github）](https://github.com/vuejs/vue-router-next) +- [vue-router-next 文档地址](https://next.router.vuejs.org/) + +```bash +cnpm install vue-router@4 --save +``` + +#### 2、页面中使用 + +- 2.1、页面下新增文件夹 `src/router/index.ts` + +index.ts 中写入： + +```ts +import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router" + +const staticRoutes: Array = [ + { + path: '/', + name: 'home', + component: () => import('/@/views/layout/index.vue'), + redirect: '/home', + meta: { + title: '首页' + }, + children: [{ + path: '/home', + name: 'home', + component: () => import('/@/views/home/index.vue'), + meta: { + title: '首页' + } + }] + }, + { + path: '/login', + name: 'login', + component: () => import('/@/views/login/index.vue'), + meta: { + title: '登陆' + } + }, + { + path: '/:pathMatch(.*)', + redirect: '/' + } +] + +const router = createRouter({ + history: createWebHashHistory(), + routes: staticRoutes +}) + +export default router +``` + +- 2.2、main.ts 中引入 `src/router/index.ts` + +```ts +import { createApp } from 'vue' +import App from './App.vue' +import router from './router' + +import ElementPlus from 'element-plus' +import 'element-plus/lib/theme-chalk/index.css' +import '/@/theme/index.scss' +import { locale } from 'element-plus' + +createApp(App).use(router).use(ElementPlus, { locale }).mount('#app') +``` + +- 2.3、页面测试 +地址栏输入 2.1 中的路由地址 `http://localhost:8080/#/login`，出现 `login` 中的文字就证明配置成功了。 + +::: tip 提示 +地址栏带 `#号` 与不带 `#号` ，参考：[next.router history-mode.html](https://next.router.vuejs.org/guide/essentials/history-mode.html) + +访问路由器和内部的当前路由 setup：[Vue路由器和Composition API](https://next.router.vuejs.org/guide/advanced/composition-api.html#accessing-the-router-and-current-route-inside-setup) ::: \ No newline at end of file diff --git a/vue-admin-wonderful-next-docs/docs/guide/README.md b/vue-admin-wonderful-next-docs/docs/guide/README.md index fc82aece..939c1dfa 100644 --- a/vue-admin-wonderful-next-docs/docs/guide/README.md +++ b/vue-admin-wonderful-next-docs/docs/guide/README.md @@ -3,3 +3,15 @@ VuePress is composed of two parts: a [minimalistic static site generator](https://github.com/vuejs/vuepress/tree/master/packages/%40vuepress/core) with a Vue-powered [theming system](https://v1.vuepress.vuejs.org/theme/) and [Plugin API](https://v1.vuepress.vuejs.org/plugin/), and a [default theme](https://v1.vuepress.vuejs.org/theme/default-theme-config.html) optimized for writing technical documentation. It was created to support the documentation needs of Vue's own sub projects. Each page generated by VuePress has its own pre-rendered static HTML, providing great loading performance and is SEO-friendly. Once the page is loaded, however, Vue takes over the static content and turns it into a full Single-Page Application (SPA). Additional pages are fetched on demand as the user navigates around the site. + +帮助你获取最新的开发文档： + +- [vue3.0 中文文档地址]: https://vue3js.cn/docs/zh/ +- [element-plus 中文文档地址]: https://element-plus.org/#/zh-CN +- [composition-Api 中文文档地址]: https://composition-api.vuejs.org/zh/ +- [vue-router-next 文档地址]: https://next.router.vuejs.org/ +- [next.vuex 文档地址]: https://next.vuex.vuejs.org/ +- [vite 源码]: https://github.com/vitejs/vite +- [vite 中文文档地址（非官方版本）]: https://vite-design.surge.sh/guide/chinese-doc.html +- [vue-i18n-next]: https://vue-i18n-next.intlify.dev/ +- [composition-api-vue-i18n-next]: https://vue-i18n-next.intlify.dev/advanced/composition.html#local-scope \ No newline at end of file diff --git a/vue-admin-wonderful-next-docs/docs/update/README.md b/vue-admin-wonderful-next-docs/docs/update/README.md index 3fd5ddb1..f91d9b05 100644 --- a/vue-admin-wonderful-next-docs/docs/update/README.md +++ b/vue-admin-wonderful-next-docs/docs/update/README.md @@ -2,6 +2,9 @@ sidebar: auto --- # 更新日志 +## 2020-12-25 +- 新增 路由配置及编写对应开发文档 + ## 2020-12-22 - 处理 [element-plus](https://element-plus.gitee.io/#/zh-CN/component/icon) 打包后字体图标 404 问题 - 编写 对应 `3.x` 主题文档编写 diff --git a/vue-admin-wonderful-next/package.json b/vue-admin-wonderful-next/package.json index 658fe293..b85261d5 100644 --- a/vue-admin-wonderful-next/package.json +++ b/vue-admin-wonderful-next/package.json @@ -7,7 +7,8 @@ }, "dependencies": { "element-plus": "^v1.0.1-beta.14", - "vue": "^3.0.4" + "vue": "^3.0.4", + "vue-router": "^4.0.1" }, "devDependencies": { "@vue/compiler-sfc": "^3.0.4", diff --git a/vue-admin-wonderful-next/src/App.vue b/vue-admin-wonderful-next/src/App.vue index cd1f17f4..98240aef 100644 --- a/vue-admin-wonderful-next/src/App.vue +++ b/vue-admin-wonderful-next/src/App.vue @@ -1,1235 +1,3 @@ - - - - \ No newline at end of file diff --git a/vue-admin-wonderful-next/src/main.ts b/vue-admin-wonderful-next/src/main.ts index ee169f25..071a4a04 100644 --- a/vue-admin-wonderful-next/src/main.ts +++ b/vue-admin-wonderful-next/src/main.ts @@ -1,10 +1,11 @@ import { createApp } from 'vue' import App from './App.vue' +import router from './router' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' import '/@/theme/index.scss' -import locale from 'element-plus/lib/locale/lang/zh-cn' +import { locale } from 'element-plus' -createApp(App).use(ElementPlus, { size: 'small', locale }).mount('#app') +createApp(App).use(router).use(ElementPlus, { locale }).mount('#app') diff --git a/vue-admin-wonderful-next/src/router/index.ts b/vue-admin-wonderful-next/src/router/index.ts index 060eb147..184de5b2 100644 --- a/vue-admin-wonderful-next/src/router/index.ts +++ b/vue-admin-wonderful-next/src/router/index.ts @@ -1 +1,40 @@ -const dd: string = '' \ No newline at end of file +import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router" + +const staticRoutes: Array = [ + { + path: '/', + name: 'home', + component: () => import('/@/views/layout/index.vue'), + redirect: '/home', + meta: { + title: '首页' + }, + children: [{ + path: '/home', + name: 'home', + component: () => import('/@/views/home/index.vue'), + meta: { + title: '首页' + } + }] + }, + { + path: '/login', + name: 'login', + component: () => import('/@/views/login/index.vue'), + meta: { + title: '登陆' + } + }, + { + path: '/:pathMatch(.*)', + redirect: '/' + } +] + +const router = createRouter({ + history: createWebHashHistory(), + routes: staticRoutes +}) + +export default router \ No newline at end of file diff --git a/vue-admin-wonderful-next/src/utils/formatTime.ts b/vue-admin-wonderful-next/src/utils/formatTime.ts new file mode 100644 index 00000000..6e59fa07 --- /dev/null +++ b/vue-admin-wonderful-next/src/utils/formatTime.ts @@ -0,0 +1,118 @@ +/* + * 年(Y) 可用1-4个占位符 + * 月(m)、日(d)、小时(H)、分(M)、秒(S) 可用1-2个占位符 + * 星期(W) 可用1-3个占位符 + * 季度(q为阿拉伯数字，Q为中文数字)可用1或4个占位符 + * + * let date = new Date() + * formatDate(date, "YYYY-mm-dd HH:MM:SS") // 2020-02-09 14:04:23 + * formatDate(date, "YYYY-mm-dd HH:MM:SS Q") // 2020-02-09 14:09:03 一 + * formatDate(date, "YYYY-mm-dd HH:MM:SS WWW") // 2020-02-09 14:45:12 星期日 + * formatDate(date, "YYYY-mm-dd HH:MM:SS QQQQ") // 2020-02-09 14:09:36 第一季度 + * formatDate(date, "YYYY-mm-dd HH:MM:SS WWW QQQQ") // 2020-02-09 14:46:12 星期日 第一季度 + */ +export function formatDate(date: Date, format: string) { + let we = date.getDay() // 星期 + let qut = Math.floor((date.getMonth() + 3) / 3).toString() // 季度 + const opt: any = { + "Y+": date.getFullYear().toString(), // 年 + "m+": (date.getMonth() + 1).toString(), // 月(月份从0开始，要+1) + "d+": date.getDate().toString(), // 日 + "H+": date.getHours().toString(), // 时 + "M+": date.getMinutes().toString(), // 分 + "S+": date.getSeconds().toString(), // 秒 + "q+": qut, // 季度 + } + // 中文数字 (星期) + const week: any = { + "0": "日", + "1": "一", + "2": "二", + "3": "三", + "4": "四", + "5": "五", + "6": "六", + } + // 中文数字（季度） + const quarter: any = { + "1": "一", + "2": "二", + "3": "三", + "4": "四", + } + if (/(W+)/.test(format)) format = format.replace(RegExp.$1, RegExp.$1.length > 1 ? RegExp.$1.length > 2 ? "星期" + week[we] : "周" + week[we] : week[we]) + if (/(Q+)/.test(format)) format = format.replace(RegExp.$1, RegExp.$1.length == 4 ? "第" + quarter[qut] + "季度" : quarter[qut]) + for (let k in opt) { + let r = new RegExp("(" + k + ")").exec(format); + // 若输入的长度不为1，则前面补零 + if (r) format = format.replace(r[1], RegExp.$1.length == 1 ? opt[k] : opt[k].padStart(RegExp.$1.length, "0")) + } + return format +} + +/** + * 10秒： 10 * 1000 + * 1分： 60 * 1000 + * 1小时： 60 * 60 * 1000 + * 24小时：60 * 60 * 24 * 1000 + * 3天： 60 * 60* 24 * 1000 * 3 + * + * let data = new Date() + * formatPast(data) // 刚刚 + * formatPast(data - 11 * 1000) // 11秒前 + * formatPast(data - 2 * 60 * 1000) // 2分钟前 + * formatPast(data - 60 * 60 * 2 * 1000) // 2小时前 + * formatPast(data - 60 * 60 * 2 * 1000) // 2小时前 + * formatPast(data - 60 * 60 * 71 * 1000) // 2天前 + * formatPast("2020-06-01") // 2020-06-01 + * formatPast("2020-06-01", "YYYY-mm-dd HH:MM:SS WWW QQQQ") // 2020-06-01 08:00:00 星期一 第二季度 + */ +export function formatPast(param: any, format: string = "YYYY-mm-dd") { + // 传入格式处理、存储转换值 + let t: any, s: any + // 获取js 时间戳 + let time: any = new Date().getTime() + // 是否是对象 + typeof param === "string" || "object" ? (t = new Date(param).getTime()) : (t = param) + // 当前时间戳 - 传入时间戳 + time = Number.parseInt(`${time - t}`) + if (time < 10000) { + // 10秒内 + return "刚刚"; + } else if (time < 60000 && time >= 10000) { + // 超过10秒少于1分钟内 + s = Math.floor(time / 1000); + return `${s}秒前`; + } else if (time < 3600000 && time >= 60000) { + // 超过1分钟少于1小时 + s = Math.floor(time / 60000); + return `${s}分钟前`; + } else if (time < 86400000 && time >= 3600000) { + // 超过1小时少于24小时 + s = Math.floor(time / 3600000); + return `${s}小时前`; + } else if (time < 259200000 && time >= 86400000) { + // 超过1天少于3天内 + s = Math.floor(time / 86400000); + return `${s}天前`; + } else { + // 超过3天 + let date = typeof param === "string" || "object" ? new Date(param) : param; + return formatDate(date, format); + } +} + +/** + * formatAxis(new Date()) // 上午好 + */ +export function formatAxis(param: any) { + let hour: number = new Date(param).getHours() + if (hour < 6) return "凌晨好" + else if (hour < 9) return "早上好" + else if (hour < 12) return "上午好" + else if (hour < 14) return "中午好" + else if (hour < 17) return "下午好" + else if (hour < 19) return "傍晚好" + else if (hour < 22) return "晚上好" + else return "夜里好" +} diff --git a/vue-admin-wonderful-next/src/views/home/index.vue b/vue-admin-wonderful-next/src/views/home/index.vue new file mode 100644 index 00000000..1843eded --- /dev/null +++ b/vue-admin-wonderful-next/src/views/home/index.vue @@ -0,0 +1,9 @@ + + + \ No newline at end of file diff --git a/vue-admin-wonderful-next/src/views/layout/index.vue b/vue-admin-wonderful-next/src/views/layout/index.vue new file mode 100644 index 00000000..7337be95 --- /dev/null +++ b/vue-admin-wonderful-next/src/views/layout/index.vue @@ -0,0 +1,10 @@ + + + \ No newline at end of file diff --git a/vue-admin-wonderful-next/src/views/login/index.vue b/vue-admin-wonderful-next/src/views/login/index.vue new file mode 100644 index 00000000..7bcf4435 --- /dev/null +++ b/vue-admin-wonderful-next/src/views/login/index.vue @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/vue-admin-wonderful-next/src/views/login/mock.ts b/vue-admin-wonderful-next/src/views/login/mock.ts new file mode 100644 index 00000000..dc3bbbd4 --- /dev/null +++ b/vue-admin-wonderful-next/src/views/login/mock.ts @@ -0,0 +1,32 @@ +export const classicQuotationsList: Array = [ + { + name: '颜渊', + comeFrom: '论语', + content: '自己不喜欢的，就不要强加给别人。饥寒是自己不喜欢的，不要把它强加给别人；耻辱是自己不喜欢的，也不要把它强加给别人。将心比心，推己及人，从自己的利与害想到对别人的利与害，多替别人着想，这是终生应该奉行的原则。' + }, + { + name: '荀子', + comeFrom: '劝学', + content: '木料经过木工用墨线（木工用具）划直线加工以后，就变直了；金属物品在磨刀石上磨砺后，就能锋利。人经过学习磨练，自我反省，就会变得聪慧明智，不犯错误，也越来越坚强。' + }, + { + name: '里仁', + comeFrom: '论语', + content: '见到贤人，就应该想着向他学习；看见不贤的人，便应该自己反省，对不如自己的人喜欢讥笑、轻视，因而沾沾自喜；对比自己强的人喜欢贬低，甚至嫉妒、畏惧退缩，害怕与他们交往：这都是不正确的态度。' + }, + { + name: '述而', + comeFrom: '论语', + content: '君子心地平坦宽广，小人却经常局促忧愁。君子襟怀坦白，安贫乐业，与人为善，知足常乐，所以能坦荡荡。小人欲念太多，患得患失，忧心忡忡，怨天尤人，局促不安，所以常心怀戚戚。' + }, + { + name: '老子', + comeFrom: '第六十四章', + content: '千里遥远的路程是从脚下第一步开始的。任何事情的成功都是从头开始，从小到大逐渐积累的。万事开头难，没有个开头就不会有结果。任何事情都要从一点一滴的小事开始做起。' + }, + { + name: '朱熹', + comeFrom: '训学斋规', + content: '读书有三到，谓心到，眼到，口到。心不在此，则眼看不仔细，心眼既不专一，却只漫浪诵读，决不能记，久也不能久也。三到之中，心到最急，心既到矣，眼口岂不到乎？' + } +] \ No newline at end of file