VueでTo Do Listを作ってみる-1
目標: Vueの環境セットアップし、画面にinput要素を作る
クイックスタートを参考してvueのアプリケーションを生成します。
アプリケーションを生成したいフォルダで、以下のコマンドを入力します。
npm init vue@latest
✔ Project name: … <your-project-name> ✔ Add TypeScript? … No / Yes ✔ Add JSX Support? … No / Yes ✔ Add Vue Router for Single Page Application development? … No / Yes ✔ Add Pinia for state management? … No / Yes ✔ Add Vitest for Unit testing? … No / Yes ✔ Add Cypress for both Unit and End-to-End testing? … No / Yes ✔ Add ESLint for code quality? … No / Yes ✔ Add Prettier for code formatting? … No / Yes Scaffolding project in ./<your-project-name>... Done.
VSCodeで作ったvueアプリケーションを開きます。
vueプロジェクトフォルダで以下のコマンドを叩いてプロジェクトをインストールします。
npm install
インストールが完了したら、以下のコマンドで開発環境を実行します。
npm run dev
Local: http://127.0.0.1:5173/
コマンドを実行したら、上のローカルurlで以下の画面が確認されます。
srcの中にあるApp.vueファイルを開いて下のコードだけ残してすべて削除します。
// src/App.vue <script setup></script> <template></template> <style scoped></style>
もう一度ローカルパスに入ると、空き画面が見えます。
ここにinput要素を作成してみましょう。
フォーム入力バインディングを参考して作成します。
// src/App.vue <script setup> import { ref } from 'vue' const text = ref('') </script> <template> <p>{{ text }}</p> <input v-model="text" /> </template> <style scoped></style>
<input v-model="text" /> を入力して画面にinput要素が見えるようにしました。