Эта статья для частных лиц, у которых была промежуточная практика с Vue.js и Django отдельно, но нужно направление о том, как сделать эти две рамки работать вместе. Я изложу пример того, как настроить какой-нибудь код котельной с простым структурой проекта с помощью Django и Vue.js. Обратите внимание, что я работаю на MacOS Catalina, поэтому команда оболочек будет варьироваться для вашей операционной системы. Готовый продукт можно найти на моем Github: https://github.com/jordanengstrom/blank_django_vue_project.
На высоком уровне мы будем стремиться к структуре проекта, которая выглядит что-то подобное:
my_project/ | |____ core/ | |____ __init__.py | |____ views.py # class based TemplateView for index.html | | |____ frontend/ # root frontend | |____ src/ # vue components, router, store, etc. | |____ node_modules/ | |____ vue.config.js # important file number 1 | |____ webpack-stats.json # important file number 2 | | |____ my_project/ # root backend | |____ __init__.py | |____ settings.py | |____ urls.py | |____ views.py | | |____ templates/ | |____ index.html # django template that houses vue | |____ .gitignore |____ venv/ |____ requirements.txt |____ manage.py |____ db.sqlite3
Мы начнем с бэкэнда. Создайте пустой каталог для вашего проекта, а затем запустите:
$ django-admin startproject my_project && cd my_project $ mkdir venv && python3 -m venv venv && source venv/bin/activate $ (venv) pip install django djangorestframework $ (venv) mkdir templates && cd templates && touch index.html $ (venv) cd .. $ (venv) mkdir core && touch __init__.py && touch views.py
Это все, что нам нужно сделать с Django сейчас. Мы вернемся к шаблонам/index.html и core/views.py файлы позже. Эта следующая команда предполагает, что вы уже установили VUE глобально. Если у вас нет, просто запустите: NPM установить -G VUE-CLI
$ vue create frontend
Затем пройдите через мастер установки, чтобы ваши пресеты выглядели что-то вроде этого (или настройте ваши пресеты, как вы предпочитаете):
$ Vue CLI v4.3.1 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, Router, Vuex ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes ? Where do you prefer placing config for Babel, ESLint, etc.? In package.json ? Save this as a preset for future projects? (y/N) N ### installation magic happens... 🎉 Successfully created project frontend. 👉 Get started with the following commands: $ cd frontend $ npm run serve
Теперь у нас есть отдельные среды Frontend и Backend! Сервер Frontend будет в http://localhost: 8080/ которые будут отображать страницу посадки VUE, а бэкэнда будет в http://127.0.0.1:8000/ которые будут отображать посадочную страницу Django. Вы можете загнать команды преобразования навыше приведенным выше и отключите бэкэнд в корневом каталоге с помощью:
python manage.py runserver
Теперь эти среды просто должны быть в состоянии поговорить друг с другом. Два инструмента, которые мы будем использовать для достижения этого WebPack-Bundle-Tracker на стороне Vue и Django WebPack погрузчика на бэкэнде.
$ cd frontend $ npm install webpack-bundle-tracker@0.4.3
Нам нужна версия 0.4.3 WebPack-Tracker, потому что файлы Django ожидают, не будут автоматически сгенерированы таким же образом, если мы используем новейшую альфа-версию. Обратите внимание, что 0,4,3 – это последний стабильный выпуск по состоянию на 2020 года. Если мы не укажем эту версию, NPM выйдет по последней версии Alpha, которая не будет работать то же самое. Далее нам нужно создать файл vue.config.js в каталоге frontend:
$ touch vue.config.js
и заполните его этим содержимым:
const BundleTracker = require("webpack-bundle-tracker");
module.exports = {
// on Windows you might want to set publicPath: "http://127.0.0.1:8080/"
publicPath: "http://0.0.0.0:8080/",
outputDir: "./dist/",
chainWebpack: (config) => {
config
.plugin("BundleTracker")
.use(BundleTracker, [{ filename: "./webpack-stats.json" }]);
config.output.filename("bundle.js");
config.optimization.splitChunks(false);
config.resolve.alias.set("__STATIC__", "static");
config.devServer
// the first 3 lines of the following code have been added to the configuration
.public("http://127.0.0.1:8080")
.host("127.0.0.1")
.port(8080)
.hotOnly(true)
.watchOptions({ poll: 1000 })
.https(false)
.disableHostCheck(true)
.headers({ "Access-Control-Allow-Origin": ["*"] });
}
// uncomment before executing 'npm run build'
// css: {
// extract: {
// filename: 'bundle.css',
// chunkFilename: 'bundle.css',
// },
// }
};
Ознакомьтесь с базовыми настройками URL, которые поставляются с маршрутизатором Vue. Если вы пропустите это, вы просто получите такое путь: http://127.0.0.1:8000/http:/0.0.0.0:8080/blah-blah-blah На что я говорю – EW WTF? Исправьте его, удалив конфигурацию базового URL:
const router = new VueRouter({
mode: "history",
// base: process.env.BASE_URL,
routes
});
Как только вы создадите этот файл, раскрутите сервер разработки Frontend и файл WebPack-stats.json будет сгенерирован
npm run serve
Теперь перейдите к корневой каталоге и убедитесь, что ваша виртуальная среда активирована, поэтому мы можем установить Django-WebPack-Loader. Также не стесняйтесь генерировать файл ваших требований:
$ (venv) pip install django-webpack-loader $ pip freeze > requirements.txt
Затем добавьте WebPack_Loader в установленные приложения Django в Settings.py и добавьте следующие изменения в файл settings.py:
INSTALLED_APPS = [
...
'rest_framework',
'webpack_loader',
]
.
.
.
TEMPLATES = [
{ ...
'DIRS': [os.path.join(BASE_DIR, 'templates')],
...
},
]
.
.
.
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "assets"),
os.path.join(BASE_DIR, "frontend/dist"),
]
WEBPACK_LOADER = {
'DEFAULT': {
'BUNDLE_DIR_NAME': 'dist/',
'STATS_FILE': os.path.join(BASE_DIR, 'frontend', 'webpack-stats.json')
}
}
Вставьте это в свои шаблоны/index.html Файл:
{% load render_bundle from webpack_loader %}
Document
Vue JS
{% render_bundle 'app' %}
Вставьте это в ваше Core/Views.py Файл:
from django.conf import settings
from django.views.generic.base import TemplateView
class IndexTemplateView(TemplateView):
def get_template_names(self):
template_name = "index.html"
return template_name
Убедитесь, что они отражены в вашем файле my_project/urls.py:
from django.urls import re_path
from core.views import IndexTemplateView
urlpatterns = [
...
re_path(r"^.*$", IndexTemplateView.as_view(), name="entry-point"),
]
Как только эти изменения будут выполнены, включите свой NPM Server на вкладке в одну терминал, а затем раскрутите свой сервер Django DEV на другом клемме вкладки, и вы должны быть хорошими, чтобы пойти! Счастливое кодирование 😎.
$ npm run serve
$ (venv) python manage.py runserver
Оригинал: “https://dev.to/saymy__name__/hooking-up-django-and-vue-js-19j3”