この記事の内容

Vue3.0では新しい機能がいくつか追加されるので、
自分で触って試してみたいと思ってる人も多いと思います。
今回はvue-cli-plugin-vue-nextを使って、 Vue3.0の開発環境を構築する方法を紹介しようと思います。

------※7/29 追記------
vue-cliのv4.5.0を使うことで、vue createコマンドでvue3のプロジェクトが作成できるようになったようです。（オプション選択時に3.xを指定できます）
v4.5.0は、

npn install -g @vue/cli@next

でvue-cliのバージョンを上げることで使えるようになります。

------------------

vue-cliのインストール

ここは、Vue2.0以前と同じです。既にVueを使っていれば、
入っている場合が多いと思いますが、
一応書いておきます。

ターミナルを開いて、以下のコマンドです。

$ npm install -g @vue/cli

プロジェクトの作成

vue-cliをインストールしたら、プロジェクトの作成をします。
これもVue2.0以前と同じです。

$ vue create vue-next-trial

※vue-next-trialはプロジェクト名なので任意です。 ※いくつかのオプションについて質問されますが、自由に選択してください。

ここまでの手順の詳細が知りたい場合は↓こちらを参考にしてください。
Vue CLI

Vue3.0にアップデートする

プロジェクトが作成出来たら以下のvue-cliのコマンドを使って
プロジェクトをVue3.0(vue-next)へ対応させます。

#プロジェクト以下に移動
$ cd vue-next-trial

# vue3.0にアップデート
$ vue add vue-next

やらなければいけないのは、これだけです。
詳細は以下を参照してください。
GitHub - vuejs/vue-cli-plugin-vue-next: A Vue CLI plugin for trying out vue-next (experimental)

main.tsを確認してみる

さっそくmain.tsを確認してみます。

//main.ts
import { createApp } from 'vue';
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(router).use(store).mount('#app')

Vue3.0では、GlobalAPIが切り出されました。
これによって、
Vueの振る舞いを変えるようなオプション（use, component, mixin, directive, etc..)は
createApp()メソッドによって生成されるappインスタンスを介して使うようになっています。
(きちんとmain.tsもそのように変わっています。)
[参考]
rfcs/0009-global-api-change.md at master · vuejs/rfcs · GitHub