introduction

Construisons le côté serveur avec Python Django et le site client avec Vue.js.

Les applications Django sont créées avec cookiecutter.

Environnement

Python

installation pyenv

--Mac: Installer l'environnement Python sur un PC local (pyenv, venv sur Mac) --WSL: Je suis désolé, je ne l'ai pas encore créé. Après l'avoir créé, collez le lien.

Installation de Python 3.9.0

pyenv versions

Affichez la liste des versions installées avec, et si «3.9.0» n'existe pas, installez-le.

pyenv install 3.9.0

Créer un environnement virtuel pour exécuter cookiecutter

pyenv shell 3.9.0
python -m venv ~/.venv/3.9.0/cookiecutter-3.9
pyenv shell --unset  #Quittez le shell pyenv.

Créer un environnement virtuel pour exécuter les applications Django

pyenv shell 3.9.0
python -m venv ~/.venv/3.9.0/django-sample-3.9
pyenv shell --unset  #Quittez le shell pyenv.

nodenv

installation de nodenv

--Mac: Installez nodenv sur Mac, activez n'importe quelle version --WSL: Installer nodenv sur WSL, activer n'importe quelle version

Installation de node.js 13.11.0

nodenv versions

Affichez la liste des versions installées avec, et si «13.11.0» n'existe pas, installez-la.

nodenv install 13.11.0

Confirmation de version

nodenv versions

création et exécution d'applications cookiecutter

Créer un environnement pour cookiecutter

mkdir cookiecutter
cd cookiecutter/
source ~/.venv/3.9.0/cookiecutter-3.9/bin/activate
pip install --upgrade pip
pip install cookiecutter

exécution de cookiecutter

cookiecutter https://github.com/pydanny/cookiecutter-django

Diverses questions vous seront posées de manière interactive, alors continuez tout en répondant.

【Mise en garde】 Si vous sélectionnez "3" (Aucun) dans Select cloud_provider et le définissez sur" n "dans ʻuse_whitenoise, l'erreur suivante se produira, alors sélectionnez" 1 "ou" 2 "dans Select cloud_provider. Ou, répondez "y" avec ʻuse_whitenoise.

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!

Question	Défaut	Réglage	Remarques
project_name	My Awesome Project	django-sample
project_slug	django_sample	app
description	Behold My Awesome Project!	Django Sample Application	Il n'y a pas de problème tel quel
author_name	Daniel Roy Greenfeld	*****	Entrez votre nom
domain_name	example.com	(Défaut)	Je pense que ça sera changé plus tard, mais pour le moment, ça va comme ça
email	[email protected]	Entrez votre adresse email~
version	0.1.0	(Défaut)
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	Sélectionnez une licence pour la rendre open source
timezone	UTC	Asia/Tokyo
windows	n	(Défaut)
use_pycharm	n	(Défaut)	Si vous utilisez PyCharm, vous pouvez le définir sur y
use_docker	n	(Défaut)
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	(Défaut)	Dans mon cas, j'utilise souvent MySQL et MariaDB, donc je le changerai plus tard, donc ici je vais procéder par défaut selon le cas.
Select js_task_runner: 1 - None 2 - Gulp Choose from 1, 2	1	(Défaut)
Select cloud_provider: 1 - AWS 2 - GCP 3 - None Choose from 1, 2, 3	1	3	Étant donné que le fournisseur de cloud n'a pas été choisi, définissez-le sur 3. Si vous avez déjà décidé, je pense que 1-2 est bien.
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	Si vous avez décidé quoi utiliser pour le service d'envoi d'e-mails, sélectionnez-le.
use_async	n	(Défaut)
use_drf	n	(Défaut)
custom_bootstrap_compilation	n	(Défaut)
use_compressor	n	(Défaut)
use_celery	n	(Défaut)
use_mailhog	n	(Défaut)
use_sentry	n	(Défaut)
use_whitenoise	n	y	Si vous spécifiez Aucun dans le fournisseur de cloud, il semble que vous deviez sélectionner y ici
use_heroku	n	(Défaut)
Select ci_tool: 1 - None 2 - Travis 3 - Gitlab 4 - Github Choose from 1, 2, 3, 4	1	(Défaut)
keep_local_envs_in_vcs	y	(Défaut)
debug	n	(Défaut)

Lorsque l'exécution de cookiecutter est terminée, le répertoire avec le nom du slug répondu dans project_slug sera créé. Déplacez ce répertoire directement sous votre répertoire personnel en tant que django-sample.

/bin/cp -Ra app ~/django-sample

Création d'applications Vue.js

mkdir ~/vue-sample/
cd ~/vue-sample/
nodenv local 13.11.0
node -v  #la version du nœud est v13.11.Confirmez qu'il est 0

npm init --yes
npm install npm  #Mettre à jour npm

npm install @vue/cli
npm install @vue/cli-init

Ensuite, pour passer le chemin, procédez comme suit:

npm bin

Pour Mac

/Users/*****/vue-sample/node_modules/.bin

S'affiche, ajoutez ce chemin à votre PATH.

export PATH="/Users/*****/vue-sample/node_modules/.bin:$PATH"

Créez un projet.

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

Si vous réussissez à créer l'application,

# Project initialization finished!
# ========================

To get started:

  cd vue-sample
  npm run dev

S'affiche, exécutez la commande suivante pour exécuter l'application.

cd vue-sample
npm run dev

Your application is running here: http://localhost:8080

Est affiché, accédez à [http: // localhost: 8080](http: // localhost: 8080).

Essayez de créer une application Web avec Vue.js et Django (édition Mac) - (1) Construction d'environnement, création d'application