Vue CLI の簡単な使い方

8073 ワード
tutorial Vue.js vue-cli Web Web テキストリンク

サーバー上で Vue CLI を使う簡単な方法です。

次が既にインストールされているとします。

$ vue --version
@vue/cli 4.5.15
$ yarn --version
1.22.5

1) プロジェクトの作成

vue create proj01

Enter を入れていきます。

2) フォルダーを移動して、サーバーの起動

cd proj01
yarn serve

3) ブラウザーで、http://localhost:8080/ にアクセス

4) src/App.vue を改造

src/App.vue
<template>
  <div>
    こんにちは。<p />
    <blockquote>
    Nov/4/2021<p />
    </blockquote>
  </div>
</template>

<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>

5) ブラウザーで、http://localhost:8080/ にアクセス

6) src/App.vue をもっと改造してみます。

src/App.vue
<template>
<div>
  <p class="message">メッセージ: {{ msg }}
</p>
<blockquote>
Apr/5/2019<p />
</blockquote>
</div>
</template>

<style>
.message { color: blue; }
</style>

<script>
export default {
  props: {
    msg: {
      type: String,
      default: '皆さん、こんにちは！'
    }
  }
}
</script>

7) ブラウザーで、http://localhost:8080/ にアクセス

8) 更に改造して、テキストを入れれるようにします。
参考ページ
Vue.js を vue-cli を使ってシンプルにはじめてみる

src/App.vue
<template>
  <div>
    <p v-if="msg.length > 0">
      {{msg}}
    </p>
    <p v-else>
      no text
    </p>
<input type="text" v-model="msg">
<button @click="clear()">clear</button>
  </div>
</template>

<script>

export default {
  data () {
    return {
      msg: 'Hello World! Nov/4/2021'
    }
  },
  methods: {
    clear () {
      this.msg = ''
    }
  }
}
</script>

「これはテストです。」とキーイン