Django - это фреймворк для веб-разработки на Python, который был первоначально выпущен в 2005 году. Неудивительно, что существуют проекты django возрастом 10 лет, некоторые из нас могли даже унаследовать такие проекты. Доказано, что метод, показанный в этом руководстве, работает в Django 1.8 и выше. Для более ранней версии Django могут потребоваться небольшие изменения.

Эта интеграция будет использовать js-пакет laravel-mix, который используется в проекте Laravel для интеграции Vue.

Сказанного достаточно, давайте сделаем дело.

Предположим, ваш проект имеет следующую структуру:

-django-project/
    -django-project/
        settings.py 
        urls.py 
-static/ 
-templates/
    base.html

Сначала вы должны создать файл package.json в каталоге нашего проекта, и он должен иметь следующее содержимое

Он содержит необходимые зависимости для начала работы. После создания этого файла вы можете запускать yarn install или npm install в зависимости от того, какой менеджер пакетов вы используете.

В каталоге вашего проекта создайте папку ресурсов, она должна иметь следующую структуру;

-resources/ 
    -js/
        -components/ 
    app.js 
    bootstrap.js 
-sass 
    app.scss

Затем вы должны создать webpack.mix.js файл в каталоге вашего проекта со следующим содержимым;

Код в этом файле берет файл app.js в каталоге ресурсов, обрабатывает его и помещает скомпилированный файл js в vue-app.js, то же самое с файлом app.scss. Предполагается, что папка assets - это одно из мест, где python manage.py collectstatic ищет статические файлы.

Вам нужно поместить код в наши app.js и bootstrap.js файлы.

Создаваемые вами компоненты регистрируются в этом файле с использованием синтаксиса. Это сделано для того, чтобы Vue знал, где найти какой компонент и как его визуализировать.

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

Это означает, что компонент ExampleComponent будет отображаться в вашем HTML с использованием разметки <example-component></example-component>

Теперь вы можете создать образец компонента в resources/js/components. Вы должны назвать файл ExampleComponent.vue

Так как же перенести все это в свое приложение django? Помните, что вы создали файл base.html в каталоге шаблонов. Предполагается, что другие шаблоны наследуются от файла base.html, или, другими словами, base.html является файлом макета.

Итак, ваш файл base.html выглядит следующим образом. Обратите внимание, что мы добавили тег скрипта в конце тела, чтобы получить наш скомпилированный файл javascript.

Давайте теперь создадим файл index.html

ExampleComponent будет отображаться там, где находится <example-component></example-component>.

Сделанное здесь предположение состоит в том, что ваш индексный маршрут делает это return render(request, 'index.html') или каким-то другим образом отображает страницу index.html.

Чтобы все это было подготовлено и готово к употреблению, запустите npm run dev или yarn run dev в командной строке, в зависимости от того, какой менеджер пакетов вы используете. Это скомпилирует ваши компоненты Vue в файл .js.

Теперь перейдите в свой браузер и перейдите по URL-адресу индекса, он должен хорошо отображаться

Размер пакета файла vue-app.js может быть немного большим. Вам следует подумать об удалении импорта, который вам не нужен. Вы можете обратиться к этой статье Дженнифер Бланд о лучших способах уменьшить размер пакета. Https://medium.com/js-dojo/how-to-reduce-your-vue-js-bundle-size-with-webpack-3145bf5019b7

Также не забудьте добавить node_modules/ в ваш .gitignore файл

Отказ от ответственности: большая часть написанного здесь кода была создана не мной, они были взяты из проекта Laravel и адаптированы для работы в django с небольшими изменениями. Я не претендую на право собственности на код.

Первоначально опубликовано на сайте http://blog.ayoola.xyz 3 апреля 2020 г.