Django5+Vue3:OA系统前后端分离项目实战-前端项目初始化(8)

Django5+Vue3系列文章

前言

本节开始，全文仅对会员开放。

若点赞和收藏数量超过100，全文将免费开放。

 此项目采用 Django 框架的 5.0.7 版本进行开发。

Django 5.0 支持的 Python 版本为 3.10、3.11 和 3.12。

OA 系统系列文章将持续更新，直至项目的 Docker 部署阶段。

专栏链接:  ~快捷传送门: 留个赞再走呗😭! ~

个人博客: ~所有文章尽在简客免费阅读~

文章目录

目录

Django5+Vue3系列文章

前言

文章目录

一、创建前端项目

1.打开项目文件夹，初始化vue3前端项目

二、frame和login结构搭建

1.移除所有非必要的默认文件

1.重写App.vue

2.移除views文件夹中的默认文件AboutView.vue和HomeView.vue

3.移除main.js文件第一行，取消导入main.css

2.frame框架与login登录功能模块化

1.在src/views目录下分别建立login和main子目录，用于存放login.vue和frame.vue视图组件

2.在src/views目录下新建login.vue以及frame.vue

3.setup上快捷指定组件名称

三、router路由添加

1.打开src\router\index.js文件，添加路由

2.测试路由是否添加成功

总结

一、创建前端项目

请在创建项目时使用Vue 3.10.3版本，以确保兼容性并避免潜在错误。

1.打开项目文件夹，初始化vue3前端项目

代码如下（示例）：

创建完成（示例如下）： 

项目结构（示例）：

D:yourproject
├─oaback
│  
└─oafront

二、frame和login结构搭建

1.移除所有非必要的默认文件

1.重写App.vue

<script setup>

</script>

<template>
  <RouterView />
</template>

<style scoped>

</style>

2.移除views文件夹中的默认文件AboutView.vue和HomeView.vue