Vue3を使いましょう

こんにちは。21新卒のエンジニアの劉東慶です。jQueryの時代が過去になりつつある現在、Angular、React、Vueの3大フレームワークが主流になっています。最近ある案件でもVueを使っている例があるので、今日は最新のVue3をご紹介していきます。

Vue3の基本の使い方

まずはVueJSの導入です、以下のCDNの方法がお勧めです、下記の一行だけで済みます。

<script src="https://unpkg.com/vue@next"></script>

ではさっそく簡単にVueを試してみましょう。

  <div id="app">
        <p>{{name}}</p>
    </div>
    
    <script>
        const app = {
            setup(){
                let name = '一郎'

                return{
                    name
                }
            }
        }

        Vue.createApp(app).mount('#app')
    </script>

上記のHTMLを実行したら、画面で「一郎」が表示されます。

Vue CLIを使ってフロントエンドプロジェクトを構築する

実際のフロントエンドプロジェクトでは、Vue CLIを使ってプロジェクトを構築します。npmを使うため、nodejsのインストールは前提です。

順に下記のコマンドを実行すれば自動的にプロジェクトが構築されます、かなり簡単です。

1.Vue CLIのインストール:

npm install -g @vue/cli

2.Vue3プロジェクトの構築:

vue create app

今回はVue3のプロジェクトを構築するため、ここで二行目の「Default (Vue 3) ([Vue 3] babel, eslint)」を選択します。

3.プロジェクトの実行

cd app
npm run serve

ローカルURLにアクセスし、サイトを見ましょう:

ワクワクしますよね!初めてのVueプロジェクト!

ファイルの構造の説明が正式のドキュメントの参考になります:

https://cli.vuejs.org/guide/

Vue3でコーディングしましょう

パス「app\src\components\」の配下にMyFirstVue.vueファイルを作ります。vueファイルが<template>、<script>、<style>の三つの要素から構造されています。<template>がhtml部分、<script>がJavaScript(またはTypeScript)の部分、<style>がスタイルの部分です。

MyFirstVue.vue

<template>
  <h3>名前:{{person.name}}</h3>
  <h3>年齢:{{person.age}}</h3>
  <h3>
      趣味:
      <ul>
          <li v-for='(h,index) in person.hobby' :key='index'>
              {{h}}
          </li>
      </ul>
  </h3>
  <button @click="changeInfo">変更</button>
</template>

<script>
import { reactive } from 'vue'

export default {
    name:'MyFirstVue',
    setup(){
        let person = reactive({
            name:'一郎',
            age:20,
            hobby:['ゲーム', '読書']
        })

        function changeInfo(){
            person.name='二郎'
            person.age=18
            person.hobby=['バスケ','漫画']
        }

        return{
            person,
            changeInfo
        }
    }
}
</script>

<style>
</style>

画面が以下のように表示されます:

変更ボタンを押したら、情報が変わります:

いかがでしたでしょうか。

簡単なVue3が分かればある程度Vue3のプロジェクトでも読み解けるようになるので、Vue3に興味がある方の助けになっていれば幸いです。

関連記事

プロジェクトストーリー

おすすめ記事

技術

コメント

この記事へのコメントはありません。

カテゴリー

TOP
TOP