前后端分离的Vue3实战开发：搭建后台管理系统的基础结构与布局

2023-09-24 12:34:01

序言

伴随着前端技术日新月异，Vue3凭借着响应式开发、组合式API、TypeScript支持等诸多优势，逐渐成为构建Web应用的首选框架。而Vite2作为新一代的前端构建工具，其极致的构建速度、原生ESM支持、开箱即用的TypeScript支持等特点，更是让其成为Vue3开发的最佳搭档。

构建基础项目结构

项目初始化

首先，使用Vite2初始化一个新的Vue3项目：
```
npm create vite@latest my-project
```

安装必要的依赖

接着，安装所需的依赖：

npm install vue@next vue-router@next typescript @vitejs/plugin-vue @vitejs/plugin-typescript element-plus

配置Vite

在vite.config.ts文件中，对Vite进行配置：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import typescript from '@vitejs/plugin-typescript';

export default defineConfig({
  plugins: [vue(), typescript()],
});

配置TypeScript

在tsconfig.json文件中，对TypeScript进行配置：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "react-jsx",
    "lib": ["dom", "esnext"],
    "allowJs": true,
    "sourceMap": true,
    "declaration": true,
    "strict": true,
    "noImplicitAny": false,
    "removeComments": false,
    "esModuleInterop": true,
    "moduleResolution": "node",
    "baseUrl": "./",
  },
  "include": [
    "./src/**/*.ts",
    "./src/**/*.vue",
  ],
  "exclude": [
    "./node_modules"
  ]
}

配置Element Plus

在main.ts文件中，引入并配置Element Plus：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

完善基础布局

创建基本布局组件

在src/components/layouts目录下，创建一个名为BasicLayout.vue的文件，作为基本布局组件：

<template>
  <div class="basic-layout">
    <el-header>Header</el-header>
    <el-main>Main</el-main>
    <el-footer>Footer</el-footer>
  </div>
</template>

<script>
export default {
  name: 'BasicLayout'
}
</script>

<style>
.basic-layout {
  height: 100%;
}
</style>

创建路由

在src/router/index.ts文件中，创建路由：

import { createRouter, createWebHistory } from 'vue-router'
import BasicLayout from '@/components/layouts/BasicLayout.vue'

const routes = [
  {
    path: '/',
    component: BasicLayout,
    children: [
      {
        path: 'home',
        component: () => import('@/views/Home.vue')
      }
    ]
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

创建App.vue文件

在src/App.vue文件中，创建应用根组件：

<template>
  <router-view />
</template>

<script>
import { createApp } from 'vue'
import router from './router'

const app = createApp({})

app.use(router)

app.mount('#app')
</script>