Verwenden Sie zunächst den folgenden Befehl, um ein neues Vue.js-Projekt zu erstellen
vue init webpack vue-3
Nachdem Sie das Projekt mit VsCode geöffnet haben, geben Sie das Projekt in der Befehlszeile ein, installieren Sie die relevanten abhängigen Bibliotheken und Führen Sie dann das Projekt aus und führen Sie den folgenden Befehl aus:
cd vue-3npm installnpm run dev
Wenn alles normal ist, geben Sie http://localhost:8080 in den Browser ein und eine Seite mit einem großen V-Symbol sollte erscheinen.
Nach Abschluss der oben genannten Vorbereitungen werden wir als nächstes die Konfiguration des mehrseitigen Projekts implementieren. Die erwarteten Effekte sind wie folgt:
Geben Sie http:// ein Der Browser localhost:8080/admin springt zu der Seite mit der Meldung Dies ist der Administrator-Login .
Wir erstellen das Seiten-/Anmeldeverzeichnis im src-Verzeichnis des Projekts
und erstellen dann drei neue Ordner unter dem Anmeldeverzeichnis: admin.html admin.js Admin.vue
Dann schreiben wir den entsprechenden Seitenanzeigecode , wobei der Code in
admin.html wie folgt lautet
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>管理员登录页面</title></head><body>
<p id="admin"></p></body></html>Der Code in Admin.vue lautet wie folgt
<template>
<p id="admin">
<p>这里是管理员登录页面</p>
</p></template><script>export default {
name: 'Admin'}</script>Der Code in admin.js lautet wie folgt
import Vue from 'vue'import Admin from './Admin.vue'Vue.config.productionTip = false/* eslint-disable no-new */new Vue({
el: '#admin',
components: { Admin },
template: '<Admin/>'})Nachdem der Code für die oben gezeigte Seite fertiggestellt ist, beginnen Sie mit der Konfigurationsarbeit
Öffnen Sie zunächst das build-Verzeichnis
und fügen Sie eine neue Eintragsdatei zum <🎜 hinzu > Konfigurationsattribut der webpack.base.conf.js-Datei: entry
module.exports = { context: path.resolve(__dirname, '../'), entry: { app: './src/main.js', admin: './src/page/login/admin.js'
}, unter webpack.dev.conf.js der devServer-Datei hinzufügen: rewrites
devServer: { clientLogLevel: 'warning',
historyApiFallback: {
rewrites: [
{ from: /.admin/, to: path.posix.join(config.dev.assetsPublicPath, 'src/indexlogin/admin.html') }, { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
],
},-Konfigurationselement in der Datei >Plug-in, das zum Generieren der Eintragsseite von admin.html plugins verwendet wird und gleichzeitig HtmlWebpackPlugin hinzugefügt wird, um den Alias der Eintragsdatei anzugeben entsprechend dem vorherigen
. chunksentry
plugins: [ new webpack.DefinePlugin({ 'process.env': require('../config/dev.env')
}), new webpack.HotModuleReplacementPlugin(), new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. new webpack.NoEmitOnErrorsPlugin(), // https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', chunks:['app'], inject: true
}), new HtmlWebpackPlugin({ filename: 'src/page/login/admin.html', template: 'src/page/login/admin.html', chunks:['admin'], inject: true
}), darin und fügen den folgenden Code unter dem Attribut config hinzu: index.jsbuild
build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'),
admin: path.resolve(__dirname, '../dist/src/page/login/admin.html'),npm run devVerwenden Sie zunächst den folgenden Befehl, um ein neues Vue.js-Projekt zu erstellen
vue init webpack vue-3
cd vue-3npm installnpm run dev
Geben Sie http:// ein Der Browser localhost:8080/admin springt zu der Seite mit der Meldung
Dies ist der Administrator-Login. Wir erstellen das Seiten-/Anmeldeverzeichnis im src-Verzeichnis des Projekts
und erstellen dann drei neue Ordner unter dem Anmeldeverzeichnis:admin.html admin.js Admin.vueDann schreiben wir den entsprechenden Seitenanzeigecode , wobei der Code in
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>管理员登录页面</title></head><body>
<p id="admin"></p></body></html><template>
<p id="admin">
<p>这里是管理员登录页面</p>
</p></template><script>export default {
name: 'Admin'}</script>import Vue from 'vue'import Admin from './Admin.vue'Vue.config.productionTip = false/* eslint-disable no-new */new Vue({
el: '#admin',
components: { Admin },
template: '<Admin/>'})Öffnen Sie zunächst das
-Verzeichnis und fügen Sie eine neue Eintragsdatei zum <🎜 hinzu > Konfigurationsattribut der build-Datei: webpack.base.conf.jsentryUmleitung im
module.exports = { context: path.resolve(__dirname, '../'), entry: { app: './src/main.js', admin: './src/page/login/admin.js'
},-Datei hinzufügen: webpack.dev.conf.jsdevServerrewritesKonfigurieren Sie auch eine mehr <🎜 im
devServer: { clientLogLevel: 'warning',
historyApiFallback: {
rewrites: [
{ from: /.admin/, to: path.posix.join(config.dev.assetsPublicPath, 'src/indexlogin/admin.html') }, { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
],
}, hinzugefügt wird, um den Alias der Eintragsdatei anzugeben entsprechend dem vorherigen plugins. HtmlWebpackPluginchunksDann suchen wir das Verzeichnis entry, öffnen die Datei
plugins: [ new webpack.DefinePlugin({ 'process.env': require('../config/dev.env')
}), new webpack.HotModuleReplacementPlugin(), new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. new webpack.NoEmitOnErrorsPlugin(), // https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', chunks:['app'], inject: true
}), new HtmlWebpackPlugin({ filename: 'src/page/login/admin.html', template: 'src/page/login/admin.html', chunks:['admin'], inject: true
}),configindex.jsbuild Vollständig Um die Arbeit zu konfigurieren, führen Sie
build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'),
admin: path.resolve(__dirname, '../dist/src/page/login/admin.html'),npm run dev
Vue-cli erstellt eine einzelne Seite in mehrere Seiten Beispielcode für die Methode
So verwandeln Sie Vue-cli in einen Verlaufsmodus, der mehrere Seiten unterstützt
Das obige ist der detaillierte Inhalt vonSo konfigurieren Sie mehrseitige Projekte in Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
