新增页面

配置路由

如果熟悉 vue-router 的配置就很简单了。

首先在 @/router/routes.ts 中的 asyncRoutes 数组中增加你需要添加的路由。

如：新增一个 User 页面

{
  path: '/system',
  name: 'System',
  meta: {
      hidden: false,
      title: '角色与用户',
      icon: 'el-icon-User',
      perms: 'nebula.cloud2',
      type: MenuEnum.CATALOGUE,
      query: '',
      keepAlive: false,
      activeMenu: '/system/user'
  },
}

仅仅这样不会有任何效果的，它只是创建了一个基于layout的一级路由，你还需要在它下面的 children 中添加子路由。

{
  path: '/system',
  name: 'System',
  meta: {
      hidden: false,
      title: '角色与用户',
      icon: 'el-icon-User',
      perms: 'nebula.cloud2',
      type: MenuEnum.CATALOGUE,
      query: '',
      keepAlive: false,
      activeMenu: '/system/user'
  },
  children: [
      {
          path: 'user',
          name: 'UserList',
          meta: {
              title: '用户列表',
              icon: 'local-icon-user_guanli',
              perms: 'nebula.cloud2',
              query: '',
              type: MenuEnum.MENU,
              hidden: false
          },
          component: () => import('@/views/sys/user/index.vue')
      },
      {
          path: 'user/detail',
          name: 'UserDetail',
          meta: {
              title: '用户详情',
              perms: 'nebula.cloud2',
              type: MenuEnum.MENU,
              query: '',
              hidden: true
          },
          component: () => import('@/views/sys/user/detail.vue')
      }
  ]
}

这样侧边栏就会出现如图所示的 menu-item 了

新增 view

新增完路由之后不要忘记在 @/views 文件下创建对应的文件夹，一般一个路由对应一个文件，该模块下的功能组件或者方法就建议在本文件夹下创建一个utils或components文件夹，各个功能模块维护自己的utils或components组件。如：

新增 api

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

新增组件

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

请记住拆分组件最大的好处不是公用而是可维护性！

新增样式

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

<style>
/* global styles */
</style>

<style scoped>
/* local styles */
.xxx-container{
  /* name scoped */
  xxx
}
</style>