A simple example of developing multi-page applications with vue-cli
Create project
Use vue-cli
Create a project
$ vue init webpack vue-multiple-demo
Follow the console prompts and fill in the relevant information. After creation, go to the root directory of the project and install the dependencies.
$ cd vue-multiple-demo $ npm install
Since it is developing a multi-page application, the project is not configured vue-router
.
The simplest example
The project created through vue-cli
defaults to developing a single-page application. If you want to develop multiple pages, you need to adjust the configuration of some scripts.
Entry
Create a new demo.js
in the src
directory. For convenience, directly add main.js
Copy the content in . Then, modify the entry
of build/webpack.base.conf.js
to multiple.
entry: { app: './src/main.js', demo: './src/demo.js' },
Template
Create a new demo.html
file in the project root directory, and also copy the contents of index.html
. In order to distinguish them, only edit the content of <title>
.
<title>demo</title>
Publishing address
Add a new record under the build
configuration of config/index.js
.
index: path.resolve(__dirname, '../dist/index.html'), demo: path.resolve(__dirname, '../dist/demo.html'),
Production environment configuration
Adjust build/webpack.prod.conf.js
in plugins
, about html
Configuration.
Modification
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'] }),
There are two main changes here
filename
Directly write to deathTo prevent unnecessary loading of
js
, addchunks
configuration.
Newly added
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'] }),
Preview effect
The local service is not started here, so you need to modify the loading path of the static resources , that is, change build->assetsPublicPath
in config/index.js
to ./
.
assetsPublicPath: './',
Build the application
$ npm run build
Directly open the html
file in the dist
directory to preview the effect.
Summary
At this point, the simplest example of developing multiple pages is completed.
Further optimization
In actual development, the number of pages is large, so the following configurations need to be processed in batches.
File directory
The directory structure of the source code partsrc
is as follows
assets
logo.png
- ##components
- list.js
- list.html
- ##HelloWorld.vue
- index.js
- index.html
- entries
js
file used to store the page entry - templates
Templates used to store pages
html
Files Reading directory
To facilitate reading the page directory , here use
glob to extend a method. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">$ npm install glob --save-dev</pre><div class="contentsignin">Copy after login</div></div>
After installing the dependencies, add methods in
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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;
}</pre><div class="contentsignin">Copy after login</div></div>
Modify the configuration
build/webpack.base.conf. js
entry: utils.getEntries('./src/entries/*.js'),
build/webpack.base.prod.conf.js
Delete the original
HtmlWebpackPlugin related configuration, and just traverse and add related configuration before the end of the file. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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));
}</pre><div class="contentsignin">Copy after login</div></div>
config/index.js
Since the output address is not configured here, the previous deletion will not affect it. However, after adjusting the directory structure, the path for loading static resources in the page must also be adjusted.
assetsPublicPath: '../',
Build and preview
$ npm run build
After the construction is completed, directly use the browser to open the
html file in the dist
directory to preview the effect. Summary
Briefly summarize the following, using
vue-cli to develop several key points of multi-page applications.
- Multiple entries
- Multiple
- HtmlWebpackPlugin
- The configuration introduced in this article may not be applicable to all development scenarios. Optimizing more and further details still requires continuous practice in actual development.
Related recommendations:
vue builds multi-page application example code sharingVue-cli creates a single page to multi-page method example Codevue cli reconstruction multi-page scaffolding example sharingThe above is the detailed content of A simple example of developing multi-page applications with vue-cli. 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

The hard disk serial number is an important identifier of the hard disk and is usually used to uniquely identify the hard disk and identify the hardware. In some cases, we may need to query the hard drive serial number, such as when installing an operating system, finding the correct device driver, or performing hard drive repairs. This article will introduce some simple methods to help you check the hard drive serial number. Method 1: Use Windows Command Prompt to open the command prompt. In Windows system, press Win+R keys, enter "cmd" and press Enter key to open the command

How to write a simple student performance report generator using Java? Student Performance Report Generator is a tool that helps teachers or educators quickly generate student performance reports. This article will introduce how to use Java to write a simple student performance report generator. First, we need to define the student object and student grade object. The student object contains basic information such as the student's name and student number, while the student score object contains information such as the student's subject scores and average grade. The following is the definition of a simple student object: public

Recommended computers suitable for students majoring in geographic information science 1. Recommendation 2. Students majoring in geographic information science need to process large amounts of geographic data and conduct complex geographic information analysis, so they need a computer with strong performance. A computer with high configuration can provide faster processing speed and larger storage space, and can better meet professional needs. 3. It is recommended to choose a computer equipped with a high-performance processor and large-capacity memory, which can improve the efficiency of data processing and analysis. In addition, choosing a computer with larger storage space and a high-resolution display can better display geographic data and results. In addition, considering that students majoring in geographic information science may need to develop and program geographic information system (GIS) software, choose a computer with better graphics processing support.

How to write a simple online reservation system through PHP. With the popularity of the Internet and users' pursuit of convenience, online reservation systems are becoming more and more popular. Whether it is a restaurant, hospital, beauty salon or other service industry, a simple online reservation system can improve efficiency and provide users with a better service experience. This article will introduce how to use PHP to write a simple online reservation system and provide specific code examples. Create database and tables First, we need to create a database to store reservation information. In MyS

Quick Start: Implementing a Simple Library Management System Using Go Language Functions Introduction: With the continuous development of the field of computer science, the needs of software applications are becoming more and more diverse. As a common management tool, the library management system has also become one of the necessary systems for many libraries, schools and enterprises. In this article, we will use Go language functions to implement a simple library management system. Through this example, readers can learn the basic usage of functions in Go language and how to build a practical program. 1. Design ideas: Let’s first

MySQL Table Design Guide: Creating a Simple Employee Attendance Table In enterprise management, employee attendance management is a crucial task. In order to accurately record and count employee attendance, we can use the MySQL database to create a simple employee attendance sheet. This article will guide you how to design and create this table, and provide corresponding code examples. First, we need to identify the required fields for the employee attendance sheet. Generally speaking, employee attendance sheets need to contain at least the following fields: employee ID, date, working time, off-duty time

How to write a simple minesweeper game in C++? Minesweeper is a classic puzzle game that requires players to reveal all the blocks according to the known layout of the minefield without stepping on the mines. In this article, we will introduce how to write a simple minesweeper game using C++. First, we need to define a two-dimensional array to represent the map of the Minesweeper game. Each element in the array can be a structure used to store the status of the block, such as whether it is revealed, whether there are mines, etc. In addition, we also need to define

How to write a simple music recommendation system in C++? Introduction: Music recommendation system is a research hotspot in modern information technology. It can recommend songs to users based on their music preferences and behavioral habits. This article will introduce how to use C++ to write a simple music recommendation system. 1. Collect user data First, we need to collect user music preference data. Users' preferences for different types of music can be obtained through online surveys, questionnaires, etc. Save data in a text file or database
