Vue CLI 3を使ってVue.jsを作成する

開発環境はWindows 10 Pro(64bit) + Node.js v10.15.0。

Vue.jsを使ってプロジェクトを作りたい場合は、Vue CLIを使った方が、楽なので、使ってみることにしました。

1.以下のコマンドを入力して、Vue CLIをインストール

npm install -g @vue/cli

2.インストールが完了したら、以下のコマンドを入力して、プロジェクトを作ってみます。

cd c:\ && vue create hello-vue-cli

Please pick a presetという質問が出るので、とりあえず、Default ([Vue 2] babel, eslint)を選択して、Enterキーをそのまま押したら、インストールが開始。インストールが終了したら、

cd hello-vue-cli
npm run serve

でサーバーを実行。
f:id:k01ken:20210424203100p:plain
localhost:8081にアクセスしてみると、きちんと表示されています。(デフォルトでは、localhost:8080と表示されるんですが、8080番は別のサーバー用に開いていたので、今回は、8081番が開いたようです。)
f:id:k01ken:20210424203203p:plain

3.srcディレクトリ内のApp.vueを開いて、中身を修正して、保存してみると、その変更を察知して、表示が変わったと思います。もし、変わらない場合は、コマンドプロンプト内でEnterキーを押してみてください。(Hello Vue CLI 3の部分が変更した部分です。)
f:id:k01ken:20210429004151p:plain

4.次に、新しいページを作って、vue-routerでルーティングしてみたいと思います。以下のコマンドを入力してください。

vue add router

f:id:k01ken:20210429005114p:plain
上記のようなメッセージが出現したので、gitをcommitしたいと思います。git自体はプロジェクトを作った時点で、すでに初期化されています。以下のコマンドを一行ずつ入力してください。

git add src\App.vue
git commit -m "first commit"

そして、もう一度、

vue add router

を入力しました。すると、Still proceed?と表示されるので、yを入力して、Enterキーを押します。
そうすると、パッケージのインストールが開始されます。
Use history mode for router?と出現するので、yと入力し、Enterキーを押します。
インストールが終了すると、もう一度、サーバーを立ち上げて、localhostにアクセスしてみてください。
以下のようになっていて、上部にHomeとAboutのリンクが追加していると思います。
f:id:k01ken:20210429012850p:plain
Aboutのリンクをクリックすると、ページが切り替わります。もしくは、/aboutに最初からアクセスすると、Aboutのページが最初から表示されます。
f:id:k01ken:20210429012714p:plain

最後に、gitをコミットします。こうしないと、追加でプラグインをインストールできないからです。

git add -A
git commit -m "add vue-router"

5.次に、Vuetifyでマテリアルデザインを追加したいと思います。以下のコマンドを入力してください。
※VuetifyはVue 3には、まだ対応していないので、Vue CLIでは、Vue 2を選択する必要があります。

vue add vuetify

Choose a presetと出現するので、Defaultを選択して、Enterキーを押します。
プラグインのインストールが完了したら、サーバーを立ち上げて、localhostにアクセスすると、以下のようになります。
f:id:k01ken:20210429015102p:plain

6.最後に、簡単なToDoリストを作ってみたいと思います。/src/views/Home.vueを開いて、以下のコードと置き換えてください。

<template>
  <div class="home">
    <v-container>
      <div v-for="item in this.list" :key="item.id">
        <v-row>
          <v-col cols="10" align-self="center">
            <v-checkbox v-model="item.is_checked" :label="item.task"></v-checkbox>
          </v-col>
          <v-col cols="2" align-self="center">
            <v-btn @click="remove(item.id)" color="error"><v-icon>mdi-close</v-icon></v-btn>
          </v-col>
        </v-row>
      </div>
    </v-container>
    <v-container>
      <v-row>
        <v-col cols="10" align-self="center">
          <v-text-field v-model="input_value" label="タスク"></v-text-field>
        </v-col>
        <v-col cols="2" align-self="center">
          <v-btn @click="add" color="primary">追加</v-btn>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script>
export default {
  data(){
    return {
      is_checked: true,
      list: [],
      input_value: "",
    }
  },
  methods: {
    add: function(){
      this.list.push({
        id: this.list.length + 1,
	task: this.input_value,
	is_checked: false,
     });
     this.input_value = "";
    },

    remove: function(id){
      this.list = this.list.filter(item => item.id != id)
    },
  }
}
</script>