Implementierung von vite+vue3.0+ts+element-plus zum schnellen Erstellen eines Projekts

npm init vite-app <Projektname>
cd <Projektname>
npm installieren
npm-Ausführung dev

yarn create vite-app <Projektname>
cd <Projektname>
Garn
Garn-Entwickler

Pfad von „Pfad“ importieren;

const pathResolve = (pathStr: string) => {
  Rückgabepfad.Auflösen(__dirname, pathStr);
}

const konfiguration = {
  Basis: './', //Der grundlegende öffentliche Pfad beim Bereitstellen in der Produktion. @Standard '/'
  Alias: {
    '/@/': Pfadauflösung('./src'),
  },
  outDir: „vite-init“, // wo die Build-Ausgabe platziert wird. Das alte Verzeichnis wird vor dem Erstellen gelöscht. @Standard 'Verteilung'
  minify: 'esbuild', //Komprimierungsmethode während des Build-Hostnamens: 'localhost', //Lokale Serviceadresse Port: '8800', //Service-Portnummer open: false, //Ob beim Starten des Dienstes https im Browser geöffnet werden soll: false, //Ob https geöffnet werden soll
  ssr: false, //Gibt an, ob auf der Serverseite gerendert werden soll optimizeDeps: { //Drittanbieterkonfiguration einführen include: ['axios']
  },
  // Proxy: {//Proxy-Konfiguration// '/api': {
  // Ziel: 'http://xx.xx.xx.xx:xxxx',
  // changeOrigin: true,
  // ws: wahr,
  // umschreiben: (Pfad: Zeichenfolge) => { Pfad.ersetzen(/^\/api/, '') }
  // }
  // }
}
module.exports = Konfiguration;

{
  "Compileroptionen": {
    "target": "ES5", //Geben Sie die Zielversion von ECMAScript an: „ES3“ (Standard), „ES5“, „ES2015“, „ES2016“, „ES2017“, „ES2018“, „ES2019“, „ES2020“ oder „ESNEXT“.
    "Modul": "commonjs", //Geben Sie die Modulcodegenerierung an: „none“, „commonjs“, „amd“, „system“, „umd“, „es2015“, „es2020“ oder „ESNext“.
    "strict": true, //Ob alle Optionen zur strengen Typprüfung aktiviert werden sollen.
    "baseUrl":"./", //Basisverzeichnis, das zum Auflösen nicht absoluter Modulnamen verwendet wird.
    "Pfade": {
      "/@/*": ["./quelle/*"]
    },  
    "noImplicitAny": true, //Löst einen Fehler für Ausdrücke und Deklarationen aus, die einen impliziten „any“-Typ haben.
    „esModuleInterop“: true, //Aktivieren Sie die Interoperabilität zwischen CommonJS- und ES-Modulen, indem Sie Namespace-Objekte für alle Importe erstellen. Impliziert „allowSyntheticDefaultImports“.
    „experimentalDecorators“: true, //Unterstützt experimentelle Unterstützung für ES7-Dekoratoren.
    "skipLibCheck": true, //Typprüfung der Deklarationsdateien überspringen.
    "forceConsistentCasingInFileNames": true //Deaktiviert inkonsistente Groß-/Kleinschreibung von Verweisen auf dieselbe Datei.
  }
}

<Vorlage>
  <img alt="Vue-Logo" src="./assets/logo.png" />
  <Router-Ansicht />
</Vorlage>

<Skript>
Standard exportieren {
  Name: "App",
  aufstellen() {

  }
}
</Skript>

<Vorlage>
  <HalloWelt :msg="msg"></HalloWelt>
</Vorlage>

<script lang="ts">
importiere HelloWorld aus "/@/views/HelloWorld.vue";
importiere { defineComponent } von "vue";
exportiere StandarddefiniereKomponente({
  Name: "Home",
  Komponenten: { HalloWelt },
  aufstellen() {
    zurückkehren {
      Nachricht: "Hallo Welt",
    };
  },
});
</Skript>

<Vorlage>
  <h1>{{ msg }}</h1>
  <button @click="realTime.count++">Anzahl ist: {{ realTime.count }}</button>
  <button @click="handleclick">Klicken, um zu anderen Routen zu springen</button>
  <p>Bearbeiten Sie <code>components/HelloWorld.vue</code>, um den Hot-Module-Ersatz zu testen.</p>
</Vorlage>

<Skript>
importiere { defineComponent, reaktiv } von "vue";
importiere { useRouter } von 'vue-router'
exportiere StandarddefiniereKomponente({
  Name: 'Index',
  Requisiten: { msg: { Typ: String, Standard: 'Willkommen bei vue3' } },
  setup(Requisiten) {
    const router = useRouter();
    Lassen Sie realTime = reaktiv({Anzahl: 0});

    Funktion handleclick() {
      router.push({ Pfad: '/anderes' })
    }
    zurückkehren {
      Nachricht: Eigenschaften.Nachricht,
      Echtzeit,
      klick auf den Griff
    }
  }
})
</Skript>

importiere { createRouter, createWebHistory, RouteRecordRaw } von 'vue-router'

const routes: Array<RouteRecordRaw> = [
  {
    Weg: '/',
    Komponente: () => import("/@/views/index.vue")
  },
]

exportiere Standard createRouter({
  Verlauf: createWebHistory(),
  Routen
})

importiere { createApp } von 'vue'
Router aus „./router/index“ importieren
App aus „./App.vue“ importieren
Importieren Sie ElementPlus von „element-plus“.

importiere 'element-plus/lib/theme-chalk/index.css'
importiere './reset.css'

const app = erstelleApp(App);
app.use(ElementPlus);
app.use(router);
app.mount('#app');

Deklariere das Modul '*.vue' { }
Deklarieren Sie das Modul „*.js“
Deklarieren Sie das Modul „*.json“.
Deklarieren Sie das Modul „*.svg“
Modul „*.png“ deklarieren
Modul „*.jpg“ deklarieren
Deklarieren Sie das Modul „*.jpeg“.
Deklarieren Sie das Modul „*.gif“
Modul „*.bmp“ deklarieren
Deklarieren Sie das Modul „*.tiff“.