vue-cliで始めるVue.jsチュートリアル (2)
- POSTS
本記事は vue-cliで始めるVue.jsチュートリアル (2) - Qiita を移植したものです。
かなり古い内容ですが更新ができておらず、また2020年になってもvue-cli2.x系の記事にLGTMがついてしまうのは不味いのではないかと思い、Qiita側では文章を削除しております。
以下記事は上記を踏まえて参考にしていただければと思います。
以下転機
Vue.js チュートリアル(2) 前回プロジェクトの作成と、その中身を見てみました。
vue-cliで始めるVue.jsチュートリアル (1)
ここからはこれらのコンポーネントを修正して、実際にTodoリストを作ってみます。
Todoリストの要件 Todoリストアプリケーションの要件は以下のように定義しておきます。
Todoはリストで一覧表示すること Todoはテキストボックスから追加できること それぞれのTodoにはチェックボックスが付いており、それを切り替えることでTodoの状態（未達成／達成済）を切り替えること チェック済のTodoを一括で消すボタンがあること それぞれのTodoは編集可能なこと 一般的なCRUD(Create, Read, Update, Delete)を持つインターフェースだと思います。
最終的にできあがったTodoリストはGitHub-pagesを使って配信するところまでを一先ずの目標とし、その後可能であれば、
コンポーネントの分割（親子間でのデータのやり取り） Vuexの導入 まで出来れば理想ですが一先ず一つのコンポーネントにべた書きでTodoリストを作ってみましょう。
SASS/SCSS その前に、*.vue ファイル内の<style> タグ内で、SASS/SCSS を書けるようにしましょう（これは好みなので、普通のCSSでいい人は入れなくてもよいです。但しサンプルコードはSCSSで書かれています） プロジェクトディレクトリ内で以下を実行します。
npm install sass-loader node-sass --save-dev これでSCSSが書けるようになりました。
HTML & CSSの作成 まずはhtmlとCSSでTodoリストのイメージを組み上げてみます。
diff: https://GitHub.com/sin-tanaka/vuejs_tutorial_todo_management/commit/07faa150878b8dade8fa48ee4f58168da31d08a2
<template> <div id="app"> <img src="./assets/logo.png"> <h1>Todo Management.</h1> <hr /> <router-view></router-view> </div> </template> <script> export default { name: 'app' } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style> <template> <div> {{ msg }} <form> <button>ADD TASK</button> <button>DELETE FINISHED TASKS</button> <p>input: <input type="text"></p> <p>task:</p> </form> <div class="task-list"> <label class="task-list__item"><input type="checkbox"><button>EDIT</button>vue-router</label> <label class="task-list__item"><input type="checkbox"><button>EDIT</button>vuex</label> <label class="task-list__item"><input type="checkbox"><button>EDIT</button>vue-loader</label> <label class="task-list__item--checked"><input type="checkbox" checked><button>EDIT</button>awesome-vue</label> </div> </div> </template> <script> export default { name: 'hello', data () { return { msg: 'Welcome to Your Vue.