新增页面

新增路由

首先在 src/router/index.js 中新增路由。

{
  path: '/tenant',
  component: Layout,
  redirect: 'noRedirect',
  alwaysShow: true,
  name: 'tenant',
  meta: { title: 'tenant', icon: 'el-icon-cloudy-and-sunny' },
  children: [
    {
      path: '/systenant',
      component: () => import('@/views/admin/systenant'),
      name: 'SysTenant',
      meta: { title: 'systenant', icon: 'el-icon-cloudy' }
    }
  ]
}

多级目录

基础包中不推荐三级或者多级路由，如有需要则自行定义修改

如果路由是多级目录，如 src/views/nested 那样有三级路由嵌套，还要手动在二级目录添加一个 <router-view>。有多少级路由嵌套就需要多少个 <router-view>。

<!-- 父级路由组件 -->
<template>
  <div>
    <!-- xxx html 内容  -->
    <router-view />
  </div>
</template>

新增 view

在 @/views 文件下 创建对应的文件夹，一般性一个路由对应一个文件， 该模块下的功能就建议在本文件夹下创建一个新文件夹，各个功能模块维护自己的utils或components组件。

新增 api

在 @/api 文件夹下创建本模块对应的 api 服务。

新增组件

在全局的 @/components 写一些全局的组件，如富文本，各种搜索组件，封装的分页组件等等能被公用的组件。 每个页面或者模块特定的业务组件则会写在当前 @/views 下面。 如：@/views/system/user/components/xxx.vue。这样拆分大大减轻了维护成本。

新增样式

页面的样式和组件是一个道理，全局的 @/style 放置一下全局公用的样式，每一个页面的样式就写在当前 views下面，请记住加上scoped 就只会作用在当前组件内了，避免造成全局的样式污染。

/* 编译前 */
.example {
  color: red;
}

/* 编译后 */
.example[_v-f3f3eg9] {
  color: red;
}