chore(projects): 添加router

.env

@@ -1,5 +1,6 @@
 # 项目根目录
 VITE_BASE_URL=/
-
 # 项目名称
-VITE_APP_TITLE = 'Ench Admin'
+VITE_APP_TITLE = Ench Admin
+# 路由模式
+VITE_HASH_ROUTE = Y

.eslintrc.js

@@ -32,5 +32,6 @@ module.exports = {
     'no-var': 'error', // 禁止使用var
     'no-console': 'warn', // 禁止出现console
     'no-debugger': 'off', // 关闭debugger警告
+    'vue/multi-word-component-names': 0, // 关闭文件名多单词
   },
 };

.prettierrc.js

@@ -1,6 +1,6 @@
 module.exports = {
   // https://prettier.io/docs/en/options.html
-  printWidth: 80, //单行长度
+  printWidth: 120, //单行长度
   tabWidth: 2, //缩进长度
   useTabs: false, //使用空格代替tab缩进
   semi: true, //句末使用分号

package.json

@@ -24,7 +24,8 @@
     "./src/**/*.{js,jsx,ts,tsx,less,json}": "prettier --loglevel warn --write"
   },
   "dependencies": {
-    "vue": "^3.2.37"
+    "vue": "^3.2.37",
+    "vue-router": "^4.1.3"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.0.3",

src/App.vue

@@ -1,25 +1,7 @@
-<script setup lang="ts">
-// This starter template is using Vue 3 <script setup> SFCs
-// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
-import HelloWorld from './components/HelloWorld.vue';
-</script>
+<script setup lang="ts"></script>
 
 <template>
-  <div>
-    <a href="https://vitejs.dev" target="_blank">
-      <img src="/pixel.svg" class="logo" alt="" />
-    </a>
-  </div>
-  <HelloWorld msg="Ench-Admin 中后台模板" />
+  <router-view />
 </template>
 
-<style scoped>
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #ed9d0aaa);
-}
-</style>
+<style scoped></style>

src/assets/vue.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

src/components/HelloWorld.vue

@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-
-defineProps<{ msg: string }>();
-
-const count = ref(0);
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code>
-      to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">
-      create-vue
-    </a>
-    , the official Vue + Vite starter
-  </p>
-  <p>
-    Install
-    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
-    in your IDE for a better DX
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>

src/main.ts

@@ -1,5 +1,13 @@
 import { createApp } from 'vue';
-import './style.css';
 import App from './App.vue';
+import { setupRouter } from './router';
 
-createApp(App).mount('#app');
+async function setupApp() {
+  // 创建vue实例
+  const app = createApp(App);
+  // 安装router
+  await setupRouter(app);
+  // 挂载
+  app.mount('#app');
+}
+setupApp();

src/router/index.ts

@@ -0,0 +1,27 @@
+import type { App } from 'vue';
+import { createRouter, createWebHistory, createWebHashHistory, RouteRecordRaw } from 'vue-router';
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    name: 'Login',
+    component: () => import('@/views/login/index.vue'), // 注意这里要带上 文件后缀.vue
+  },
+  {
+    path: '/test',
+    name: 'test',
+    component: () => import('@/views/system/index.vue'), // 注意这里要带上 文件后缀.vue
+  },
+];
+
+const { VITE_HASH_ROUTE = 'N', VITE_BASE_URL } = import.meta.env;
+export const router = createRouter({
+  history: VITE_HASH_ROUTE === 'Y' ? createWebHashHistory(VITE_BASE_URL) : createWebHistory(VITE_BASE_URL),
+  routes,
+});
+
+// 安装vue路由
+export async function setupRouter(app: App) {
+  app.use(router);
+  await router.isReady(); //https://router.vuejs.org/zh/api/index.html#isready
+}

src/style.css

@@ -1,81 +0,0 @@
-:root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
-  padding: 2em;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}

src/types/env.d.ts

@@ -0,0 +1,18 @@
+interface ImportMetaEnv {
+  /** 项目基本地址 */
+  readonly VITE_BASE_URL: string;
+  /** 项目标题 */
+  readonly VITE_APP_TITLE: string;
+  /** 开启请求代理 */
+  readonly VITE_HTTP_PROXY?: 'Y' | 'N';
+  /** 是否开启打包压缩 */
+  readonly VITE_COMPRESS?: 'Y' | 'N';
+  /** 压缩算法类型 */
+  readonly VITE_COMPRESS_TYPE?: 'gzip' | 'brotliCompress' | 'deflate' | 'deflateRaw';
+  /** hash路由模式 */
+  readonly VITE_HASH_ROUTE?: 'Y' | 'N';
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

src/types/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue';
+  const component: DefineComponent;
+  export default component;
+}

src/views/login/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <h1>{{ msg }}</h1>
+  <span>Already configured: vue3、vite3、eslint、prettier、ts、tsx、conventional、husk、lint-staged、vue-router</span>
+  <a href="" @click="router.push('test')">to test page</a>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+const router = useRouter();
+const msg = ref('It is just a blank template.');
+</script>
+
+<style lang="less" scoped></style>

src/views/system/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>I prove that you have made the jump.</div>
+  <a href="" @click="router.back()">to back</a>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+const router = useRouter();
+</script>
+
+<style scoped></style>