Chapter 02

Django Vue 初期設定

hello_yogurt
hello_yogurt
2022.07.23に更新

cd desktop

mkdir django_vue

cd django_vue

仮想環境
python3 -m venv myvenv

source myvenv/bin/activate

requirements.lock
asgiref==3.5.2
async-generator==1.10
attrs==21.4.0
beautifulsoup4==4.11.1
certifi==2022.6.15
cffi==1.15.0
charset-normalizer==2.0.12
cryptography==37.0.3
Django==3.2.13
django-cors-headers==3.13.0
djangorestframework==3.11.2
djangorestframework-jwt==1.11.0
h11==0.13.0
idna==3.3
lxml==4.9.0
outcome==1.2.0
pycparser==2.21
PyJWT==1.7.1
pyOpenSSL==22.0.0
PySocks==1.7.1
pytz==2022.1
requests==2.28.0
selenium==4.3.0
sniffio==1.2.0
sortedcontainers==2.4.0
soupsieve==2.3.2.post1
sqlparse==0.4.2
trio==0.21.0
trio-websocket==0.9.2
typing-extensions==4.2.0
urllib3==1.26.9
wsproto==1.1.0
uWSGI==2.0.19.1
mysqlclient==2.0.3

pip3 install -r requirements.lock

django
django-admin startproject myproject .

settings.py
ALLOWED_HOSTS = ['*']
LANGUAGE_CODE = 'ja'
TIME_ZONE = 'Asia/Tokyo'


python3 manage.py migrate

python3 manage.py runserver

画面確認

http://localhost:8000


python3 manage.py startapp myapp

python3 manage.py createsuperuser

ユーザー名 空白 →username
メールアドレス 空白
パスワード password

settings.py
INSTALLED_APPS = [
'rest_framework', # 追加
'myapp',

vue

node v16.14.2
npm 8.5.0
vue@2.6.14

node -v
npm -v

npm install -g @vue/cli@2.6.14

vue-cli バージョン指定してインストールする

https://qiita.com/yukimenoko0123/items/07736be09bdec7958e77


vue create frontend

・Manually select featuresを選択
・Babel、Router、Linterをスペースを押して選択
・Use history mode for router? Yを入力
・ESLint + Prettierを選択
・Lint on saveを選択
・In package.jsonを選択
・Save this as a preset for feature projects? Nを入力


cd frontend

npm run serve

画面確認

http://localhost:8080


vue add vuetify

画面確認

http://localhost:8080