新增页面 ​

这里的『页面』指配置了路由，能够通过链接直接访问的模块，要新建一个页面，通常可以在脚手架的基础上进行简单的配置。

创建页面 ​

在src/views下创建新的vue、scss文件。如果有多个相关页面，可以创建一个新的文件夹来放置相关文件。

src
├── components
└── views
+   ├── new-page.vue
+   └── ...
...
package.json

为了更好的演示，我们创建new-page.vue并初始化以下文件内容：

<template>
    <el-card>New Page</el-card>
</template>

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

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

暂时不向本文档中的样式文件添加内容，您也可以尝试自己添加内容。

将文件加入菜单和路由 ​

我们需要在 @/config/routes.ts 中使用 component 字段配置我们页面到路由中。

以 new-page.vue 文件为例：

import type { CustomRouteRaw } from "@/router/type";

export default [
    {
        path: "/new-page",
        meta: {
            title: "新页面",
        },
        component: "@/views/new-page",
    },
] as CustomRouteRaw;

路由配置完成后，访问页面即可看到效果，如果需要在菜单中显示，需要配置 name，icon，hideInMenu等来辅助生成菜单。

详细路由配置请查看 路由配置