Skip to content

Combine with frontend (Vue.js) and backend (Django) and CRUD by using the rest-framework.

Notifications You must be signed in to change notification settings

linth/django-vue

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

django-vue

Combine with frontend (Vue.js) and backend (Django) and CRUD by using the rest-framework.

Usage

$ 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

How to create a new django and vue

  1. Install django packages
$ pip install django==2
$ pip install django-cors-headers
  1. Create a django project and application.
$ django-admin startproject django_vue
$ cd django_vue
$ python manage.py startapp backend
  1. 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
  1. 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')),
]
  1. Create a new Vue project.
$ vue-init webpack frontend
$ cd frontend
$ npm install
$ npm run build
  1. Run server
$ python manage.py runserver

About

Combine with frontend (Vue.js) and backend (Django) and CRUD by using the rest-framework.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published