Web Front-end
JS Tutorial
Project created by vue-cli, configure multi-page implementation method
Project created by vue-cli, configure multi-page implementation method
Now I will share with you a project created by vue-cli and the implementation method of configuring multiple pages. It has a good reference value and I hope it will be helpful to everyone.
The command line tool vue-cli officially provided by vue can quickly build a single-page application. The default page entry is index.html. So, if we need multiple pages, how to configure it is actually not complicated.
Assume that the page to be created is rule. The following uses rule as an example.
Create a new html page
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <title></title> </head> <body> <span style="color:#000000;"><p id="rule"></p></span> <!-- built files will be auto injected --> </body> </html>
Create entry files Rule.vue and rule.js, modeled on App.vue and main. js
<template>
<p id="rule">
<router-view></router-view>
</p>
</template>
<script>
export default {
name: 'lottery',
data() {
return {
}
},
mounted: function() {
this.$router.replace({
path:'/rule'
});
},
}
</script>
<style lang="less">
body{
margin:0;
padding:0;
}
</style>rule.js
import Vue from 'vue'
import Rule from './Rule.vue'
import router from './router'
import $ from 'jquery'
//import vConsole from 'vconsole'
import fastclick from 'fastclick'
Vue.config.productionTip = false
fastclick.attach(document.body)
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: '#rule',
router,
template: '<Rule/>',
components: { Rule },
})Modify config/index.js
build adds the rule address, which is the address and name of rule.html generated after compilation
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.php'),
rule: path.resolve(__dirname, '../dist/rule.php'),
……
}rule: path.resolve(__dirname, '../dist/rule.php') means that after compilation, it is placed in the dist file. The compiled file name of rule.html is rule.php
Modify build/webpack.base.conf.js
Configure entry
entry: {
app: './src/main.js',
rule: './src/rule.js'
},Modify build/webpack.dev.conf .js
In plugins add
new HtmlWebpackPlugin({
filename: 'rule.html',
template: 'rule.html',
inject: true,
chunks:['rule']
}),Modify build/webpack.prod.conf.js
Add in plugins
new HtmlWebpackPlugin({
filename: config.build.rule,
template: 'rule.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','rule']
}),All of the above
When the background address jumps to After you create a new page, since the default route configured now is public, you can configure multiple routing files yourself and reference them separately.
You can route in Rule.vue to jump to the specified route to achieve page control
mounted: function() {
this.$router.replace({
path:'/rule'
});
},The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
Methods to obtain DOM elements based on vue1 and vue2
nodejs mongodb aggregate cascade query operation example
JS implements the method of generating a QR code from a link and converting it into an image
The above is the detailed content of Project created by vue-cli, configure multi-page implementation method. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to set up Git configuration in PyCharm
Feb 20, 2024 am 09:47 AM
Title: How to correctly configure Git in PyCharm In modern software development, the version control system is a very important tool, and Git, as one of the popular version control systems, provides developers with powerful functions and flexible operations. As a powerful Python integrated development environment, PyCharm comes with support for Git, allowing developers to manage code versions more conveniently. This article will introduce how to correctly configure Git in PyCharm to facilitate better development during the development process.
The working principle and configuration method of GDM in Linux system
Mar 01, 2024 pm 06:36 PM
Title: The working principle and configuration method of GDM in Linux systems In Linux operating systems, GDM (GNOMEDisplayManager) is a common display manager used to control graphical user interface (GUI) login and user session management. This article will introduce the working principle and configuration method of GDM, as well as provide specific code examples. 1. Working principle of GDM GDM is the display manager in the GNOME desktop environment. It is responsible for starting the X server and providing the login interface. The user enters
The perfect combination of PyCharm and PyTorch: detailed installation and configuration steps
Feb 21, 2024 pm 12:00 PM
PyCharm is a powerful integrated development environment (IDE), and PyTorch is a popular open source framework in the field of deep learning. In the field of machine learning and deep learning, using PyCharm and PyTorch for development can greatly improve development efficiency and code quality. This article will introduce in detail how to install and configure PyTorch in PyCharm, and attach specific code examples to help readers better utilize the powerful functions of these two. Step 1: Install PyCharm and Python
Understand Linux Bashrc: functions, configuration and usage
Mar 20, 2024 pm 03:30 PM
Understanding Linux Bashrc: Function, Configuration and Usage In Linux systems, Bashrc (BourneAgainShellruncommands) is a very important configuration file, which contains various commands and settings that are automatically run when the system starts. The Bashrc file is usually located in the user's home directory and is a hidden file. Its function is to customize the Bashshell environment for the user. 1. Bashrc function setting environment
How to configure workgroup in win11 system
Feb 22, 2024 pm 09:50 PM
How to configure a workgroup in Win11 A workgroup is a way to connect multiple computers in a local area network, which allows files, printers, and other resources to be shared between computers. In Win11 system, configuring a workgroup is very simple, just follow the steps below. Step 1: Open the "Settings" application. First, click the "Start" button of the Win11 system, and then select the "Settings" application in the pop-up menu. You can also use the shortcut "Win+I" to open "Settings". Step 2: Select "System" In the Settings app, you will see multiple options. Please click the "System" option to enter the system settings page. Step 3: Select "About" In the "System" settings page, you will see multiple sub-options. Please click
Simple and easy-to-understand PyCharm configuration Git tutorial
Feb 20, 2024 am 08:28 AM
PyCharm is a commonly used integrated development environment (IDE). In daily development, using Git to manage code is essential. This article will introduce how to configure Git in PyCharm and use Git for code management, with specific code examples. Step 1: Install Git First, make sure Git is installed on your computer. If it is not installed, you can go to [Git official website](https://git-scm.com/) to download and install the latest version of Git
Avoid common mistakes in Maven environment configuration: Solve configuration problems
Feb 19, 2024 pm 04:56 PM
Maven is a Java project management and build tool that is widely used in the development of Java projects. In the process of using Maven to build projects, you often encounter some common environment configuration problems. This article will answer these common questions and provide specific code examples to help readers avoid common configuration errors. 1. Maven environment variables are incorrectly configured. Problem description: When using Maven, if the environment variables are incorrectly configured, Maven may not work properly. Solution: Make sure
How to configure and install FTPS in Linux system
Mar 20, 2024 pm 02:03 PM
Title: How to configure and install FTPS in Linux system, specific code examples are required. In Linux system, FTPS is a secure file transfer protocol. Compared with FTP, FTPS encrypts the transmitted data through TLS/SSL protocol, which improves Security of data transmission. In this article, we will introduce how to configure and install FTPS in a Linux system and provide specific code examples. Step 1: Install vsftpd Open the terminal and enter the following command to install vsftpd: sudo
