Vue3+TypeScript環境構築

導入

最近、Vue3 + TypeScriptの構成に触るようになったので環境構築についてまとめました。
次回は、Compotion APIについてまとめてみます。

今回入れたのは、

• vue-router
• eslint
• pritter
• bable
• typescript
  です。

手順(プロジェクト作成 ~ 初期ページの表示)

1. まずバージョンを調べてみます。

$ vue -V
@vue/cli 4.5.8

1. vue create {プロジェクト名}を実行します。
   今回はチュートリアル：React の導入にあるような、
   三目並べをAtomic Designっぽく作っていきたいと思います。

    $ vue create practice-vue3-tic-tac-toe
    ...以下対話形式でプロジェクト作成
   

   

2. yarn serveを実行
   このようなページが出たら成功!
   

github pagesにデプロイ

1. touch vue.config.jsを実行してルートディレクトリに設定ファイルを作る

2. vue.config.jsに以下を記載
   ※ practice-vue3-tic-tac-toe部分は、githubのリポジトリ名によって変更

   module.exports = {
     publicPath:
       process.env.NODE_ENV === 'production' ? '/practice-vue3-tic-tac-toe/' : '/',
     outputDir: 'docs',
     assetsDir: './'
   };
   

3. git で以下を実行

   $ git remote add origin {リモートリポジトリ}
   $ git add --all
   $ git commit -m "1st commit"
   $ git push origin master
   

1. Setting > GitHub Pagesを以下のように設定
![vue-start-page](https://images.microcms-assets.io/protected/ap-northeast-1:7cf4e012-34b8-42e4-9878-9730fb0adfdc/service/imagestore/media/github-pages-vue.png)

1. Your site is ready to be published at **~** の部分をクリック
 以下の画面が出たら成功
 ![vue-start-page-png](https://images.microcms-assets.io/protected/ap-northeast-1:7cf4e012-34b8-42e4-9878-9730fb0adfdc/service/imagestore/media/vue-start-page.png?fit=clip&w=1200&h=500)