架构和初始化

初始化 css

安装

npm i normalize.css -S

引入

• main.js 里面引入

import { createApp } from "vue";

import { createPinia } from "pinia";

import "normalize.css";

import App from "./App.vue";

import router from "./router";

const app = createApp(App);

app.use(createPinia());
app.use(router);

app.mount("#app");

架构

目录结构

├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── assets
│   ├── layouts
│   ├── components
│   ├── router
│   ├── store
│   ├── utils
│   ├── pages
│   ├── App.vue
│   ├── main.js
├── .gitignore
├── babel.config.js
├── package.json
├── .editorconfig
├── .eslintrc.js
├── env.d.ts
├── .prettierrc.cjs
├── README.md
└── vue.config.js

layouts 架构

├── layouts
│   ├── default
│   ├── login

default.vue

<template>
  <div>
    <div>头部</div>
    <RouterView></RouterView>
    <div>底部</div>
  </div>
</template>

<script setup></script>

<style lang="scss" scoped></style>

login.vue

<template>
  <div>
    <RouterView />
  </div>
</template>

<script setup></script>

<style lang="scss" scoped></style>

pages

├── pages
│   ├── index.vue
│   ├── login.vue

index.vue

<template>
  <div>首页</div>
</template>

<script setup></script>

<style lang="scss" scoped></style>

login.vue

<template>
  <div>{{ message }}</div>
</template>

<script setup>
  import { ref } from "vue";
  const message = ref("登录页");
</script>

<style lang="scss" scoped></style>

error.vue

<template>
  <div>{{ message }}</div>
</template>

<script setup>
  import { ref } from "vue";
  const message = ref("错误页");
</script>

<style lang="scss" scoped></style>

如果是TS项目,新增一个env.d.ts

• 这样在使用@作为引入的时候不会报错

/// <reference types="vite/client" />

declare module "*.vue" {
  import type { DefineComponent } from "vue";

  const component: DefineComponent<
    Record<string, unknown>,
    Record<string, unknown>,
    any
  >;
  export default component;
}

如果是TS项目修改下面三个文件

• tsconfig.json

{
  "files": [],
  "compilerOptions": {
    "disableSourceOfProjectReferenceRedirect": true
  },
  "references": [
    {
      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
    }
  ]
}

• tsconfig.app.json

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "mock/**/*"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    // Project references require composite.
    "composite": true,
    "emitDeclarationOnly": true,

    // Extra safety for array and object lookups, but may have false positives.
    "noUncheckedIndexedAccess": true,

    // Path mapping for cleaner imports.
    "paths": {
      "@/*": ["./src/*"]
    },

    // `vue-tsc --build` produces a .tsbuildinfo file for incremental type-checking.
    // Specified here to keep it out of the root directory.
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo"
  }
}

• tsconfig.node.json

// TSConfig for modules that run in Node.js environment via either transpilation or type-stripping.
{
  "extends": "@tsconfig/node24/tsconfig.json",
  "include": [
    "vite.config.*",
    "vitest.config.*",
    "cypress.config.*",
    "playwright.config.*",
    "eslint.config.*"
  ],
  "compilerOptions": {
    // Most tools use transpilation instead of Node.js's native type-stripping.
    // Bundler mode provides a smoother developer experience.
    "module": "preserve",
    "moduleResolution": "bundler",

    // Include Node.js types and avoid accidentally including other `@types/*` packages.
    "types": ["node"],

    // Project references require composite.
    "composite": true,

    // Disable emitting output during `vue-tsc --build`, which is used for type-checking only.
    "emitDeclarationOnly": true,

    // `vue-tsc --build` produces a .tsbuildinfo file for incremental type-checking.
    // Specified here to keep it out of the root directory.
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo"
  }
}

路由部分

(1) 修改App.vue

<script setup lang="ts"></script>

<template>
  <RouterView />
</template>

<style scoped></style>

配置通用路由common.ts

• 在router/modules/common.ts 里面配置通用路由

const LoginLayOut = () => import("@/layouts/loginLayout.vue");

const LoginPage = () => import("@/pages/login.vue");

const ErrorPage = () => import("@/pages/error.vue");

const commonRoutes = [
  {
    path: "/login",
    name: "loginPage",
    component: LoginLayOut,
    children: [
      {
        path: "",
        name: "loginContent",
        component: LoginPage,
      },
    ],
  },
  {
    path: "/404",
    name: "errorPage",
    component: ErrorPage,
  },
  {
    path: "/:pathMatch(.*)*",
    redirect: "/404",
  },
];

export default commonRoutes;

• 在router/modules/pages.ts 里面配置页面路由

const AdminLayout = () => import("@/layouts/default.vue");

const AdminHomePage = () => import("@/pages/index.vue");

const adminRoutes = [
  {
    path: "/admin",
    name: "adminLayout",
    component: AdminLayout,
    children: [
      {
        path: "",
        name: "adminContent",
        component: AdminHomePage,
      },
    ],
  },
];

export default adminRoutes;

汇总路由

• 在router/index.ts 里面汇总路由

import { createRouter, createWebHistory } from "vue-router";
import commonRoutes from "./modules/common";
import adminRoutes from "./modules/pages";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [...adminRoutes, ...commonRoutes],
});

export default router;

运行的时候

• 访问下面的网址就会跳转到不同的页面了

http://localhost:5173/admin
http://localhost:5173/login
http://localhost:5173/777