vue.js 3 + TypeScript 環境を作成する

1. Vue CLI をインストールします

npm install --global @vue/cli

一度ターミナルを再起動してから

バージョンの確認

vue -V
@vue/cli 4.5.11

2. 新規のプロジェクトを作成し、続いて "Manually select features" を選択します

vue create my-project-name

Typescript を利用するために Manually select features を選択します。

3. ローカルサーバー起動

cd my-project-name
npm run serve

4. ビルド

dist フォルダにビルド結果が出力されます

npm run build

5. ローカルファイルを表示した場合画面が真っ白になる場合は相対パスを指定します

vue 2 の場合は

vue.config.js

module.exports = {
    publicPath: './'
}

vue 3 の場合は 

vue.config.js

module.exports = {
    baseUrl: './'
}

● 「Vue.extend」と「クラスコンポーネント」どちらで書くかを決定する

クラスコンポーネントのがおすすめですが、こちらを参考に決定するといいでしょう。↓

https://zenn.dev/kata_n/articles/233ee8e03c5cb1
https://qiita.com/aLiz/items/5f7cab2b86116b496586
https://meetup-jp.toast.com/1843

● 「Vue.extend」→「クラスコンポーネント」変換する

基本形

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Component, Vue } from 'nuxt-property-decorator' // nuxtの場合

@Component
export default class extends Vue {

}
</script>

あとは、こちらを参考に。
https://qiita.com/ryo2132/items/4d43209ea89ad1297426#created-mounted-updated-destroyed-etc

No.1946
06/30 18:57

edit