導入

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

今回入れたのは、

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

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

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

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

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

    vue-project-setup-img

  3. yarn serveを実行
    このようなページが出たら成功!
    vue-start-page-png

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
    
  4. Setting > GitHub Pagesを以下のように設定
    vue-start-page

  5. Your site is ready to be published at ~ の部分をクリック
    以下の画面が出たら成功
    vue-start-page-png