🌚
Vue-cli、Viteでの「Vue3.0 Composition API」インストール方法
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くらいの速度で動作した
参考
Discussion