创建几个简单的Vue页面，方便代码编写。

APP VUE

App.vue是最根本的vue文件，我们可以在此处挂载 NaiveUI 的全局主题配置、Message配置、Dialog配置、Notification配置等。

创建src/components/Application/index.js，写入以下内容：

components/Application/index.js
import AppProvider from './Application.vue';

export { AppProvider };

创建src/components/Application/Application.vue，写入以下内容：

components/Application/Application.vue
<template>
  <n-dialog-provider>
    <n-notification-provider>
      <n-message-provider>
        <slot name="default"></slot>
      </n-message-provider>
    </n-notification-provider>
  </n-dialog-provider>
</template>

<script>
import { defineComponent } from 'vue';
import {
  NDialogProvider,
  NNotificationProvider,
  NMessageProvider,
} from 'naive-ui';

export default defineComponent({
  name: 'Application',
  components: {
    NDialogProvider,
    NNotificationProvider,
    NMessageProvider,
  },
  setup() {
    return {};
  },
});
</script>

修改src/App.vue，内容如下：

App.vue
<template>
  <NConfigProvider
    :locale="zhCN"
    :date-locale="dateZhCN"
    :theme="getDarkTheme"
    :theme-overrides="getThemeOverrides"
  >
    <AppProvider>
      <RouterView />
    </AppProvider>
  </NConfigProvider>
</template>

<script>
import { computed, defineComponent } from 'vue';
// locale & dateLocale
import { zhCN, dateZhCN, darkTheme } from 'naive-ui';
import { AppProvider } from '@/components/Application';
import { useDesignSettingStore } from '@/store/modules/designSetting';
import { lighten } from '@/utils/index';

export default defineComponent({
  components: { AppProvider },
  setup() {
    const designStore = useDesignSettingStore();
    /**
     * @type import('naive-ui').GlobalThemeOverrides
     */
    const getThemeOverrides = computed(() => {
      const appTheme = designStore.appTheme;
      const lightenStr = lighten(designStore.appTheme, 6);
      return {
        common: {
          primaryColor: appTheme,
          primaryColorHover: lightenStr,
          primaryColorPressed: lightenStr,
          primaryColorSuppl: appTheme,
        },
        LoadingBar: {
          colorLoading: appTheme,
        },
      };
    });

    const getDarkTheme = computed(() =>
      designStore.darkTheme ? darkTheme : undefined
    );
    return {
      zhCN,
      dateZhCN,
      getDarkTheme,
      getThemeOverrides,
    };
  },
});
</script>
<style lang="less">
@import 'styles/index.less';
</style>

错误页面

403页面

创建src/views/exception/403.vue，写入以下内容：

views/exception/403.vue
<template>
  <div class="flex flex-col justify-center page-container">
    <div class="text-center">
      <img src="~@/assets/images/exception/403.svg" alt="" />
    </div>
    <div class="text-center">
      <h1 class="text-base text-gray-500">抱歉，你无权访问该页面</h1>
      <n-button type="info" @click="goHome">回到首页</n-button>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';
export default defineComponent({
  setup() {
    const router = useRouter();
    function goHome() {
      router.push('/');
    }
    return {
      goHome,
    };
  },
});
</script>

<style lang="less" scoped>
.page-container {
  width: 100%;
  border-radius: 4px;
  padding: 50px 0;
  height: 100vh;

  .text-center {
    h1 {
      color: #666;
      padding: 20px 0;
    }
  }

  img {
    width: 350px;
    margin: 0 auto;
  }
}
</style>

404页面

创建src/views/exception/404.vue，写入以下内容：

views/exception/404.vue
<template>
  <div class="flex flex-col justify-center page-container">
    <div class="text-center">
      <img src="~@/assets/images/exception/404.svg" alt="" />
    </div>
    <div class="text-center">
      <h1 class="text-base text-gray-500">抱歉，你访问的页面不存在</h1>
      <n-button type="info" @click="goHome">回到首页</n-button>
    </div>
  </div>
</template>
<script>
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';
export default defineComponent({
  setup() {
    const router = useRouter();
    function goHome() {
      router.push('/');
    }
    return {
      goHome,
    };
  },
});
</script>
<style lang="less" scoped>
.page-container {
  width: 100%;
  border-radius: 4px;
  padding: 50px 0;
  height: 100vh;

  .text-center {
    h1 {
      color: #666;
      padding: 20px 0;
    }
  }

  img {
    width: 350px;
    margin: 0 auto;
  }
}
</style>

500页面

创建src/views/exception/500.vue，写入以下内容：

views/exception/500.vue
<template>
  <div class="flex flex-col justify-center page-container">
    <div class="text-center">
      <img src="~@/assets/images/exception/500.svg" alt="" />
    </div>
    <div class="text-center">
      <h1 class="text-base text-gray-500">抱歉，服务器出错了</h1>
      <n-button type="info" @click="goHome">回到首页</n-button>
    </div>
  </div>
</template>
<script>
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';
export default defineComponent({
  setup() {
    const router = useRouter();
    function goHome() {
      router.push('/');
    }
    return {
      goHome,
    };
  },
});
</script>
<style lang="less" scoped>
.page-container {
  width: 100%;
  border-radius: 4px;
  padding: 50px 0;
  height: 100vh;

  .text-center {
    h1 {
      color: #666;
      padding: 20px 0;
    }
  }

  img {
    width: 350px;
    margin: 0 auto;
  }
}
</style>

重定向页面

该页面是用来做重定向使用的

创建src/views/redirect/index.vue，写入以下内容：

view/redirect/index.vue
<template>
  <div>
    <NEmpty />
  </div>
</template>
<script>
import { defineComponent, onBeforeMount } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { NEmpty } from 'naive-ui';

export default defineComponent({
  name: 'Redirect',
  components: { NEmpty },
  setup() {
    const route = useRoute();
    const router = useRouter();
    onBeforeMount(() => {
      const { params, query } = route;
      const { path } = params;
      router.replace({
        path: '/' + (Array.isArray(path) ? path.join('/') : path),
        query,
      });
    });
  },
});
</script>

Dashboard页面

创建两个空的Dashboard页面

主控台

创建src/views/dashboard/console/console.vue，写入以下内容：

dashboard/console/console.vue
<template>
  <div>
    <h1>主控台</h1>
  </div>
</template>
<script>
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {},
});
</script>

工作台

创建src/views/dashboard/workplace/workplace.vue，写入以下内容：

dashboard/workplace/workplace.vue
<template>
  <div>
    <h1>工作台</h1>
  </div>
</template>
<script>
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {},
});
</script>

快来参与讨论吧~