Django-Vue 项目教程

Django-Vue 项目教程

django-vue-templateDjango Rest + Vue JS Template项目地址:https://gitcode.com/gh_mirrors/dj/django-vue-template

1. 项目的目录结构及介绍

django-vue-template/
├── backend/
│   ├── manage.py
│   ├── backend/
│   │   ├── __init__.py
│   │   ├── settings.py
│   │   ├── urls.py
│   │   └── wsgi.py
│   └── apps/
│       └── example/
├── frontend/
│   ├── public/
│   │   └── index.html
│   ├── src/
│   │   ├── assets/
│   │   ├── components/
│   │   ├── App.vue
│   │   └── main.js
│   ├── package.json
│   └── vue.config.js
├── .gitignore
├── README.md
└── requirements.txt

目录结构介绍

• backend/: Django 后端项目目录。
  • manage.py: Django 项目管理文件。
  • backend/: Django 项目配置目录。
    • settings.py: Django 项目配置文件。
    • urls.py: Django 项目路由配置文件。
    • wsgi.py: WSGI 服务器配置文件。
  • apps/: Django 应用目录。
    • example/: 示例应用目录。
• frontend/: Vue 前端项目目录。
  • public/: 公共资源目录。
    • index.html: 主页模板文件。
  • src/: 源代码目录。
    • assets/: 静态资源目录。
    • components/: Vue 组件目录。
    • App.vue: 主应用组件。
    • main.js: 入口文件。
  • package.json: 前端项目依赖配置文件。
  • vue.config.js: Vue 项目配置文件。
• .gitignore: Git 忽略配置文件。
• README.md: 项目说明文件。
• requirements.txt: Django 项目依赖配置文件。

2. 项目的启动文件介绍

后端启动文件

• manage.py: 这是 Django 项目的管理文件，用于启动开发服务器、运行迁移等操作。

  python manage.py runserver
  

前端启动文件

• package.json: 包含了前端项目的依赖和脚本命令。

  {
    "scripts": {
      "serve": "vue-cli-service serve",
      "build": "vue-cli-service build"
    }
  }
  

  使用以下命令启动前端开发服务器：

  npm run serve
  

3. 项目的配置文件介绍

后端配置文件

• settings.py: 包含了 Django 项目的所有配置，如数据库配置、静态文件配置、中间件配置等。

  # settings.py 示例
  DEBUG = True
  ALLOWED_HOSTS = ['*']
  INSTALLED_APPS = [
      'django.contrib.admin',
      'django.contrib.auth',
      'django.contrib.contenttypes',
      'django.contrib.sessions',
      'django.contrib.messages',
      'django.contrib.staticfiles',
      'example',
  ]
  

前端配置文件

• vue.config.js: 包含了 Vue 项目的配置，如代理设置、输出目录等。

  // vue.config.js 示例
  module.exports = {
    devServer: {
      proxy: 'http://localhost:8000'
    }
  }
  

通过以上介绍，您可以更好地理解和使用 django-vue-template 项目。希望这篇教程对您有所帮助！

django-vue-templateDjango Rest + Vue JS Template项目地址:https://gitcode.com/gh_mirrors/dj/django-vue-template