[PYTHON] Versuchen Sie, eine Webanwendung mit Vue.js und Django (Mac Edition) zu erstellen - (1) Umgebungskonstruktion, Anwendungserstellung
Einführung
Lassen Sie uns die Serverseite mit Python Django und die Client-Site mit Vue.js erstellen.
Django-Anwendungen werden mit einem Ausstecher erstellt.
Umgebung
Python
pyenv Installation
--Mac: Python-Umgebung auf lokalem PC installieren (pyenv, venv auf Mac) --WSL: Es tut mir leid, ich habe es noch nicht erstellt. Fügen Sie nach dem Erstellen den Link ein.
Installation von Python 3.9.0
pyenv versions
Zeigen Sie die Liste der installierten Versionen mit an, und installieren Sie sie, falls "3.9.0" nicht vorhanden ist.
pyenv install 3.9.0
Erstellen Sie eine virtuelle Umgebung zum Ausführen des Ausstechers
pyenv shell 3.9.0
python -m venv ~/.venv/3.9.0/cookiecutter-3.9
pyenv shell --unset #Verlasse die Pyenv-Schale.
Erstellen Sie eine virtuelle Umgebung zum Ausführen von Django-Anwendungen
pyenv shell 3.9.0
python -m venv ~/.venv/3.9.0/django-sample-3.9
pyenv shell --unset #Verlasse die Pyenv-Schale.
nodenv
nodenv Installation
--Mac: nodenv auf Mac installieren, beliebige Version aktivieren --WSL: nodenv auf WSL installieren, beliebige Version aktivieren
Installation von node.js 13.11.0
nodenv versions
Zeigen Sie die Liste der installierten Versionen mit an, und installieren Sie sie, wenn 13.11.0 nicht vorhanden ist.
nodenv install 13.11.0
Versionsbestätigung
nodenv versions
Erstellung und Ausführung von Cookiecutter-Anwendungen
Erstellen Sie eine Umgebung für den Ausstecher
mkdir cookiecutter
cd cookiecutter/
source ~/.venv/3.9.0/cookiecutter-3.9/bin/activate
pip install --upgrade pip
pip install cookiecutter
Ausführung des Ausstechers
cookiecutter https://github.com/pydanny/cookiecutter-django
Ihnen werden interaktiv verschiedene Fragen gestellt. Fahren Sie also mit der Beantwortung fort.
【Hinweis】 Wenn Sie "3" (Keine) in "Cloud_provider auswählen" auswählen und in "use_whitenoise" auf "n" setzen, tritt der folgende Fehler auf. Wählen Sie daher "1" oder "2" in "Cloud-Anbieter auswählen". Oder antworten Sie mit "use_whitenoise" mit "y".
You should either use Whitenoise or select a Cloud Provider to serve static files
ERROR: Stopping generation because pre_gen_project hook script didn't exit successfully
Hook script failed (exit status: 1)
project_name [My Awesome Project]: django-sample
project_slug [django_sample]: app
description [Behold My Awesome Project!]: Django Sample Application
author_name [Daniel Roy Greenfeld]: *****
domain_name [example.com]:
email [[email protected]]: *****@*****.***
version [0.1.0]:
Select open_source_license:
1 - MIT
2 - BSD
3 - GPLv3
4 - Apache Software License 2.0
5 - Not open source
Choose from 1, 2, 3, 4, 5 [1]: 5
timezone [UTC]: Asia/Tokyo
windows [n]:
use_pycharm [n]:
use_docker [n]:
Select postgresql_version:
1 - 12.3
2 - 11.8
3 - 10.8
4 - 9.6
5 - 9.5
Choose from 1, 2, 3, 4, 5 [1]:
Select js_task_runner:
1 - None
2 - Gulp
Choose from 1, 2 [1]:
Select cloud_provider:
1 - AWS
2 - GCP
3 - None
Choose from 1, 2, 3 [1]: 3
Select mail_service:
1 - Mailgun
2 - Amazon SES
3 - Mailjet
4 - Mandrill
5 - Postmark
6 - Sendgrid
7 - SendinBlue
8 - SparkPost
9 - Other SMTP
Choose from 1, 2, 3, 4, 5, 6, 7, 8, 9 [1]: 9
use_async [n]:
use_drf [n]:
custom_bootstrap_compilation [n]:
use_compressor [n]:
use_celery [n]:
use_mailhog [n]:
use_sentry [n]:
use_whitenoise [n]: y
use_heroku [n]:
Select ci_tool:
1 - None
2 - Travis
3 - Gitlab
4 - Github
Choose from 1, 2, 3, 4 [1]:
keep_local_envs_in_vcs [y]:
debug [n]:
[INFO]: .env(s) are only utilized when Docker Compose and/or Heroku support is enabled so keeping them does not make sense given your current setup.
[WARNING]: You chose not to use a cloud provider, media files won't be served in production.
[SUCCESS]: Project initialized, keep up the good work!
| Frage | Standard | Aufbau | Bemerkungen |
|---|---|---|---|
| project_name | My Awesome Project | django-sample | |
| project_slug | django_sample | app | |
| description | Behold My Awesome Project! | Django Sample Application | Es gibt kein Problem wie es ist |
| author_name | Daniel Roy Greenfeld | ***** | Gib deinen Namen ein |
| domain_name | example.com | (Standard) | Ich denke, es wird später geändert, aber vorerst ist es okay, wie es ist |
| [email protected] | Geben sie ihre E-Mailadresse ein~ | ||
| version | 0.1.0 | (Standard) | |
| Select open_source_license 1 - MIT 2 - BSD 3 - GPLv3 4 - Apache Software License 2.0 5 - Not open source Choose from 1, 2, 3, 4, 5 |
1 | 5 | Wählen Sie eine Lizenz aus, um sie als Open Source zu erstellen |
| timezone | UTC | Asia/Tokyo | |
| windows | n | (Standard) | |
| use_pycharm | n | (Standard) | Wenn Sie PyCharm verwenden, können Sie es auf y setzen |
| use_docker | n | (Standard) | |
| Select postgresql_version: 1 - 12.3 2 - 11.8 3 - 10.8 4 - 9.6 5 - 9.5 Choose from 1, 2, 3, 4, 5 |
1 | (Standard) | In meinem Fall verwende ich häufig MySQL oder MariaDB, daher werde ich es später ändern, sodass ich hier standardmäßig entsprechend vorgehen werde. |
| Select js_task_runner: 1 - None 2 - Gulp Choose from 1, 2 |
1 | (Standard) | |
| Select cloud_provider: 1 - AWS 2 - GCP 3 - None Choose from 1, 2, 3 |
1 | 3 | Da der Cloud-Anbieter noch nicht festgelegt wurde, setzen Sie ihn auf 3. Wenn Sie sich bereits entschieden haben, denke ich, dass 1-2 in Ordnung ist. |
| Select mail_service: 1 - Mailgun 2 - Amazon SES 3 - Mailjet 4 - Mandrill 5 - Postmark 6 - Sendgrid 7 - SendinBlue 8 - SparkPost 9 - Other SMTP Choose from 1, 2, 3, 4, 5, 6, 7, 8, 9 |
1 | 9 | Wenn Sie entschieden haben, was für den E-Mail-Versanddienst verwendet werden soll, wählen Sie ihn aus. |
| use_async | n | (Standard) | |
| use_drf | n | (Standard) | |
| custom_bootstrap_compilation | n | (Standard) | |
| use_compressor | n | (Standard) | |
| use_celery | n | (Standard) | |
| use_mailhog | n | (Standard) | |
| use_sentry | n | (Standard) | |
| use_whitenoise | n | y | Wenn Sie im Cloud-Anbieter Keine angeben, müssen Sie anscheinend hier y auswählen |
| use_heroku | n | (Standard) | |
| Select ci_tool: 1 - None 2 - Travis 3 - Gitlab 4 - Github Choose from 1, 2, 3, 4 |
1 | (Standard) | |
| keep_local_envs_in_vcs | y | (Standard) | |
| debug | n | (Standard) |
Wenn die Ausführung des Cookie-Cutters abgeschlossen ist, wird das Verzeichnis mit dem in project_slug beantworteten Slug-Namen erstellt.
Verschieben Sie dieses Verzeichnis direkt unter Ihr Home-Verzeichnis als "Django-Sample".
/bin/cp -Ra app ~/django-sample
Vue.js Anwendungserstellung
mkdir ~/vue-sample/
cd ~/vue-sample/
nodenv local 13.11.0
node -v #Die Knotenversion ist v13.11.Bestätigen Sie, dass es 0 ist
npm init --yes
npm install npm #Update npm
npm install @vue/cli
npm install @vue/cli-init
Gehen Sie dann wie folgt vor, um den Pfad zu passieren:
npm bin
Für Mac
/Users/*****/vue-sample/node_modules/.bin
Wird angezeigt, fügen Sie diesen Pfad Ihrem PFAD hinzu.
export PATH="/Users/*****/vue-sample/node_modules/.bin:$PATH"
Erstellen Sie ein Projekt.
vue init webpack vue-sample
? Project name vue-sample
? Project description A Vue.js project
? Author
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm
Wenn Sie die Anwendung erfolgreich erstellen können,
# Project initialization finished!
# ========================
To get started:
cd vue-sample
npm run dev
Wird angezeigt, führen Sie den folgenden Befehl aus, um die Anwendung auszuführen.
cd vue-sample
npm run dev
Your application is running here: http://localhost:8080
Wird angezeigt, greifen Sie auf [http: // localhost: 8080](http: // localhost: 8080) zu.
Recommended Posts