Vue3/TypeScriptのプロジェクトを作る

Vueのプロジェクト作成において、

TypeScriptを使おうとした時に、

https://programming.manabupanda.net/vue-project-add-typescript/

こちらの記事のように、

既存のプロジェクトに追加する形で使おうとしたが、

表示など、一部、うまくいかなかったので、

最初からインストールする形で、

Vue3/TypeScriptのプロジェクトを作成した。

Vue

Vue.jsの公式サイト

https://v3.vuejs.org/guide/installation.html#npm

プロジェクト作成前の準備

$ npm i -g @vue/cli

Vue3 / TypeScriptのプロジェクト作成

$ vue create sample-project

自分でセレクトして入れるを選択。

そして、

以下の選択で、

デフォルトで「TypeScript」が外れているので選択。

Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project:
 ◉ Choose Vue version
 ◉ Babel
❯◉ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◉ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

Vue.jsのバージョンを聞かれるので「3.x」を選択

? Choose a version of Vue.js that you want to start the project with
  2.x
❯ 3.x

それ以降はデフォルトでも良い（変えても良い）。

そこからインストールが進んで完了。

$ vue create sample-project
 :
🎉  Successfully created project automation.
👉  Get started with the following commands:
    cd sample-project
    npm run serve

上記の完了時のメッセージ内のコマンドに沿って、

コマンドを実行する

$ cd sample-project
$ npm run serve
  :
 DONE  Compiled successfully
  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.11.23:8080/

これで画面表示で、「TypeScript」の表示が出ればオッケー。

画面表示の例