Node.jsダウンロード
https://nodejs.org/en
インストール
npm install -g @vue/cli
プロジェクト作成
vue create my_app
プロジェクト実行
cd my_app
npm run serve
BootstrapをVue.jsプロジェクトに統合
npm install bootstrap
HTMLとJavaScriptのファイルは通常、Vue.jsプロジェクト内の src フォルダに作成します。以下に一般的な構造を示します。
my-vue-app/
|-- src/
| |-- assets/
| |-- components/
| | |-- MyComponent.vue
| |-- views/
| | |-- Home.vue
| |-- App.vue
| |-- main.js
|-- public/
|-- node_modules/
|-- package.json
|-- ...
-
src/フォルダ: プロジェクトのソースコードがここに格納されます。VueコンポーネントやVueインスタンスの定義、そしてJavaScriptのロジックが含まれます。 -
src/components/フォルダ: Vueコンポーネントを格納するためのフォルダです。 -
src/views/フォルダ: アプリケーションの各ビュー（画面）に対応するVueコンポーネントを格納するためのフォルダです。 -
src/assets/フォルダ: 画像、スタイルシートなどの静的ファイルを格納するためのフォルダです。 -
src/App.vueファイル: アプリケーション全体のメインのVueコンポーネントです。 -
src/main.jsファイル: アプリケーションのエントリーポイントであり、Vueの初期化とルートコンポーネントの設定が行われます。
HTMLファイルは通常、Vueアプリケーションが動作するエントリーポイントである public/index.html ファイルに配置されます。このファイル内でVueアプリケーションがマウントされる要素が定義されています。
<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Vue App</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
Vue.jsはこの<div id="app"></div> 内にアプリケーションをマウントします。 JavaScriptのロジックは主に src/ 内のファイルに記述されます。
以下の手順でVue.jsアプリケーションを構築していくことができます。
-
新しいコンポーネントの作成:
-
src/components/フォルダに新しいMyComponent.vueコンポーネントを作成。この中で、アプリケーションの機能やUI部分を定義します。
-
-
新しいビューの作成:
-
src/views/フォルダに新しいビューを作成。これはアプリケーション内で表示される特定の画面を表します。例えば、Home.vueという名前のビューを作成して、そこに先ほど作成したコンポーネントを組み込んでみましょう。
-
-
ルーティングの設定:
- アプリケーション内の異なるビューに切り替えるために、Vue Routerを使用してルーティングを設定します。
src/router/index.jsファイルを編集して、新しいビューに対応するルートを追加します。
- アプリケーション内の異なるビューに切り替えるために、Vue Routerを使用してルーティングを設定します。
-
ナビゲーションの追加:
- アプリケーション内を移動するためのナビゲーションメニューやリンクを作成します。これはVue Routerを使用して作成したルートに基づいています。通常、これは
src/App.vue内で行われます。
- アプリケーション内を移動するためのナビゲーションメニューやリンクを作成します。これはVue Routerを使用して作成したルートに基づいています。通常、これは
-
スタイルの追加:
-
src/assets/フォルダにCSSファイルを追加して、アプリケーション全体のスタイルを設定します。また、各コンポーネントやビューに対して独自のスタイルを追加することもできます。
-
-
APIとの通信の設定:
- バックエンドとのデータのやり取りが必要な場合は、Vue.jsの
axiosなどのHTTPクライアントを使用してAPIと通信する方法を設定します。
- バックエンドとのデータのやり取りが必要な場合は、Vue.jsの
-
テストとデバッグ:
- 開発中にテストやデバッグを積極的に行う。Vue Developer Toolsやブラウザのデベロッパーツールを使用して、アプリケーションの状態やエラーを確認します。
-
デプロイの検討:
- アプリケーションが完成したら、デプロイ方法を検討。Netlify、Vercel、Firebase Hostingなどのプラットフォームが便利です。
pythonダウンロード
https://www.python.org/downloads/
djangoインストール
pip install django
djangoプロジェクト作成
django-admin startproject myapp
ディレクトリを移動後にサーバを起動
cd myapp
python manage.py runserver
127.0.0.1:8000にアクセスして起動を確認
Ctrl+cで終了