✨ feat(router): 添加简单路由

增加路由示例首页loading 更新docs
AnyFork · Jul 22, 2023 · 177f950 · 177f950
1 parent 0a15e8c
commit 177f950
Show file tree

Hide file tree

Showing 15 changed files with 121 additions and 382 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -7,3 +7,4 @@ node_modules
 dist
 public
 .husky
+index.html
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -37,6 +37,10 @@ module.exports = {
         // 关闭ts声明的方法之前的空格校验
         '@typescript-eslint/space-before-function-paren': 'off',
         // 关闭ts类型单行和多行结尾分隔符
-        '@typescript-eslint/member-delimiter-style': 'off'
+        '@typescript-eslint/member-delimiter-style': 'off',
+        // 关闭组件以单个单次命名限制
+        'vue/multi-word-component-names': 'off',
+        // 关闭强制布尔表达式
+        '@typescript-eslint/strict-boolean-expressions': 'off'
     }
 }
diff --git a/README.md b/README.md
@@ -16,7 +16,7 @@
 一直以来，每次采用`vite`搭建`Vue3`项目时，都苦于配置`Eslint`代码校验规范，网上的水贴层出不穷，你抄我的，我粘贴你的，没有几个是有用的，不仅容易误导他人，还浪费大量的时间排查问题。最近花了一些时间，查阅了很多资料，自己也通过反复验证，决定自己搭建一个简单的模板，集成好日常代码开发规范和提交规范，把常用
 的`Vite`插件都配置好，在以后创建项目时直接使用，避免重复造轮子，同时也供他人参考。
 
-这是一个基于Vite4.X + Vue3.X + TypeScript + Pinia + Naive UI + Unocss + Eslint + Prettier + husky + lint-staged + commitlint + commitizen+ cz-customizable + conventional-changelog 构建的标准的Vue3项目模板。整个项目包依赖采用`pnpm`进行依赖管理，`Node`版本为16.17.0, 同时也集成了项目中常用的插件，包含组件自动导入API
+这是一个基于Vite4.X+Vue3.X+TypeScript+Naive UI+Pinina+VueRouter+Unocss+Eslint+Prettier+husky+lint-staged+commitlint+commitizen+cz-customizable+conventional-changelog构建的标准的vue项目模板。整个项目包依赖采用`pnpm`进行依赖管理，`Node`版本为16.17.0, 同时也集成了项目中常用的插件，包含组件自动导入API
 
 ## 二 项目创建
 
@@ -148,7 +148,6 @@ export default defineConfig(){
         inject: {
           data: {
             title: env.VITE_SYSTEM_TITLE,
-            loading: env.VITE_SYSTEM_LOADING,
             description: env.VITE_SYSTEM_DESC
           }
         }
@@ -159,46 +158,27 @@ export default defineConfig(){
 ```
 `inject`中的data就是要注入的变量参数，`env`为环境变量参数。可以通过一下代码获取到：
 ```ts
+import { loadEnv } from 'vite'
 const env = loadEnv(mode, process.cwd())
-const { VITE_ICON_PREFFIX, VITE_ICON_LOCAL_PREFFIX } = env
 ```
 2 修改`index.html`文件，将`vite-plugin-html`插件注入的数据，通过`ejs`语法写入`index.html`,如下:
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="zh-CN">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <meta name="description" content="<%=description%>" />
-  <link rel="icon" type="image/svg+xml" href="/logo.svg" />
-  <link rel="stylesheet" href="/resource/loading.css" />
-  <title>
-    <%= title %>
-  </title>
-</head>
-
-<body>
-  <div id="app">
-    <div class="loading-container">
-      <div id="loadingLogo" class="loading-svg"></div>
-      <div class="loading-spin__container">
-        <div class="loading-spin">
-          <div class="left-0 top-0 loading-spin-item"></div>
-          <div class="left-0 bottom-0 loading-spin-item loading-delay-500"></div>
-          <div class="right-0 top-0 loading-spin-item loading-delay-1000"></div>
-          <div class="right-0 bottom-0 loading-spin-item loading-delay-1500"></div>
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="description" content="<%=description%>" />
+        <link rel="icon" type="image/svg+xml" href="/logo.svg" />
+        <title><%= title %></title>
+    </head>
+
+    <body>
+        <div id="app">
+            <div id="loading"></div>
         </div>
-      </div>
-      <div class="loading-title">
-        <%= loading %>
-      </div>
-    </div>
-    <script src="/resource/loading.js"></script>
-  </div>
-  <script type="module" src="/src/main.ts"></script>
-</body>
-
+        <script type="module" src="/src/main.ts"></script>
+    </body>
 </html>
 ```
 #### 5 vite-plugin-svg-icons

diff --git a/index.html b/index.html
@@ -5,12 +5,13 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta name="description" content="<%=description%>" />
         <link rel="icon" type="image/svg+xml" href="/logo.svg" />
-        <link rel="stylesheet" href="/resource/loading.css" />
         <title><%= title %></title>
     </head>
 
     <body>
-        <div id="app"></div>
+        <div id="app">
+            <div id="loading"></div>
+        </div>
         <script type="module" src="/src/main.ts"></script>
     </body>
 </html>
diff --git a/src/App.vue b/src/App.vue
@@ -1,30 +1,18 @@
 <template>
-    <div class="py-100px">
-        <img src="/logo.svg" class="logo w-150px" alt="Vite logo" />
-        <n-h2>一款简洁，符合通用标准的，基于Vite构建的Vue3项目模板</n-h2>
-        <div>
-            <n-text>下面是操作useCounterStore进行计数，并实现持久化的例子</n-text>
-            <n-p>
-                <n-button type="primary" @click="counter.increment">点我加1</n-button>
-                <n-text class="px-20px text-20px">{{ count }}</n-text>
-            </n-p>
-        </div>
-        <div class="pt-20px">
-            <n-text>下面是通过SVG名称，动态加载本地和iconify线上SVG的例子</n-text>
-            <n-p class="flex-row-center h-30px gap-10px">
-                <n-text>本地Svg</n-text>
-                <SvgIcon localIcon="logo" class="w-24px h-24px"></SvgIcon>
-            </n-p>
-            <n-p class="flex-row-center h-30px gap-5px">
-                <n-text>Iconify</n-text>
-                <SvgIcon icon="fluent-mdl2:react-logo" class="w-24px h-24px"></SvgIcon>
-                <SvgIcon :icon="'fluent-mdl2:react-logo'" class="w-24px h-24px text-red"></SvgIcon>
-            </n-p>
-        </div>
-    </div>
+    <NConfigProvider :locale="zhCN" :date-locale="dateZhCN" preflight-style-disabled>
+        <n-loading-bar-provider>
+            <n-dialog-provider>
+                <n-notification-provider>
+                    <n-message-provider>
+                        <RouterView></RouterView>
+                    </n-message-provider>
+                </n-notification-provider>
+            </n-dialog-provider>
+        </n-loading-bar-provider>
+        <NGlobalStyle />
+    </NConfigProvider>
 </template>
+
 <script setup lang="ts">
-import SvgIcon from './components/SvgIcon.vue'
-const counter = useCounterStore()
-const { count } = storeToRefs(counter)
+import { zhCN, dateZhCN } from 'naive-ui'
 </script>
diff --git a/src/style.css → src/assets/style.css b/src/style.css → src/assets/style.css
diff --git a/src/assets/svg/no-permission.svg b/src/assets/svg/no-permission.svg
diff --git a/src/components/common/AppLoading.vue b/src/components/common/AppLoading.vue
@@ -0,0 +1,18 @@
+<template>
+    <div class="flex-row-center flex-col">
+        <SvgIcon localIcon="logo" class="w-128px h-128px"></SvgIcon>
+        <div class="w-56px h-56px my-36px">
+            <div class="relative h-full animate-spin">
+                <div v-for="(item, index) in lodingClasses" :key="index" class="absolute w-16px h-16px bg-primary rounded-8px animate-pulse" :class="item"></div>
+            </div>
+        </div>
+        <h2 class="text-28px font-500 text-#646464">{{ VITE_SYSTEM_LOADING }}</h2>
+    </div>
+</template>
+
+<script setup lang="ts" name="AppLoading">
+const { VITE_SYSTEM_LOADING } = import.meta.env
+const lodingClasses = ['left-0 top-0', 'left-0 bottom-0 animate-delay-500', 'right-0 top-0 animate-delay-1000', 'right-0 bottom-0 animate-delay-1500']
+const primaryCss = useCssVar('--primary-color')
+primaryCss.value = '52,199,89'
+</script>
diff --git a/src/main.ts b/src/main.ts
@@ -1,17 +1,23 @@
 import { createApp } from 'vue'
-import './style.css'
+import './assets/style.css'
 import 'virtual:uno.css'
 import 'virtual:svg-icons-register'
 import { setupRouter } from './router'
 import { setupStore } from './store'
 import App from './App.vue'
+import loading from './components/common/AppLoading.vue'
 const setupApp = async (): Promise<void> => {
+    // loading
+    const appLoading = createApp(loading)
+    appLoading.mount('#loading')
     // 创建vue实例
     const app = createApp(App)
     // 创建pinia
     setupStore(app)
     // 创建vueRouter
     await setupRouter(app)
+    // 卸载appLoading
+    appLoading.unmount()
     // 挂载app
     app.mount('#app')
 }

diff --git a/src/router/index.ts b/src/router/index.ts
@@ -1,5 +1,6 @@
 import type { App } from 'vue'
 import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
+import { routes } from './modules'
 
 // 获取路由模式(history和hash)和项目baseUrl
 const { VITE_HASH_ROUTE = 'false', VITE_BASE_URL } = import.meta.env
@@ -9,7 +10,7 @@ const { VITE_HASH_ROUTE = 'false', VITE_BASE_URL } = import.meta.env
  */
 export const router = createRouter({
     history: VITE_HASH_ROUTE === 'true' ? createWebHashHistory(VITE_BASE_URL) : createWebHistory(VITE_BASE_URL),
-    routes: []
+    routes
 })
 
 /**

diff --git a/src/router/modules/home.ts b/src/router/modules/home.ts
@@ -0,0 +1,8 @@
+import { type RouteRecordRaw } from 'vue-router'
+
+const routes: RouteRecordRaw = {
+    name: 'index',
+    path: '/',
+    component: async () => await import('../../views/index.vue')
+}
+export default routes
diff --git a/src/router/modules/index.ts b/src/router/modules/index.ts
@@ -0,0 +1,11 @@
+const modules = import.meta.glob('./**/*.ts', { eager: true }) as any
+const route: any[] = []
+Object.keys(modules).forEach((key) => {
+    const item = modules[key].default
+    if (item) {
+        route.push(item)
+    } else {
+        window.console.error(`路由模块解析出错: key = ${key}`)
+    }
+})
+export const routes = route
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
@@ -7,11 +7,16 @@ export {}
 
 declare module 'vue' {
     export interface GlobalComponents {
-        HelloWorld: typeof import('./../components/HelloWorld.vue')['default']
+        AppLoading: typeof import('./../components/common/AppLoading.vue')['default']
         NButton: typeof import('naive-ui')['NButton']
+        NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+        NDialogProvider: typeof import('naive-ui')['NDialogProvider']
+        NGlobalStyle: typeof import('naive-ui')['NGlobalStyle']
         NH2: typeof import('naive-ui')['NH2']
+        NLoadingBarProvider: typeof import('naive-ui')['NLoadingBarProvider']
+        NMessageProvider: typeof import('naive-ui')['NMessageProvider']
+        NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
         NP: typeof import('naive-ui')['NP']
-        NSpace: typeof import('naive-ui')['NSpace']
         NText: typeof import('naive-ui')['NText']
         RouterLink: typeof import('vue-router')['RouterLink']
         RouterView: typeof import('vue-router')['RouterView']

diff --git a/src/vite-env.d.ts → src/types/vite-env.d.ts b/src/vite-env.d.ts → src/types/vite-env.d.ts
diff --git a/src/views/index.vue b/src/views/index.vue
@@ -0,0 +1,29 @@
+<template>
+    <div>
+        <img src="/logo.svg" class="logo w-150px" alt="Vite logo" />
+        <n-h2>一款简洁，符合通用标准的，基于Vite构建的Vue3项目模板</n-h2>
+        <div>
+            <n-text>下面是操作useCounterStore进行计数，并实现持久化的例子</n-text>
+            <n-p>
+                <n-button type="primary" @click="counter.increment">点我加1</n-button>
+                <n-text class="px-20px text-20px">{{ count }}</n-text>
+            </n-p>
+        </div>
+        <div class="pt-20px">
+            <n-text>下面是通过SVG名称，动态加载本地和iconify线上SVG的例子</n-text>
+            <n-p class="flex-row-center h-30px gap-10px">
+                <n-text>本地Svg</n-text>
+                <SvgIcon localIcon="logo" class="w-24px h-24px"></SvgIcon>
+            </n-p>
+            <n-p class="flex-row-center h-30px gap-5px">
+                <n-text>Iconify</n-text>
+                <SvgIcon icon="fluent-mdl2:react-logo" class="w-24px h-24px"></SvgIcon>
+                <SvgIcon :icon="'fluent-mdl2:react-logo'" class="w-24px h-24px text-red"></SvgIcon>
+            </n-p>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+const counter = useCounterStore()
+const { count } = storeToRefs(counter)
+</script>