Zenn
🔖

Vue3 (CompositionAPI) + TypeScript + Tailwind CSS で環境構築チュートリアル

2022/10/30に公開
TypeScript
Vue.js
初心者
Tailwind CSS
frontend
tech

Vue CLIのインストール

vueコマンドが使用できない場合、以下のコマンドでVue CLIをインストールする。

npm install -g @vue/cli

公式サイト：
https://cli.vuejs.org/#getting-started

Vueプロジェクトの作成

  1. Vueプロジェクトを作成します。
    以下のコマンドを実行してください。
    my-projectの部分はプロジェクト名となります。
    お好きな名前で作成してください。
vue create my-project


  1. Vueプロジェクトの作成方法を選びます。
    今回はTypeScriptを使用するため、Defaultを使用せずManuallyを選択します。
    ※Defaultは記載の通りBabelとESLintのみの構成。
Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
> Manually select features


  1. TypeScriptにカーソルをあわせ選択（スペース押下）します。
    Enterで次へ進みます。
    デフォルトで選択されているBabel[1], Linter[2] / Formatter[3]はそのままとしています。
..
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
 (*) Babel
>(*) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing


  1. Vueのバージョンを選択します。
    3.xを選択してください。
..
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 3.x
  2.x


  1. TypeScriptの記述方法を設定します。
    class-styleとは、Vue2.x系でTypeScriptを使用する際に使用された記述方法です。
    Nを入力します。
【応用】Vue3.x系のTypeScript記述方法（CompositoinAPI）

公式サイト：
https://v3.ja.vuejs.org/guide/composition-api-introduction.html#なぜ-composition-api-なのか

..
? Use class-style component syntax? (y/N) N


  1. Babelを使用するか設定します。
    Yを入力します。
..
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) Y


  1. Linter / Formatterを設定します。
    LinterのESLint、FormatterのPrettierを選択しています。
    お好みで自由に選択していただいても構いません。
【応用】ESLint、Prettierとは

ESLint公式サイト：
https://eslint.org/docs/latest/
Prettier(プリティア)公式サイト：
https://prettier.io/docs/en/index.html

..
? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
> ESLint + Prettier


  1. Lint（静的分析）の実行タイミングを設定します。
    Lint on save（ファイルの保存時）のみ選択しています。
    必要な場合はLint and fix on commit (requires Git)（Gitへのコミット時）も選択してください。
..
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to
proceed)
>(*) Lint on save
 ( ) Lint and fix on commit (requires Git)


  1. BabelやESLintの設定をどのファイルに記述するか設定します。
    それぞれのconfigファイルを用意するIn dedicated config filesを選択しています。
    package.jsonで管理したい場合はIn package.jsonを選択してください。
..
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json


  1. これまでの設定を次回以降のプロジェクト作成のために保存するかを選択します。
    こちらはご自由に選択してください。
    私はN（保存しない）を選択しています。
    これで設定は最後です。
..
? Save this as a preset for future projects? (y/N) N

プロジェクトの作成が自動ではじまり、作成が完了すると以下の文言が表示されます。
これでVue3(CompositionAPI)＋TypeScriptのプロジェクト作成は完了です。

..
🎉  Successfully created project my-project.
👉  Get started with the following commands:

 $ cd my-project
 $ npm run serve

C:\>

Vueプロジェクトの起動

ここからは作成したVueプロジェクトを起動する手順となります。
作成したプロジェクトのフォルダはいかに移動（cd my-project）し、npm run serveを実行することでサーバが起動しブラウザから画面を確認することができます。

  1. コマンドを実行します。
C:\> cd my-project
C:\my-project> npm run serve
  1. 以下が表示されればサーバの起動は完了です。
    ブラウザにhttp://localhost:8080/を入力してアクセスしてみましょう。
 DONE  Compiled successfully in 13122ms                            21:12:44


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.0.1:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

No issues found.
  1. 以下の画面が表示されれば成功です。
    これにてVueプロジェクトの起動は完了です。ひとまずお疲れさま！

起動画面1

TailwindCSSパッケージのインストール

ここからはTailwindCSSのインストールです。
TailwindCSSとはCSSフレームワークです。ユーティリティクラスがたくさん定義されておりそれを組み合わせることでCSSの命名規則などの思考時間を削減してCSSを利用できます。
TailwindCSSのコアコンセプト

  1. my-projectフォルダ配下で以下のコマンドを実行し、インストールします。
【応用】postcss、autoprefixerとは

postcssとは、
CSSファイルのデバッグや圧縮などをしてくれるプラグインです。
autoprefixerとは、
Can I Use[4]に応じてベンダープレフィックス[5]を付与してくれるpostcssのプラグインです。

C:\my-project> npm install -D tailwindcss postcss autoprefixer


  1. インストールが完了したら以下のコマンドで設定ファイルを作成します。
    my-projectフォルダ配下にtailwind.config.jsが作成されます。
npx tailwindcss init


  1. 次にTailwindCSSとautoprefixerの設定をします。
    my-projectフォルダ配下にpostcss.config.jsファイルを作成し、以下の内容を記述することで設定できます。
my-project/postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}


  1. TailwindCSSを適用するための設定を記載します。
    tailwind.config.jsのcontentに以下を追記してください。
    srcフォルダ配下の拡張子がhtml, ts(TypeScript), vueのファイルをTailwindCSSの対象とするいう意味です。すべてのコンテンツファイルを記載します。
    他の拡張子のファイルも必要となった場合は、ここに拡張子を追記してください。
my-project/tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
- content: [],
+ content: ["./src/**/*.{html,ts,vue}"],
  theme: {
    extend: {},
  },
  plugins: [],
}


  1. src配下にmain.cssを作成します。
    これがTailwindCSSのユーティリティ群です。
my-project/src/main.css
@tailwind base;
@tailwind components;
@tailwind utilities;


  1. 作成したcssファイルをmain.tsファイルでインポートします。
    これでTailwindCSSの導入設定は完了です。
my-project/src/main.ts
import { createApp } from "vue";
import App from "./App.vue";
+ import "@/main.css";

createApp(App).mount("#app");


  1. ブラウザで画面を確認し、以下の様にvueのアイコンが左端によっていればTailwindCSSの導入は成功です。最後までお疲れ様でした！

起動画面2



公式サイト：
https://tailwindcss.com/docs/installation/using-postcss


最後に

TypeScriptを使用したVue3プロジェクトの作成からTailwindCSSの導入までの手順を整理しました。
記事を記載していく中で、Babelとは？ESLint？Prettier？postcss？autoprefixer？と詳細に説明しききれなかった部分が多々あったためその辺は別途整理して記事を作成できたらと考えています。
他にもCompositionAPIやTailwindCSSへの知見も深めていきたいですね。

Vue3に関して今後も情報を整理していきたいのでよかったらフォローよろしくお願いいたします。
最後まで読んでいただきありがとうございました。

脚注

  1. 古いブラウザでも動作するようにJavaScriptのコードを新しい書き方から古い書き方へ変換するツール。 ↩︎

  2. コードに問題点がないかを確認する静的解析ツール。 ↩︎

  3. コードのスタイルをチェックするツール。 ↩︎

  4. CSSのプロパティやhtml5要素の各ブラウザの対応状況が確認できるサービスです。公式サイト ↩︎

  5. ブラウザ独自の拡張機能を使用するためのCSSに記載する接頭語です。 ↩︎

Discussion