当前位置：首页 > news >正文

vue和Django快速创建项目

news 来源：原创 2025/5/13 15:47:30

一、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
│   └── ...