VUE3路由安装及客户端基本页面实现

一、VUE3 路由安装

1. 安装路由模块

   pnpm install vue-router
   

2. 编辑src/router/index.ts文件添加以下内容

   import { createRouter, createWebHistory } from 'vue-router'
   
   const router = createRouter({
     history: createWebHistory(),
     routes: [
       {
         path: '/',
         name: 'home',
         component: () => import('@/views/layout/layout.vue')
       }
     ]
   })
   
   export default router
   

3. 编辑src/main.ts文件并

   import { createApp } from 'vue'
   import App from './App.vue'
   import naive from 'naive-ui'
   
   
   const app = createApp(App)
   // 引入路由
   app.use(router)
   app.mount('#app')
   

4. 创建src/views/layout/layout.vue文件并添加以下内容

   <script lang="ts" setup>
   import Header from '@/components/Header.vue'
   import Menu from './menu.vue'
   </script>
   
   <template>
     <!-- 最外层容器 -->
     <div class="layout_container">
       <!-- 头部 -->
       <Header />
       <!-- 主体 -->
       <div class="layout_container_content">
         <!-- 左侧菜单栏 -->
         <div class="layout_left_menu">
           <Menu />
         </div>
         <!-- 右侧内容 -->
         <div class="layout_right">
             <router-view />
         </div>
       </div>
     </div>
   </template>
   
   <style lang="css" scoped>
   @reference "@/style.css";
   .layout_container {
     @apply w-full h-full flex flex-col overflow-hidden;
   }
   .layout_container_content {
     @apply w-screen h-[calc(-theme(height.9)+100vh)] flex flex-row overflow-y-auto overflow-x-hidden;
   }
   .layout_left_menu {
     @apply w-56 h-full;
   }
   .layout_right {
     @apply flex-2 overflow-x-hidden overflow-y-auto;
   }
   </style>
   

5. 创建src/views/layout/menu.vue

   <script lang="ts" setup>
   import type { MenuOption } from 'naive-ui'
   
   const menuOptions: MenuOption[] = [
     {
       label: '仪表板',
       key: 'home'
     },
     {
       label: '系统管理',
       key: 'system',
       children: [
         {
           label: '系统信息',
           key: 'info'
         },
         {
           label: '用户管理',
           key: 'user'
         },
         {
           label: '用户组管理',
           key: 'group'
         },
         {
           label: '进程管理',
           key: 'process'
         },
         {
           label: '服务管理',
           key: 'services'
         }
       ]
     },
     {
       label: '资源管理',
       key: 'resource',
       children: [
         {
           label: 'CPU管理',
           key: 'cpu'
         },
         {
           label: '磁盘管理',
           key: 'disk'
         },
         {
           label: '网络管理',
           key: 'network'
         }
       ]
     },
     {
       label: '文件管理',
       key: 'file'
     },
     {
       label: 'Docker管理',
       key: 'docker',
       children: [
         { label: '容器管理', key: 'container' },
         { label: '镜像管理', key: 'image' },
         { label: '网络管理', key: 'docker_network' },
         { label: '存储管理', key: 'storage' },
         { label: '容器编排', key: 'container_manager' }
       ]
     },
     {
       label: 'SSH管理',
       key: 'ssh'
     },
     {
       label: '防火墙管理',
       key: 'firewalld'
     }
   ]
   </script>
   
   <template>
     <n-menu :options="menuOptions" />
   </template>
   
   <style scoped></style>
   

6. 修改App.vue

   <script lang="ts" setup>
   </script>
   
   <template>
       <div
         class="w-screen h-screen"
       >
         <router-view />
       </div>
   </template>
   

二、VUE组件库naive安装

想了解更多见naive组件库官网

1. 安装naive组件库

pnpm install naive-ui vfonts -D

2. 配置字体

编辑src/main.ts文件

import { createApp } from 'vue'
import App from './App.vue'
import naive from 'naive-ui'
import './reset.css'
import './style.css'
// 通用字体
import 'vfonts/Lato.css'
// 等宽字体
import 'vfonts/FiraCode.css'
import router from './components/router'

const app = createApp(App)
// 引入 naive-ui
app.use(naive)
// 引入路由
app.use(router)
app.mount('#app')

3. 配置按需引入

1. 安装unplugin-auto-import 和unplugin-vue-components插件

   pnpm install unplugin-vue-components unplugin-auto-import -D
   

2. 编辑vite.config.ts

   import vue from '@vitejs/plugin-vue'
   import AutoImport from 'unplugin-auto-import/vite'
   import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
   import Components from 'unplugin-vue-components/vite'
   // vite.config.ts
   import { defineConfig } from 'vite'
   
   // https://vitejs.dev/config/
   export default defineConfig({
     plugins: [
       vue(),
       AutoImport({
         imports: [
           'vue',
           {
             'naive-ui': [
               'useDialog',
               'useMessage',
               'useNotification',
               'useLoadingBar'
             ]
           }
         ]
       }),
       Components({
         resolvers: [NaiveUiResolver()]
       })
     ]
   })
   

4.配置国际化

编辑src/App.vue

<template>
  <n-config-provider
    :date-locale="dateZhCN"
    :locale="zhCN"
    class="w-screen h-screen bg-gray-50 dark:bg-gray-950 scrollbar dark:scrollbar-dark text-gray-900 dark:text-white/90"
  >
    <div
      class="w-screen h-screen"
    >
      <router-view />
    </div>
  </n-config-provider>
</template>