Vue CLI 3を使ってTODOアプリを作ってみる(環境構築編)

目次

• 開発環境構築
  • Vue CLI 3 のインストール、プロジェクト作成
  • Ajax 用のパッケージインストール、開発サーバ起動 この記事はここまで
• Vue.jsの便利なところ
• TODOアプリの作成
  • 概要
  • 一覧機能
  • サマリ機能
  • 追加機能
  • 編集機能
  • 削除機能

環境

$ node -v
v10.15.0
  
$ npm -v
6.4.1
  
$ yarn -version
1.12.3

Vue CLI 3 のインストール、プロジェクト作成

$ yarn init

$ yarn add @vue/cli

$ npx vue create client
# いくつか選択肢が出てきます。
# 1つ目は「Manually select features」を選択
# 2つ目は「Babel、Router、Linter / Formatter」を選択、
# 3つ目以降はデフォルトにしました。

Ajax 用のパッケージインストール、開発サーバ起動

$ cd client
$ yarn add axios
$ yarn serve

• axiosはPromiseベースのHTTPクライアントです。
  • 公式でも推奨(?)されているようですし、
    せっかくなのでaxiosを試してみようと思います!
• yarn serveは開発サーバを起動するコマンドです。
  • 裏側ではポート8080(デフォルト)でWebサーバを起動、
    トランスパイルが実行されているようです
  • Webpack、Babelなどの設定はVue CLIがやってくれます!便利!!

アクセス

• http://localhost:8080/にアクセスすると、以下の画面が表示されます。

以上!

次回はにVue.jsの便利だと思ったところを書いていきます!!

-Vue.js