Vue Academy · レッスン

CLIの設定とプラグイン

Q: 「CLIの設定とプラグイン」で何を学びますか？

CLIを設定し、プラグインを追加してプロジェクトを拡張します ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

CLIを設定し、プラグインを追加してプロジェクトを拡張します

「CLIの設定とプラグイン」はCoddyKit上の無料Vue Academyレッスンです。これはレッスン3/3です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全3レッスンが含まれています。

ビルドの設定

Vue CLIとViteはどちらも、設定ファイルを通じてビルドをカスタマイズできます。

Vue CLIではvue.config.jsを使用します
Viteではvite.config.jsを使用します

ここでプラグインの追加、エイリアスの設定、開発サーバーの構成などを行います。

vite.config.jsの基本

一般的なvite.config.jsでは、Vueプラグインをインポートして設定オブジェクトをエクスポートします。

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000
  }
})

vue.config.jsの基本

Vue CLIプロジェクトでは、vue.config.jsも同じ方法で設定をエクスポートします。

const { defineConfig } = require("@vue/cli-service")

module.exports = defineConfig({
  devServer: {
    port: 8080
  }
})

プラグインの追加

プラグインを使うと、ビルドに新しい機能を追加できます。

npmでインストールします
設定ファイルでインポートします
plugins配列に追加します

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import vueJsx from "@vitejs/plugin-vue-jsx"

export default defineConfig({
  plugins: [vue(), vueJsx()]
})

環境変数

環境によって変わる設定は、.envファイルに保存します。

.envはすべての環境で読み込まれます
.env.developmentは開発時のみ使用します
.env.productionは本番ビルドで使用します

環境変数の定義

Viteでは、クライアントコードから参照できるようにする変数名の先頭にVITE_を付ける必要があります。

# .env file
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My App

環境変数の読み取り

Viteでは、import.meta.envを通じて公開された変数にアクセスします。

const apiUrl = import.meta.env.VITE_API_URL
console.log(apiUrl)
// https://api.example.com

環境変数に関するセキュリティ上の注意

クライアントコードに公開したものはすべて、ブラウザーから見える状態になります。

秘密のAPIキーなどをVITE_変数に決して入れないでください
ここに置くのは、公開しても問題のない機密性のない設定だけにしてください
本物のシークレットはサーバー側で管理してください

パスエイリアス

エイリアスを使うと、インポートパスを短くできます。よく使われる設定では、@をsrcフォルダーに対応付けます。

これにより、../../componentsのような壊れやすい相対パスを使わずに済みます。

import { fileURLToPath, URL } from "node:url"
import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url))
    }
  }
})

エイリアスの使用

設定後は、相対パスの代わりに@/からインポートします。

// Without alias
import Button from "../../components/Button.vue"

// With @ alias
import Button from "@/components/Button.vue"

開発サーバーのオプション

設定ファイルでは、開発サーバーも調整できます。

port待ち受けに使用するポートです
openブラウザーを自動的に開きます
proxyCORSを回避するためにAPIリクエストを転送します

export default defineConfig({
  server: {
    port: 3000,
    open: true,
    proxy: {
      "/api": "http://localhost:8000"
    }
  }
})

理解度チェック

Viteの設定についての理解度を確認しましょう。

まとめ：設定とプラグイン

Vueプロジェクトの設定方法を学びました。

vite.config.jsまたはvue.config.jsに設定を記述します
plugins配列にプラグインを追加します
VITE_プレフィックスを付けた.envファイルを使用します
import.meta.envを通じて読み取ります
インポートを簡潔にするために@エイリアスを設定します

次は、テンプレート構文とデータバインディングについて学びます。

よくある質問

「CLIの設定とプラグイン」レッスンは無料ですか？

はい。「CLIの設定とプラグイン」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全3レッスンが含まれています。

「CLIの設定とプラグイン」で何を学びますか？

CLIを設定し、プラグインを追加してプロジェクトを拡張しますブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/3です。

「CLIの設定とプラグイン」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Vue Academyに戻る