Kleines, aber feines Vue-Projekt in Aktion: leichte Vue- und Webpack-Anwendungen

Der Aufstieg des Vue-Frameworks hat die Art und Weise der Front-End-Entwicklung verändert. Seine Einfachheit, Benutzerfreundlichkeit, Effizienz und Flexibilität wurden von der Mehrheit der Entwickler anerkannt. Als leistungsstarkes Modulpaketierungstool spielt Webpack auch eine wichtige Rolle bei der Entwicklung des Front-End-Engineerings. In diesem Artikel wird ein kleines, aber feines Vue-Projekt in der Praxis vorgestellt. Es wird mit leichtgewichtigem Vue.js und Webpack entwickelt. Es kann schnell gestartet werden und bietet eine Lernreferenz.

1. Vorausgesetzte Kenntnisse

Bevor wir diesen Artikel studieren, müssen wir über die folgenden Wissensreserven verfügen:

• Grundlegende HTML-, CSS- und JavaScript-Entwicklungsfähigkeiten;

• Grundkenntnisse von Vue.js und der Verwendung gängiger APIs;

• Grundkenntnisse von Webpack und der Verwendung gängiger Konfigurationselemente.

Wenn Sie mit den oben genannten Kenntnissen nicht vertraut sind, wird empfohlen, zunächst grundlegendes Lernen und Üben durchzuführen.

2. Projektentwicklungsprozess

Wir entwickeln das Projekt in den folgenden Schritten:

• Initialisieren Sie das Projekt

• Installieren Sie Abhängigkeiten

• Konfigurieren Sie Webpack

• Entwerfen Sie das Seitenlayout

• Schreiben Sie Vue-Komponenten

• Verpackungsprojekt

Als nächstes beginnen wir Schritt für Schritt mit der Anwendungsentwicklungsreise von Vue und Webpack.

3. Initialisieren Sie das Projekt

Mit Vue-cli können Sie schnell das Grundgerüst des Vue.js-Projekts generieren und einige allgemeine Konfigurationselemente voreinstellen, um unsere schnelle Entwicklung zu erleichtern. Hier verwenden wir Vue-cli, um das Projekt zu initialisieren.

Der erste Schritt besteht darin, das Vue-cli-Tool zu installieren:

npm install -g @vue/cli

Der zweite Schritt besteht darin, ein neues Projekt mit Vue-cli zu erstellen und das Arbeitsverzeichnis in die Befehlszeile einzugeben:

vue create vue-webpack-project

Das hier erstellte Projekt wird aufgerufen vue-webpack-project, Vue-cli generiert einen Projektordner mit dem Namen vue-webpack-project im aktuellen Verzeichnis.

4. Abhängigkeiten installieren

Geben Sie das Stammverzeichnis des Projekts ein und führen Sie den folgenden Befehl aus, um die erforderlichen Abhängigkeiten zu installieren:

npm install vue vue-router --save

Zu den Abhängigkeiten, die wir hier installieren müssen, gehören Vue.js und Vue-router wird offiziell bereitgestellt von Das Routing-Plug-in von Vue.js kann Probleme im Zusammenhang mit dem Front-End-Routing problemlos lösen.

5. Webpack konfigurieren

In der tatsächlichen Entwicklung ist die Webpack-Konfiguration normalerweise komplizierter als das Schreiben von Code, sodass wir nur einige allgemeine Konfigurationselemente konfigurieren müssen.

Der erste Schritt besteht darin, eine neue webpack.config.js-Datei zu erstellen, um die Konfiguration von Webpack zu speichern:

const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /.vue$/,
        use: 'vue-loader'
      },
      {
        test: /.js$/,
        use: 'babel-loader'
      },
      {
        test: /.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
};

Hier konfigurieren wir drei Regeln: Vue-Loader zum Verarbeiten von .vue-Dateien, Babel-Loader zum Verarbeiten von .js-Dateien, CSS-Loader- und Vue-Style-Loader-Plug-Ins, die CSS-Dateien verarbeiten.

Der zweite Schritt besteht darin, die Datei package.json zu ändern und im Skriptattribut einen Befehl hinzuzufügen, um Webpack im Stammverzeichnis des Projekts auszuführen:

{
  "scripts": {
    "build": "webpack"
  },
  ……
}

6. Seitenlayoutdesign durchführen

Vor der Projektentwicklung müssen wir entwerfen die Seite zuerst Layout-Design. Hier nutzen wir die ElementUI-Komponentenbibliothek für eine schnelle Entwicklung und verwenden die Komponenten direkt in der HTML-Datei.

<!DOCTYPE html>
<html>
  <head>
    <title>vue-webpack-project</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  </head>
  <body>
    <div id="app">
      <el-container>
        <el-header>Header</el-header>
        <el-container>
          <el-aside>Aside</el-aside>
          <el-main>Main</el-main>
        </el-container>
      </el-container>
    </div>
    <script src="./dist/bundle.js"></script>
  </body>
</html>

7. Vue-Komponenten schreiben

Erstellen Sie im src-Verzeichnis zwei neue .vue-Dateien: Header.vue und Main.vue. Der Code lautet wie folgt:

Header.vue

<template>
  <el-header>
    <h1>Header</h1>
  </el-header>
</template>

<script>
export default {
}
</script>

<style scoped>
el-header {
  text-align: center;
  color: #fff;
  background-color: #409EFF;
}
</style>

Main.vue

<template>
  <el-main>
    <h1>Main</h1>
  </el-main>
</template>

<script>
export default {
}
</script>

<style scoped>
el-main {
  text-align: center;
}
</style>

Hier verwenden wir ElementUI-Komponenten, um das Layout von Header und Main zu implementieren.

8. Packen des Projekts

Führen Sie in der Befehlszeile den folgenden Befehl aus, um Webpack zu packen:

npm run build

Webpack packt das Projekt und generiert das Verzeichnis dist und die Datei bundle.js gemäß unserer Konfiguration.

9. Zusammenfassung

Dieser Artikel stellt die Verwendung von leichtgewichtigem Vue.js und Webpack anhand eines kleinen und schönen Vue-Projekts vor, einschließlich der Initialisierung des Projekts, der Installation von Abhängigkeiten, der Konfiguration von Webpack, dem Entwerfen des Seitenlayouts, dem Schreiben von Vue-Komponenten und Schritten wie dem Verpacken das Projekt. Als Anfänger von Vue und Webpack können Sie diesen Artikel lesen, um die grundlegende Verwendung und Konfiguration zu üben und zu erlernen und Ihr Verständnis von Vue.js und Webpack zu vertiefen.

Das obige ist der detaillierte Inhalt vonKleines, aber feines Vue-Projekt in Aktion: leichte Vue- und Webpack-Anwendungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!