🌚

Vue-cli、Viteでの「Vue3.0 Composition API」インストール方法

3 min read

前提条件

  • MacOSX
  • npm 6.14.7

Vue Composition APIを使うためにVue3.0をインストールしていく
インストールの方法は「Vue CLI」と「Vite」を扱う

どちらでも良いが、Viteは動作が高速なのでおすすめ

Vue CLIを使ったインストール方法

Vue CLIをインストール

npm install -g @vue/cli

これでvueコマンドが使用可能になる

プロジェクトを作成

vue create my-app

以下を選択する

Composition APIを使う

デフォルトだとOptionsAPIになってるので、CompositionAPIを使った書き方に変更する

以下のように変更する

my-app/src/components/HelloWorld.vue
<template>
  <div>{{ msg }}</div>
  <button @click="changeMsg">Change</button>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const msg = ref("hello")

    const changeMsg = () => {
      msg.value = "world"
    }

    return{
      msg,
      changeMsg
    }
  }
}
</script>

サーバの起動

npm run serve -- --open

-- --openオプションでブラウザ表示してくれる

URLhttp://localhost:8081/にアクセスされ、以下画面が出ればOK

Changeボタンを押すとhelloがworldに変更される

Vite

ViteはVueの製作者Evan youが作ったビルドツールで高速に動作するのが特徴

プロジェクトを作成

npm init vite-app my-app

npm install

cd my-app
npm install

デフォルトでVue3.0が入る

※2020/9/27日現在、package.jsonの中身をみると、

"dependencies": {
  "vue": "^3.0.0-rc.1"
}

とrc版がインストールされるようになっているので、若干古いバージョンが入るのかもしれない

Composition APIを使う

Vue CLI同様デフォルトOptionsAPIが使われれるので、CompositionAPIを使った書き方に変更する

以下のように変更する

my-app/src/components/HelloWorld.vue
<template>
  <div>{{ msg }}</div>
  <button @click="changeMsg">Change</button>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const msg = ref("hello")

    const changeMsg = () => {
      msg.value = "world"
    }

    return{
      msg,
      changeMsg
    }
  }
}
</script>

サーバの起動

npm run dev -- --open

viteでのサーバ起動はdevなので注意

Vue CLI同様の画面が確認できればOK

冒頭にも記載したが、Viteの方が高速に動作するのでこれから導入という人はViteが良いかもしれない
体感としてはVue CLIに比べViteは1/2くらいの速度で動作した

参考

https://www.vuemastery.com/blog/vue-3-start-using-it-today/
https://qiita.com/jay-es/items/b3bc9c1dc077bc3f7f35
https://v3.vuejs.org/guide/installation.html#runtime-compiler-vs-runtime-only

Discussion

ログインするとコメントできます