Como fazer amigos para um projeto no resto framework com vue? Você pode criar um projeto vue no diretório com o projeto django usando vue-cli. Indo a ele e digitando yarn build, na saída, encontramos o diretório dist index.html arquivos e os diretórios css e js. Sim, css e js podem ser colocados em estática e criar um modelo a partir de index.html.
Adicionando os subdiretórios static / frontend e templates / frontend e os arquivos __init__.py e urls.py ao diretório com o front-end (digamos que chamamos de front-end), podemos adicionar front-end ao INSTALLED_APPS. Em urls.py, algo como
path('', TemplateView.as_view(template_name='frontend/index.html'), name='frontend-index'), suficiente
path('', TemplateView.as_view(template_name='frontend/index.html'), name='frontend-index'),Para que os arquivos cheguem ao local em que precisavam ser montados, corrigimos a compilação no package.json para
"vue-cli-service build && (rm -rf static/frontend/ 2>/dev/null || true) && sed 's/=\\//=\\/static\\/frontend\\//g' dist/index.html > templates/frontend/index.html && mv dist static/frontend"
"vue-cli-service build && (rm -rf static/frontend/ 2>/dev/null || true) && sed 's/=\\//=\\/static\\/frontend\\//g' dist/index.html > templates/frontend/index.html && mv dist static/frontend"
Ao mesmo tempo, fixamos os caminhos com sed.
Para automatizar tudo, eu fiz
django_vue_generator . Ele adiciona os comandos de gerenciamento start_frontend e build_frontend. Mas isso não é tudo! Ele gera automaticamente formulários com validação no cliente a partir de seus serializadores. E ele cria componentes com formulários para o projeto viewset drf. E os componentes da lista são os mesmos para eles. Com paginação e filtração.
A exibição da lista pode ser redefinida usando slots.
Está incluído um projeto de demonstração com o arquivo run.sh, que deve coletar tudo o que você precisa.