vue-cliで始めるVue.jsチュートリアル (1)
- POSTS
本記事は vue-cliで始めるVue.jsチュートリアル (1) - Qiita を移植したものです。
かなり古い内容ですが更新ができておらず、また2020年になってもvue-cli2.x系の記事にLGTMがついてしまうのは不味いのではないかと思い、Qiita側では文章を削除しております。
以下記事は上記を踏まえて参考にしていただければと思います。
以下転機
Vue.js チュートリアル 最近Vue.jsが楽しいです。そこそこ構文にも慣れてきたので、自身の理解度チェックも兼ねてTodo管理アプリを作成するチュートリアルを作成してみました。間違っている箇所あればご指摘頂ければ幸いです。
※2018.9.10 追記
本記事執筆時は、vue-cli のバージョンは ｖ2.x.x 系でしたが、現在では v3.0.0 がリリースされていることにご注意ください。
https://github.com/vuejs/vue-cli/releases
テンプレートからプロジェクトを作成するときの対話形式が大きく異なっております。また、そのほかにも変更点があるかもしれません。折を見てアップデートする予定ですが、それまではv3.x.x系には未対応ということでお願いします。大筋は変わらないはず。。
チュートリアルのゴール vue-cliをつかってプロジェクトを作成する Vue.jsでTodo管理アプリケーションを作成する 作成したアプリケーションをvue-loader、webpackでビルド／バンドルして、GitHub-pagesで配信してみる できたらやりたいこと コンポーネントに分割（親コンポーネント・子コンポーネント間でのデータのやり取り） Vuexの導入 詰んだ時 公式サイト: https://jp.vuejs.org/index.html
日本語の公式ドキュメントが充実しているのは私達がVue.jsを使う上での利点の一つです。困った時は公式ドキュメントを読んでみるとよいです。
作るもの 以下のようなTodo管理アプリケーションを作ってみます。
GitHub-pages: https://sin-tanaka.GitHub.io/vuejs_tutorial_todo_management/ リポジトリ: https://GitHub.com/sin-tanaka/vuejs_tutorial_todo_management/ 環境 $ sw_vers ProductName: Mac OS X ProductVersion: 10.11.6 BuildVersion: 15G1611 $ node -v v6.11.3 $ npm -v 3.10.10 vue-cliを使うためにはnodeとnpmが必要です。 エディターはIntelliJ系のIDEであれば、Vue.js用のプラグインがあるのでオススメです。筆者はPycharmです。
プロジェクトの作成 まずはvue-cliをinstallします。 vue-cliは雛形からプロジェクトを作成してくれる公式ツールです。公式には、「nodeやnpm、webpackに詳しくないならあまり使わないほうがいいよ」と書いてあるのですがとても便利なので使います。