django-with-vuejs - GitLite

KO | EN

gitlite — search

#python #hacktoberfest #typescript #golang #android #linux #docker #nodejs #java #windows #cli #kubernetes #vue #mcp

django-with-vuejs

(★ 428)

Fast and clear in DevOps.

File Explorer

Download Latest Version (.zip)

- - README.md
  - requirements.txt
- - __init__.py
  - settings.py
  - urls.py
  - wsgi.py
- - .babelrc
  - .editorconfig
  - .gitignore
  - .postcssrc.js
  - index.html
  - package.json
  - README.md
- manage.py
- requirements.txt
.gitignore
LICENSE
README-zh.md
README.md

# Installation Guide

1. Get the code

git clone https://github.com/tmpbook/django-with-vuejs

Downloads the entire project code from GitHub to your computer.

cd django-with-vuejs

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install

Downloads and installs the libraries listed in package.json.

npm run build

Builds optimized production files.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

3. Python

Easy

Prerequisites

Git Needed to download the project code from GitHub.
Python 3 On Windows, be sure to check 'Add Python to PATH' during installation.

pip install -r requirements.txt

Installs the Python libraries listed in requirements.txt (or similar).

✅ If it runs without errors and prints output in the terminal, it worked.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# django-with-vuejs

Fast and clear in DevOps. [中文 README.md](/README-zh.md)

Simple is better.

> Why [Django Project](/examples/django-auth-with-react/backend) dir and [Frontend](/examples/django-auth-with-react/frontend) dir are the same level in [example/django-auth-with-react](/examples/django-auth-with-react) dir，but it's not in [project](/project) dir?

That is because the django-auth-with-react project is completely a front-end separation project.

### Step 1: Install frontend dependencies

In the directory where the package.json file is located

```bash
cd django-with-vuejs/project/vue2_frontend
npm install
```

### Step 2: Build the front end

In the frontend directory

```bash
npm run build
```

### Step 3: Start the project with Django's own server

In the directory where manage.py is located

```bash
pip install -r requirements.txt
python manage.py runserver
```

All done.

---

but if you want to know the principle, keep reading

## Principle

- index.html
- static/\*

### First. index.html

Handle the `index.html` file with [django template engines](https://docs.djangoproject.com/en/dev/topics/templates/)

In `settings.py`

```python
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        # 'DIRS': [],
        'DIRS': ['vue2_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',
            ],
        },
    },
]
```

We change the `TEMPLATES.DIRS` so that _django template engines_ know where to find the **index.html**.

### Second. static/\*

In `settings.py`

```python
STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "vue2_frontend/dist/static"),
]
```

We add `STATICFILES_DIRS` setting in settings.py, this can make django find the resource

```html
<script type=text/javascript src=/static/js/vendor.677ef0c9485c32b4f6a9.js></script>
```

in _vue2_frontend/dist/static_ directory, but it worked only in debug mode.

---

## Production

We use Nginx to handle the frontend:

- index.html
- static/\*

Django only handle the API which `Content-Type` is `application/json`.

---

## Any questions?

[New issues](https://github.com/tmpbook/django-with-vuejs/issues/new)