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

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!

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