From 177f950c51d9f129cf2df56a20e86ee3fa32b8c1 Mon Sep 17 00:00:00 2001 From: anyfork <874957743@qq.com> Date: Sat, 22 Jul 2023 22:18:53 +0800 Subject: [PATCH] =?UTF-8?q?:sparkles:=20feat(router):=20=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E7=AE=80=E5=8D=95=E8=B7=AF=E7=94=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 增加路由示例 首页loading 更新docs --- .eslintignore | 1 + .eslintrc.cjs | 6 +- README.md | 52 ++--- index.html | 5 +- src/App.vue | 40 ++-- src/{ => assets}/style.css | 0 src/assets/svg/no-permission.svg | 313 --------------------------- src/components/common/AppLoading.vue | 18 ++ src/main.ts | 8 +- src/router/index.ts | 3 +- src/router/modules/home.ts | 8 + src/router/modules/index.ts | 11 + src/types/components.d.ts | 9 +- src/{ => types}/vite-env.d.ts | 0 src/views/index.vue | 29 +++ 15 files changed, 121 insertions(+), 382 deletions(-) rename src/{ => assets}/style.css (100%) delete mode 100644 src/assets/svg/no-permission.svg create mode 100644 src/components/common/AppLoading.vue create mode 100644 src/router/modules/home.ts create mode 100644 src/router/modules/index.ts rename src/{ => types}/vite-env.d.ts (100%) create mode 100644 src/views/index.vue diff --git a/.eslintignore b/.eslintignore index 47e3d3b..3278083 100644 --- a/.eslintignore +++ b/.eslintignore @@ -7,3 +7,4 @@ node_modules dist public .husky +index.html diff --git a/.eslintrc.cjs b/.eslintrc.cjs index da68c16..ba4f88f 100644 --- 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 index 1a7e49e..125dbe8 100644 --- 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 - + - - - - - - - - - <%= title %> - - - - -
-
- -
-
-
-
-
-
+ + + + + + <%= title %> + + + +
+
-
-
- <%= loading %> -
-
- -
- - - + + ``` #### 5 vite-plugin-svg-icons diff --git a/index.html b/index.html index a510bfd..89b180f 100644 --- a/index.html +++ b/index.html @@ -5,12 +5,13 @@ - <%= title %> -
+
+
+
diff --git a/src/App.vue b/src/App.vue index 62d239c..1db3371 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,30 +1,18 @@ + diff --git a/src/style.css b/src/assets/style.css similarity index 100% rename from src/style.css rename to src/assets/style.css diff --git a/src/assets/svg/no-permission.svg b/src/assets/svg/no-permission.svg deleted file mode 100644 index de6afd8..0000000 --- a/src/assets/svg/no-permission.svg +++ /dev/null @@ -1,313 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/components/common/AppLoading.vue b/src/components/common/AppLoading.vue new file mode 100644 index 0000000..91ceb68 --- /dev/null +++ b/src/components/common/AppLoading.vue @@ -0,0 +1,18 @@ + + + diff --git a/src/main.ts b/src/main.ts index d2e2ba4..435564c 100644 --- 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 => { + // 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 index 99d5265..2d754d9 100644 --- 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 new file mode 100644 index 0000000..49f0940 --- /dev/null +++ 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 new file mode 100644 index 0000000..cee5f50 --- /dev/null +++ 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 index 465025d..44a7993 100644 --- 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 b/src/types/vite-env.d.ts similarity index 100% rename from src/vite-env.d.ts rename to src/types/vite-env.d.ts diff --git a/src/views/index.vue b/src/views/index.vue new file mode 100644 index 0000000..e21e178 --- /dev/null +++ b/src/views/index.vue @@ -0,0 +1,29 @@ + +