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

image.png

Recommended Posts

Essayez de créer une application Web avec Vue.js et Django (édition Mac) - (1) Construction d'environnement, création d'application
Créer une application Web avec Django
Application Web réalisée avec Python3.4 + Django (Construction de l'environnement Part.1)
Créer une application Web avec Django
(Pour les débutants) Essayez de créer une API Web simple avec Django
Lancement d'une application Web sur AWS avec django et modification des tâches
J'ai fait une application WEB avec Django
Faisons une application qui affaiblit les nerfs avec Vue.js et Django-Rest-Framework [Partie 4] ~ Construction MySQL et migration de base de données avec Docker ~
Retour sur la création d'un service Web avec Django 1
(Python) Essayez de développer une application Web en utilisant Django
Retour sur la création d'un service Web avec Django 2
Essayez d'exécuter python dans l'environnement Django créé avec pipenv
Construction de l'environnement Mac + Eclipse (PyDev) + Django
Créer une application Web avec Flask ②
Déployer l'application Django avec Docker
Créer une application Web pour la transcription vocale
Créer une application Web avec Flask ①
Créer une application Web avec Flask ③
Créer une application Web avec Flask ④
Créer un environnement avec pyenv et pyenv-virtualenv
Application Web réalisée avec Python + Flask (en utilisant VScode) # 1-Construction d'environnement virtuel-
Créez un environnement Python sur votre Mac avec Anaconda et PyCharm
Pratique de développement d'applications Web: Créez une page de création d'équipe avec Django! (Page de création de décalage)
Création d'une application de gestion de score shogi à l'aide de Django 1-Construction de l'environnement-
[DynamoDB] [Docker] Créer un environnement de développement pour DynamoDB et Django avec docker-compose
Construction de l'environnement LaTeX et R (un peu Python) avec SublimeText3 (Windows)
Vue.js + Mémorandum de construction de l'environnement Flask ~ avec Anaconda3 ~
Développement d'applications WEB à l'aide de django-Construction d'environnement de développement-
Que diriez-vous de créer un environnement virtuel avec Anaconda et de faire une installation pip?
Pratique de développement d'applications Web: Créez une page de création d'équipe avec Django! (Introduction)
Créer un écran de connexion dans Django all auth
[Python] Une application web rapide avec Bottle!
"Classification des déchets par image!" Journal de création d'application jour3 ~ Application Web avec Django ~
Exécutez une application Web Python avec Docker
Créer une application Todo avec Django ④ Implémenter la fonction de création de dossier et de tâche
Un mémo rempli de construction d'environnement RADEX
Créez un environnement Python 3 avec pyenv sur Mac et affichez des graphiques Network X
Construisez un environnement de simulateur de drone et essayez un vol simple avec Mission Planner
Création de carte Ramen avec Scrapy et Django
Explication facile à comprendre de l'application Web Python (Django) même pour les débutants (1) [Construction de l'environnement]
[Développement personnel] Une histoire sur la création d'une application pour les artistes avec SPA avec Django REST Framework et Vue-Cli [DRF + Vue.js]
Ce à quoi j'étais accro lors de la création d'applications Web dans un environnement Windows
Faisons une application qui affaiblit les nerfs avec Vue.js et Django-Rest-Framework [Partie 3] ~ Implémentation de la faiblesse nerveuse ~
Créer un environnement d'analyse de données qui relie l'authentification GitHub et Django avec JupyterHub
L'histoire de la création d'une application Web qui enregistre des lectures approfondies avec Django
Créer un projet et une application Django dans un environnement virtuel Python et démarrer le serveur
Faisons une application qui affaiblit les nerfs avec Vue.js et Django-Rest-Framework [Partie 1] ~ Django setup ~
Faisons une application qui affaiblit les nerfs avec Vue.js et Django-Rest-Framework [Partie 6] ~ Authentification utilisateur 2 ~
WEB grattage avec python et essayez de créer un nuage de mots à partir des critiques
Faisons une application qui affaiblit les nerfs avec Vue.js et Django-Rest-Framework [Partie 5] ~ Authentification des utilisateurs ~
Comment exécuter une application Django sur un conteneur Docker (environnement de développement et de production)
Installer et configurer Jupyter Notebook pour créer un environnement de création de notes d'étude [Mac]
[Python] Comment créer un environnement de serveur Web local avec SimpleHTTPServer et CGIHTTPServer
Construction de l'environnement Python3 TensorFlow (Mac et pyenv virtualenv)
Construction de l'environnement MacOS 10.11: Powerline avec Anaconda et Dein.vim
Construire un environnement python avec virtualenv et direnv
Développement d'une application WEB avec Django [Création de l'écran d'administration]
Jusqu'à la création de l'application Django par terminal (environnement de développement)