Git Product home page Git Product logo

django-vue's Introduction

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

django-vue's People

Contributors

linth avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.