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 г.