Installieren und konfigurieren Sie vue3+vite

1. Installation

1. Stellen Sie sicher, dass Node.js installiert ist. Besuchen Sie https://nodejs.org/, um die neueste Version von Node.js zu erhalten. LTS-Versionen werden empfohlen.

2. Öffnen Sie die Befehlszeile oder das Terminal und führen Sie den folgenden Befehl aus, um Vite global zu installieren:

cnpm install -g create-vite

3. Erstellen Sie ein neues Projekt. Führen Sie den folgenden Befehl in der Befehlszeile aus und ersetzen Sie „my-vue3-vite-project“ durch den gewünschten Projektnamen:

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

4. Wechseln Sie in das Projektverzeichnis:

cd my-vue3-vite-project

5. Projektabhängigkeiten installieren:

cnpm install

6. Führen Sie den Entwicklungsserver aus:

npm run dev

Nun wurde erfolgreich ein Vue 3- und Vite-Projekt erstellt. Der Browser öffnet sich automatisch

Zweitens, Konfiguration

Um Vue 3- und Vite-Projekte gemäß dem Standard von Projekten auf Unternehmensebene zu konfigurieren, müssen wir die folgenden Aspekte berücksichtigen:

1. Verzeichnisaufbau
2. Codierungsstandards und -stil
3. Umgebungsvariablen und Konfiguration
4. Kapselung von API-Anfragen
5. Routing und Rechteverwaltung
6. Komponenten- und Stilbibliotheken
7. Optimieren und verpacken

Hier sind einige Vorschläge und Konfigurationen dafür:

1. Verzeichnisstruktur

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

2. Codespezifikation und -stil

Um sicherzustellen, dass jedes Teammitglied der gleichen Codespezifikation und dem gleichen Codestil folgen kann, wird die Verwendung von ESLint und Prettier empfohlen. Installieren Sie zunächst die erforderlichen Abhängigkeiten:

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

Erstellen Sie die Dateien „.eslintrc.js“ und „.prettierrc“ im Projektstammverzeichnis, um ESLint bzw. Prettier zu konfigurieren.

.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. Umgebungsvariablen und Konfiguration

Erstellen Sie die Dateien „.env“, „.env.development“ und „.env.produktion“ im Stammverzeichnis des Projekts, um Variablen für die allgemeine Umgebung, die Entwicklungsumgebung und die Produktionsumgebung zu konfigurieren. Vite lädt diese Umgebungsvariablen automatisch.

Beispiel einer .env.development-Datei:

VITE_API_BASE_URL=http://localhost:3000/api

Beispiel einer .env.produktionsdatei:

VITE_API_BASE_URL=https://api.example.com

4. Kapselung der API-Anfrage

Erstellen Sie eine API-Anforderungsbibliothek im Verzeichnis „src/api“, beispielsweise mit Axios. Zuerst Axios installieren:

cnpm install axios

Erstellen Sie dann eine Datei, die Axios im Verzeichnis „src/api“ kapselt, z. B. „request.js“.

5. Routing und Rechteverwaltung

Erstellen Sie im Verzeichnis „src/router“ eine Berechtigungsverwaltungsdatei wie „permission.js“, um Router-Guards und Benutzerberechtigungen zu verwalten. Importieren Sie diese Datei in „src/main.js“

6. Komponenten- und Stilbibliothek

Wählen Sie eine geeignete Komponentenbibliothek wie Element Plus, Ant Design Vue oder Vuetify. Befolgen Sie die offizielle Dokumentation, um die Komponentenbibliothek zu installieren und zu konfigurieren. Erwägen Sie außerdem, häufig verwendete benutzerdefinierte Komponenten im Verzeichnis „src/components“ zu platzieren.

7. Optimierung und Verpackung

Vite bietet eine gute Standardoptimierung und Verpackungskonfiguration. Bei Bedarf kann eine benutzerdefinierte Konfiguration in der Datei „vite.config.js“ vorgenommen werden.