Vue-Django 开源项目教程

Vue-Django 开源项目教程

vue-django@Django integrated with a full-featured @Webpack + (@vuejs / vue-loader) setup with hot reload, linting, testing & css extraction.项目地址:https://gitcode.com/gh_mirrors/vu/vue-django

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

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

• backend/：Django 后端项目的根目录。
  • manage.py：Django 项目的管理脚本。
  • backend/：Django 应用的配置目录。
    • __init__.py：标识这是一个 Python 包。
    • settings.py：Django 项目的配置文件。
    • urls.py：Django 项目的 URL 配置。
    • wsgi.py：WSGI 服务器的入口点。
• frontend/：Vue.js 前端项目的根目录。
  • package.json：前端项目的依赖和脚本配置。
  • public/：公共资源目录，包含 index.html。
  • src/：前端源代码目录。
    • assets/：静态资源目录。
    • components/：Vue 组件目录。
    • App.vue：Vue 根组件。
    • main.js：Vue 应用的入口文件。
• README.md：项目说明文档。

2. 项目的启动文件介绍

后端启动文件

• manage.py：Django 项目的管理脚本，用于启动开发服务器、运行迁移等操作。

  python manage.py runserver
  

前端启动文件

• main.js：Vue 应用的入口文件，负责创建 Vue 实例并挂载到 DOM 上。

  import Vue from 'vue'
  import App from './App.vue'
  
  new Vue({
    render: h => h(App),
  }).$mount('#app')
  

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',
  ]
  DATABASES = {
      'default': {
          'ENGINE': 'django.db.backends.sqlite3',
          'NAME': BASE_DIR / 'db.sqlite3',
      }
  }
  

前端配置文件

• package.json：前端项目的依赖和脚本配置，包含项目依赖、开发依赖和脚本命令。

  {
    "name": "frontend",
    "version": "1.0.0",
    "scripts": {
      "serve": "vue-cli-service serve",
      "build": "vue-cli-service build"
    },
    "dependencies": {
      "vue": "^2.6.11"
    },
    "devDependencies": {
      "@vue/cli-service": "^4.5.0"
    }
  }
  

以上是 Vue-Django 开源项目的目录结构、启动文件和配置文件的详细介绍。希望这些信息能帮助你更好地理解和使用该项目。

vue-django@Django integrated with a full-featured @Webpack + (@vuejs / vue-loader) setup with hot reload, linting, testing & css extraction.项目地址:https://gitcode.com/gh_mirrors/vu/vue-django