|
1 | 1 | # Django Vite Vue |
2 | 2 |
|
| 3 | +[](https://pypi.org/project/django-vitevue/) |
| 4 | + |
3 | 5 | Manage Vitejs frontends and compile them to Django static files and templates. Some management |
4 | 6 | commands are available: |
5 | 7 |
|
@@ -268,105 +270,6 @@ export default class Market { |
268 | 270 |
|
269 | 271 | ## Example |
270 | 272 |
|
271 | | -### Backend |
272 | | - |
273 | | -Create a project directory and initialize a Django project with *static* and *templates* folders: |
274 | | - |
275 | | - ``` |
276 | | - pip install django django-vitevue |
277 | | - mkdir my_project |
278 | | - cd my_project |
279 | | - django-admin createproject my_project |
280 | | - cd my_project |
281 | | - mkdir templates static |
282 | | - cd .. |
283 | | - ``` |
284 | | - |
285 | | -Add `"vv",` to `INSTALLED_APPS` |
286 | | - |
287 | | -Configure the basic settings: |
288 | | - |
289 | | - ```python |
290 | | -TEMPLATES = [ |
291 | | - { |
292 | | - "BACKEND": "django.template.backends.django.DjangoTemplates", |
293 | | - "DIRS": [BASE_DIR / "templates"], |
294 | | - # ... |
295 | | - }, |
296 | | -] |
297 | | - |
298 | | -STATICFILES_DIRS = [ |
299 | | - BASE_DIR / "static", |
300 | | -] |
301 | | - |
302 | | -STATIC_URL = "/static/" |
303 | | - ``` |
304 | | - |
305 | | -Add an url to view the index template: |
306 | | - |
307 | | - ```python |
308 | | -from django.urls import path |
309 | | -from django.views.generic import TemplateView |
310 | | - |
311 | | -urlpatterns = [ |
312 | | - # ... |
313 | | - path("", TemplateView.as_view(template_name="index.html")), |
314 | | -] |
315 | | - ``` |
316 | | - |
317 | | -### Frontend |
318 | | - |
319 | | -Initialize a Vue 3 Typescript frontend: |
320 | | - |
321 | | - ``` |
322 | | - yarn create vite frontend --template=vue-ts |
323 | | - cd frontend |
324 | | - yarn install |
325 | | - cd .. |
326 | | - ``` |
327 | | - |
328 | | -### Run |
329 | | - |
330 | | -Run the migrations: |
331 | | - |
332 | | - ``` |
333 | | - python my_project/manage.py migrate |
334 | | - ``` |
335 | | - |
336 | | -Generate the frontend config. Dry run: |
337 | | - |
338 | | - ``` |
339 | | - python my_project/manage.py viteconf |
340 | | - ``` |
341 | | - |
342 | | -Install the frontend dev dependencies as indicated in the command output message: |
343 | | - |
344 | | - ``` |
345 | | - cd frontend |
346 | | - yarn add -D move-file-cli del-cli npm-run-all |
347 | | - cd .. |
348 | | - ``` |
349 | | - |
350 | | -Then write the config to *vite.config.ts* and *package.json*: |
351 | | - |
352 | | - ``` |
353 | | - python my_project/manage.py viteconf -w |
354 | | - ``` |
355 | | - |
356 | | -Build the frontend: |
357 | | - |
358 | | - ``` |
359 | | - cd frontend |
360 | | - yarn build |
361 | | - cd .. |
362 | | - ``` |
363 | | - |
364 | | -Run the server: |
365 | | - |
366 | | - ``` |
367 | | - python my_project/manage.py runserver |
368 | | - ``` |
369 | | - |
370 | 273 | Example repository: https://github.com/synw/django-vitevue-example |
371 | 274 |
|
372 | 275 | ## Run the tests |
|
0 commit comments