Vue3 + Typescriptで環境の作成

5278 ワード
Vue3 Vue.js TypeScript TypeScript テキストリンク

参照

記事の目的

自身が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で使う時の拡張機能