● サンプルアプリ vue3-todo-ts-app を作成する

あらかじめ作成したいプロジェクトの親ディレクトリに移動しておきます

vue3プロジェクトの新規作成コマンド

npm init vue@3

（Project nameで指定したディレクトリが自動的に作成されます）

✔ Project name: … vue3-todo-ts-app
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › Cypress
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

アプリの起動

cd vue3-todo-ts-app
npm install
npm run lint
npm run dev

● vue3の単体テストvitestを実行する

npm run test:unit

テストを検索するトップディレクトリを / にする場合は以下のコマンドでもokです。

npx vitest --environment jsdom --root ./

デフォルトでは、.env が環境変数ファイルとして読み込まれます。（つまり production ）

.env.development を 読み込ませながら、テストを行いたい場合は、次のようにします。

npx vitest --environment jsdom --root ./ --mode development

Nuxt を使わない Vue 3 だけで各 Vue 系 API や自作コンポーネントを自動インポートする | mirumi.tech

● Vue3で scss を使用する

npm i -D sass

main.ts

import "./assets/main.scss"; // 拡張子を .scss に変更する

main.css を main.scss に 名称変更します

試しに、ネストしたプロパティを記述してみます

#app {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  font-weight: normal;
  font-size: 10px;
  * {
    color: red;
    font-weight: 30px;
  }
}

これでアプリを実行して表示される文字が赤くなっていれば成功です。