vue3+vite のインストールと構成

1. インストール

1. Node.js がインストールされていることを確認します。最新バージョンの Node.js を入手するには、https://nodejs.org/にアクセスしてください。LTS バージョンが推奨されます。

2. コマンド ラインまたはターミナルを開き、次のコマンドを実行して Vite をグローバルにインストールします。

cnpm install -g create-vite

3. 新しいプロジェクトを作成します。コマンド ラインで次のコマンドを実行します。「my-vue3-vite-project」を目的のプロジェクト名に置き換えます。

create-vite my-vue3-vite-project --template vue

4. プロジェクト ディレクトリに切り替えます。

cd my-vue3-vite-project

5. プロジェクトの依存関係をインストールします。

cnpm install

6. 開発サーバーを実行します。

npm run dev

これで、Vue 3 と Vite プロジェクトが正常に作成されました。ブラウザが自動的に開きます

2、構成

エンタープライズレベルのプロジェクトの標準に従って Vue 3 および Vite プロジェクトを構成するには、次の点を考慮する必要があります。

1. ディレクトリ構造
2. コーディング標準とスタイル
3. 環境変数と設定
4. APIリクエストのカプセル化
5. ルーティングと権利管理
6. コンポーネントとスタイルのライブラリ
7. 最適化とパッケージ化

これらに対するいくつかの提案と構成を次に示します。

1. ディレクトリ構造

my-vue3-vite-project
├─ public
└─ src
   ├─ api
   ├─ assets
   │  ├─ images
   │  └─ styles
   ├─ components
   ├─ layout
   ├─ router
   ├─ store
   │  ├─ modules
   │  └─ index.js
   ├─ utils
   ├─ views
   └─ main.js

2. コードの仕様とスタイル

チームのすべてのメンバーが同じコード仕様とスタイルに確実に従うことができるように、ESLint と Prettier を使用することをお勧めします。まず必要な依存関係をインストールします。

cnpm install --save-dev eslint eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier prettier

プロジェクトのルート ディレクトリに「.eslintrc.js」ファイルと「.prettierrc」ファイルを作成して、ESLint と Prettier をそれぞれ構成します。

.eslintrc.js：

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/prettier",
  ],
  parserOptions: {
    parser: "babel-eslint",
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
  },
};

.prettierrc： 

{
  "singleQuote": true,
  "semi": false,
  "trailingComma": "none",
  "arrowParens": "avoid"
}

3. 環境変数と設定

プロジェクトのルート ディレクトリに「.env」、「.env.development」、および「.env.production」ファイルを作成して、それぞれ一般環境、開発環境、運用環境の変数を構成します。Vite はこれらの環境変数を自動的に読み込みます。

.env.development ファイルの例:

VITE_API_BASE_URL=http://localhost:3000/api

.env.production ファイルの例:

VITE_API_BASE_URL=https://api.example.com

4. APIリクエストのカプセル化

たとえば、Axios を使用して、「src/api」ディレクトリに API リクエスト ライブラリを作成します。まず Axios をインストールします。

cnpm install axios

次に、「src/api」ディレクトリに「request.js」などのAxiosをカプセル化するファイルを作成します。

5. ルーティングと権利管理

ルーターガードとユーザー権限を処理するために、「src/router」ディレクトリに「permission.js」などの権限管理ファイルを作成します。このファイルを「src/main.js」にインポートします。

6. コンポーネントとスタイル ライブラリ

Element Plus、Ant Design Vue、Vuetify などの適切なコンポーネント ライブラリを選択します。公式ドキュメントに従って、コンポーネント ライブラリをインストールして構成します。また、よく使用されるカスタム コンポーネントを「src/components」ディレクトリに配置することも検討してください。

7. 最適化とパッケージ化

Vite は、優れたデフォルトの最適化とパッケージ化構成を提供します。必要に応じて、「vite.config.js」ファイルでカスタム構成を行うことができます。