Ein einfaches Beispiel für die Entwicklung mehrseitiger Anwendungen mit vue-cli

Erstellen Sie ein Projekt

Verwenden Sie vue-cli, um ein Projekt zu erstellen

$ vue init webpack vue-multiple-demo

Folgen Sie den Konsolenanweisungen und geben Sie die relevanten Informationen ein. Geben Sie nach der Erstellung das Projektstammverzeichnis ein und installieren Sie die Abhängigkeiten.

$ cd vue-multiple-demo
$ npm install

Da wir eine mehrseitige Anwendung entwickeln, ist für dieses Projekt keine Konfiguration vorhanden vue-router.

Das einfachste Beispiel

Projekte, die über vue-cli erstellt wurden, entwickeln standardmäßig einseitige Anwendungen. Wenn Sie mehrere Seiten entwickeln möchten, müssen Sie die Konfiguration einiger Skripte anpassen.

Eintrag

Erstellen Sie einen neuen src im Verzeichnis demo.js. Kopieren Sie den Inhalt der Einfachheit halber direkt in main.js. Ändern Sie dann build/webpack.base.conf.jss entry so, dass es mehrere sind.

entry: {
  app: './src/main.js',
  demo: './src/demo.js'
},

Vorlage

Erstellen Sie eine neue demo.html-Datei im Projektstammverzeichnis und kopieren Sie auch den Inhalt von index.html dorthin. Um sie zu unterscheiden, bearbeiten Sie nur den Inhalt von <title>.

<title>demo</title>

Adresse veröffentlichen

Fügen Sie einen neuen Datensatz unter der config/index.js-Konfiguration von build hinzu.

index: path.resolve(__dirname, '../dist/index.html'),
demo: path.resolve(__dirname, '../dist/demo.html'),

Konfiguration der Produktionsumgebung

Passen Sie die Konfiguration von build/webpack.prod.conf.js in plugins an. html

Änderung

new HtmlWebpackPlugin({
  filename: config.build.index,
  template: 'index.html',
  inject: true,
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
    // more options:
    // https://github.com/kangax/html-minifier#options-quick-reference
  },
  // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  chunksSortMode: 'dependency',
  chunks: ['manifest', 'vendor', 'app']
}),

• Schreiben Sie es einfach auffilename

• Um zu verhindern, dass unnötiges

  geladen wird, fügen Sie die js-Konfiguration hinzu. chunks

Neu hinzugefügt

new HtmlWebpackPlugin({
  filename: config.build.demo,
  template: 'demo.html',
  inject: true,
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
    // more options:
    // https://github.com/kangax/html-minifier#options-quick-reference
  },
  // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  chunksSortMode: 'dependency',
  thunks: ['manifest', 'vendor', 'demo']
}),

in config/index.js in build->assetsPublicPath ändern. ./

assetsPublicPath: './',

$ npm run build

direkt im Verzeichnis dist, um eine Vorschau des Effekts anzuzeigen. html

ist wie folgtsrc

• Assets

• logo.png

• Komponenten

• HelloWorld.vue

• Einträge

• index.js

• list.js

• Vorlagen

• index.html

• list.html

• Die entries Datei, die zum Speichern des Seiteneintrags verwendet wirdjs

• Die zum Speichern der Seite verwendete VorlagetemplatesDateihtml

, um hier eine Methode zu erweitern. glob

$ npm install glob --save-dev

build/utils.js

const glob = require('glob')

// 遍历指定目录下的文件
exports.getEntries = (dirPath) => {
  let filePaths = glob.sync(dirPath);
  let entries = {};
  filePaths.forEach(filePath => {
    let filename = filePath.match(/(\w+)\.[html|js]+/)[1];
    entries[filename] = filePath;
  })
  return entries;
}

entry: utils.getEntries('./src/entries/*.js'),

zugehörige Konfiguration und durchlaufen Sie die zugehörige Konfiguration und fügen Sie sie vor dem Ende der Datei hinzu. HtmlWebpackPlugin

const pages = utils.getEntries('./src/templates/*.html');
for(let page in pages) {
  let fileConfig = {
    filename: path.resolve(__dirname, '../dist/pages/' + page + '.html'),
    template: pages[page],
    inject: true,
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
    },
    chunksSortMode: 'dependency',
    thunks: ['manifest', 'vendor']
  };
  fileConfig.thunks.push(page);
  // 添加插件配置
  webpackConfig.plugins.push(new HtmlWebpackPlugin(fileConfig));
}

assetsPublicPath: '../',

$ npm run build

im Verzeichnis dist, um eine Vorschau des Effekts anzuzeigen. html

verwendet wird, um mehrere Schlüsselpunkte mehrseitiger Anwendungen zu entwickeln. vue-cli

• Mehrere Einträge

• Mehrere

  HtmlWebpackPlugin

• Statischer Ressourcenpfad

Vue erstellt mehrseitige Beispiel-Codefreigabe für Anwendungen

Vue-cli erstellt eine einzelne Seite zu einer mehrseitigen Methodenbeispielcode

Vue CLI-Rekonstruktion, mehrseitiges Gerüstbaubeispiel, Teilen

Das obige ist der detaillierte Inhalt vonEin einfaches Beispiel für die Entwicklung mehrseitiger Anwendungen mit vue-cli. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!