So führen Sie das Uniapp-Projekt auf der h5-Seite aus

Mit der rasanten Entwicklung des mobilen Internets beginnen immer mehr Unternehmen, der terminalübergreifenden Entwicklungstechnologie Aufmerksamkeit zu schenken und diese zu nutzen. Uniapp ist als plattformübergreifendes Entwicklungsframework, das Vue.js- und Miniprogramm-Entwicklungsfunktionen integriert, in vielen Unternehmen weit verbreitet.

Uniapp unterstützt die Ausführung auf verschiedenen Plattformen, z. B. WeChat-Applet, Alipay-Applet, Baidu-Applet, H5-Ende, App-Ende usw. In diesem Artikel wird hauptsächlich erläutert, wie Uniapp auf der H5-Ende ausgeführt wird.

1. Projektinitialisierung

Bevor wir das Uniapp-Projekt ausführen, müssen wir das Projekt zuerst initialisieren. Geben Sie den folgenden Befehl in die Befehlszeile ein:

npm install -g @vue/cli

vue create -p dcloudio/uni-preset-vue my-project

wobei „my-project“ der Projektname ist, der bei Bedarf geändert werden kann. Nachdem die Initialisierung abgeschlossen ist, können wir das Projekt zur Bearbeitung und zum Debuggen in das Entwicklungstool importieren.

2. Seitencode schreiben

In Uniapp können wir die Seite entwickeln, indem wir die einzelne Dateikomponente von Vue schreiben. Das Folgende ist ein einfaches Beispiel:

<template>
  <view class="container">Hello world!</view>
</template>

<style>
  .container {
    text-align: center;
    font-size: 24px;
    color: #333;
  }
</style>

Auf der Seite können wir verschiedene Komponenten verwenden, um farbenfrohe interaktive Effekte zu erzielen.

3. Konfigurieren Sie die H5-Laufumgebung

Nachdem wir das Schreiben der Seite abgeschlossen haben, müssen wir die H5-Laufumgebung konfigurieren, um das Projekt auszuführen.

1. Manifest.json ändern

Suchen Sie im Stammverzeichnis des Projekts die Datei manifest.json, die einige grundlegende Aspekte des definiert Uniapp-Projekteigenschaft. Wir müssen die folgenden Attributwerte auf true setzen, um den Betrieb der H5-Seite zu unterstützen.

"h5": {
  "baseApiUrl": "",
  "devServer": {
    "host": "",
    "port": "",
    "compress": true
  },
  "subpackages": true,
  "postcss": true,
  "customVars": true
}

2. Abhängigkeiten installieren

Führen Sie den folgenden Befehl aus, um die für H5 erforderlichen Abhängigkeitspakete zu installieren:

npm install uni-html-webpack-plugin html-webpack-plugin webpack-dev-server webpack-cli webpack -D

# 🎜 🎜#Webpack konfigurieren

Erstellen Sie im Stammverzeichnis des Projekts die Datei vue.config.js und fügen Sie den folgenden Code hinzu:

const path = require('path');
const fs = require('fs');

const UniHtmlWebpackPlugin = require('uni-html-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  configureWebpack: (config) => {
    const pages = {};
    const entries = {};
    const templateDir = './public';
    const templateExt = '.html';

    const appDirectory = fs.realpathSync(process.cwd());
    const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);

    const getEntries = (dir, ext) => {
      const entryFiles = fs.readdirSync(dir);
      let regx = new RegExp(ext + '$');
      return entryFiles.filter(file => regx.test(file)).reduce((entry, file) => {
        const filename = file.replace(new RegExp(ext + '$'), '');
        entry[filename] = path.join(dir, filename);
        return entry;
      }, {});
    };

    const getPages = (entryDir, templateDir, templateExt) => {
      const entryFiles = fs.readdirSync(entryDir);
      let regx = new RegExp('\.(' + Object.keys(entries).join("|") + ')$');
      return entryFiles.filter(file => regx.test(file)).reduce((pages, file) => {
        const filename = file.replace(regx, '');
        const template = path.join(templateDir, filename + templateExt);
        pages[filename] = {
          entry: entries[filename],
          template,
          filename: `${filename}.html`,
          chunks: ['chunk-vendors', 'chunk-common', filename]
        };
        return pages;
      }, {});
    };
    Object.assign(entries, getEntries('./src/pages', '.vue$'));
    Object.assign(pages, getPages('./src/pages', templateDir, templateExt));

    config.entry = entries;
    config.plugins = config.plugins.concat(
      Object.keys(pages).map((name) => {
        const page = pages[name];
        return new HtmlWebpackPlugin({
          title: name,
          template: page.template,
          filename: page.filename,
          chunks: page.chunks,
          inject: true,
          minify: {
            removeComments: false,
            collapseWhitespace: false,
            removeAttributeQuotes: false,
            minifyJS: false,
            minifyCSS: false,
            minifyURLs: false
          }
        });
      }),
      new UniHtmlWebpackPlugin()
    );
  }
};

#🎜 🎜#Projekt ausführen

Nach Abschluss der obigen Schritte können wir den folgenden Befehl in die Befehlszeile eingeben, um die H5-seitige Betriebsumgebung zu starten:

npm run dev:h5

Gleichzeitig können wir auch ausführen. Verwenden Sie zum Paketieren den folgenden Befehl:

npm run build:h5

Während des Ausführungs- und Verpackungsprozesses stellt Uniapp auch eine Fülle von Entwicklungs- und Debugging-Tools bereit, um Entwicklern bei der Entwicklung und Wartung von Projekten zu helfen schnell.

Zusammenfassung

In diesem Artikel wird kurz vorgestellt, wie das Uniapp-Projekt auf der H5-Seite ausgeführt wird. Durch die Konfiguration und Verwendung geeigneter Tools können Entwickler eine effizientere Cross-End-Entwicklung durchführen . In tatsächlichen Projekten können wir auch einige flexible Anpassungen und Erweiterungen basierend auf unseren eigenen Bedürfnissen vornehmen, um den Anforderungen verschiedener Szenarien gerecht zu werden.

Das obige ist der detaillierte Inhalt vonSo führen Sie das Uniapp-Projekt auf der h5-Seite aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!