vue和Django快速创建项目

一、VUE

1.创建 Vue 3 + JavaScript 项目

npm create vite@latest 项目名称 -- --template vue

创建 Vue 3 + TypeScript 项目

npm create vite@latest 项目名称 -- --template vue-ts

2.然后

cd 项目名称
npm install
npm install axios  # 发送 API 请求
npm install pinia  # Vue 3 推荐的状态管理库
npm install element-plus # ✅ 安装 Element Plus (适用于 Vue 3)
npm install vue-router # ✅ Vue 3 路由系统
npm install vueuse  # ✅ Vue 工具集合，处理常见问题
npm install dayjs  # ✅ 处理日期时间，替代 moment.js
npm install qs  # ✅ 处理复杂的 URL 参数
npm install @vueuse/core
npm install vue-i18n
npm install vue-toastification
npm install vue-meta
npm install lodash
npm install dayjs	
npm run dev

或者使用package.json

{"dependencies": {"vue": "*","axios": "*","pinia": "*","element-plus": "*","vue-router": "*","@vueuse/core": "*","@vueuse/head": "*","dayjs": "*","qs": "*","vue-i18n": "*","vue-toastification": "^2.0.0-rc.5","lodash": "*"}
}

 执行

npm install

3.进入mian.js配置刚刚安装的库

import { createApp } from "vue";
import App from "./App.vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import router from "./router"; // Vue Router
import { createPinia } from "pinia"; // 状态管理
import { createI18n } from "vue-i18n"; // 国际化
import Toast, { POSITION } from "vue-toastification"; // 消息通知
import "vue-toastification/dist/index.css";
import { createHead } from "@vueuse/head"; // SEO meta 管理
import dayjs from "dayjs"; // 处理日期
import qs from "qs"; // 处理 URL 参数
import _ from "lodash"; // 工具库// ✅ 创建 Vue App
const app = createApp(App);// ✅ 配置插件
app.use(ElementPlus); // UI 组件库
app.use(router); // 路由
app.use(createPinia()); // 状态管理
app.use(createI18n({ locale: "zh-CN", messages: {} })); // 国际化
app.use(createHead()); // SEO meta 管理
app.use(Toast, {position: POSITION.TOP_RIGHT, // 右上角显示timeout: 3000, // 3s 后自动消失transition: "Vue-Toastification__fade",maxToasts: 5, // 最多同时显示 5 条通知newestOnTop: true,
});// ✅ 全局挂载工具库
app.config.globalProperties.$dayjs = dayjs;
app.config.globalProperties.$qs = qs;
app.config.globalProperties.$_ = _;// ✅ 挂载 App
app.mount("#app");

二、Django

4.初始化Django项目

mkdir 项目根目录名称 && cd 项目根目录名称
python -m venv env  # 创建虚拟环境
# 指定 Python 版本创建虚拟环境
Python目录路径\Python\Python3.10.11\python.exe -m venv env  # Windows
env\Scripts\activate  # Windows 激活虚拟环境
pip install django  # 安装 Django
pip install djangorestframework
pip install djangorestframework-simplejwt	
pip install django-cors-headers	
pip install django-environ	
pip install Pillow	
pip install mysqlclient	
pip install drf-yasg	
django-admin startproject 项目名称 .  # 创建 Django 项目

或者使用requirements.txt 

django
djangorestframework
djangorestframework-simplejwt
django-cors-headers
django-environ
Pillow
mysqlclient
drf-yasg

执行

pip install -r requirements.txt

5.创建Django的APP

python manage.py startapp 应用名称

6.注册刚刚创建的Django App和安装库后的配置

settings.py

INSTALLED_APPS = ["django.contrib.admin","django.contrib.auth","django.contrib.contenttypes","django.contrib.sessions","django.contrib.messages","django.contrib.staticfiles","rest_framework",  # ✅ Django REST Framework"corsheaders",  # ✅ 处理跨域"你创建的某APP",  # ✅ 你创建的某APP
]# ✅ 配置 Django REST Framework (DRF)
REST_FRAMEWORK = {"DEFAULT_AUTHENTICATION_CLASSES": ("rest_framework_simplejwt.authentication.JWTAuthentication",  # ✅ 使用 JWT 认证),"DEFAULT_PERMISSION_CLASSES": ("rest_framework.permissions.IsAuthenticated",  # ✅ 需要认证访问),
}MIDDLEWARE = ["django.middleware.security.SecurityMiddleware","django.contrib.sessions.middleware.SessionMiddleware","corsheaders.middleware.CorsMiddleware",  # ✅ 允许跨域"django.middleware.common.CommonMiddleware","django.middleware.csrf.CsrfViewMiddleware","django.contrib.auth.middleware.AuthenticationMiddleware","django.contrib.messages.middleware.MessageMiddleware","django.middleware.clickjacking.XFrameOptionsMiddleware",
]CORS_ALLOWED_ORIGINS = ["http://localhost:5173",  # ✅ Vue 项目"http://127.0.0.1:5173",
]

7.运行Django Server

python manage.py runserver

三、Vue 和 Django 项目的目录结构

📂 项目根目录
├── 📂 frontend/   # Vue 项目
│   ├── 📂 src/
│   ├── 📂 public/
│   ├── vite.config.js
│   ├── package.json
│   ├── main.js
│   ├── router.js
│   ├── store.js
│   ├── components/
│   ├── views/
│   └── ...
├── 📂 backend/   # Django 项目
│   ├── 📂 myproject/
│   ├── 📂 myapp/
│   ├── 📂 users/
│   ├── manage.py
│   ├── requirements.txt
│   ├── settings.py
│   ├── urls.py
│   ├── wsgi.py
│   ├── asgi.py
│   ├── models.py
│   ├── views.py
│   ├── serializers.py
│   └── ...