1、使用django创建项目:
django-admin startproject ocr_manager
2、进入项目根目录,创建django的App:
python manage.py startapp backend
3、在项目根目录创建Vue项目:
vue-init webpack frontend
项目目录如下所示:
├── backend │ ├── __init__.py │ ├── admin.py │ ├── migrations │ │ └── __init__.py │ ├── models.py │ ├── tests.py │ └── views.py ├── frontend │ ├── README.md │ ├── build │ │ └── .... │ ├── config │ │ ├── dev.env.js │ │ ├── index.js │ │ ├── prod.env.js │ │ └── test.env.js │ ├── index.html │ ├── package.json │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ └── Hello.vue │ │ └── main.js │ ├── static │ └── test │ └── ... ├── manage.py └── ocr_manager ├── __init__.py ├── settings.py ├── urls.py └── wsgi.py ├── backend │ ├── __init__.py │ ├── admin.py │ ├── migrations │ │ └── __init__.py │ ├── models.py │ ├── tests.py │ └── views.py ├── template │ ├── index.html │ ├...... ├── manage.py └── ocr_manager ├── __init__.py ├── settings.py ├── urls.py └── wsgi.py
4、打包Vue项目:
cd frontend # 进入到创建的 cnpm install # 安装需要的因依赖库 cnpm run dev # 运行调试的服务,启动web服务。 cnpm run build # 打包vue项目,会将所有东西打包成一个dist文件夹
修改django的settings:
TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': ['frontend/dist'], #更改这里 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', ], }, }, ] STATICFILES_DIRS = [ ## 添加静态文件路径 os.path.join(BASE_DIR, "frontend/dist/static"), ]
运行服务:python manage.py runserver