Combine with frontend (Vue.js) and backend (Django) and CRUD by using the rest-framework.
$ git clone https://github.com/linth/django-vue.git
$ cd django-vue/frontend
$ npm install
$ npm run build
cd ..
$ pip install -r requirent.txt
$ python manage.py makemigrations
$ python manage.py migrate
$ python manage.py runserver
- Install django packages
$ pip install django==2
$ pip install django-cors-headers
- Create a django project and application.
$ django-admin startproject django_vue
$ cd django_vue
$ python manage.py startapp backend
- Edit settings.py in the django project.
# settings.py
INSTALLED_APPS = [
...
...
'backend',
]
MIDDLEWARE = [
...
...
'corsheaders.middleware.CorsMiddleware',
]
TEMPLATES = [
{
...
'DIRS': ['frontend/dist'],
...
},
]
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "frontend/dist/static"),
]
CORS_ORIGIN_ALLOW_ALL = True
- Edit the urls.py in the django project.
# urls.py
from django.views.generic import TemplateView
urlpatterns = [
path('admin/', admin.site.urls),
path('', TemplateView.as_view(template_name='index.html')),
]
- Create a new Vue project.
$ vue-init webpack frontend
$ cd frontend
$ npm install
$ npm run build
- Run server
$ python manage.py runserver