Vue3 + Typescriptで環境の作成

参照

• Vue3 公式ドキュメント
  • 環境構築方法は自分の想定する組合せの解説記事を探すことをおすすめ
• 簡単な例で始めるVue3でTypeScript入門
  • Vue3+Typescriptをvue-cliを使って構築※こちらの方が詳細に記載されています
• [Youtube]Vue 3 with TypeScript Tutorial #1 - Intro & Setup
  • イギリス英語
  • Vue3+Typescriptの環境設定から
  • 同一チャンネルでVue3、Typescriptのチュートリアル動画もある
  • チュートリアル自体はWindowsマシンを使用

記事の目的

自身がVue3+Typescriptでアプリを作ろうとしているため、
その環境構築用のメモ

vue-cliをインストールする

typescriptベースで開発するには、vue-cilでプロジェクト作成し、その際にTypescriptを選択する必要がある

npm install --global @vue/cli

Vueのプロジェクト作成

vue create vue-new-project

作成時の選択

下のような画面がでてくるので、Typescriptにチェックをいれる(Macの場合はスペースキー)

手元で作成した内容は下記
ターミナル上で対話型で選択してく。
3行目にTSと出力されていなかったら、Typescriptベースのプロジェクトとしては作成されないので注意

Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

一番初めに出力されるファイル

main.ts とエントリーポイントがtsになる

./vue-new-project
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.ts   #ここがtsになっている
│   └── shims-vue.d.ts
└── tsconfig.json

またApp.vueの中がこのようになっている。
<script lang="ts">となっているのがわかる。

App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import HelloWorld from './components/HelloWorld.vue'

export default defineComponent({
  name: 'App',
  components: {
    HelloWorld
  }
})
</script>

VSCODEで使う時の拡張機能

• Vetur Vue tooling for VS Code
  • .vueの拡張子のファイルのシンタックスハイライト、スニペット等