Table of Contents
Create project
The simplest example
Entry
Template
Publishing address
Production environment configuration
Preview effect
Summary
Further optimization
File directory
To facilitate reading the page directory , here use
build/webpack.base.conf. js
build/webpack.base.prod.conf.js
Delete the original
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.
After the construction is completed, directly use the browser to open the
Briefly summarize the following, using
Home Web Front-end JS Tutorial A simple example of developing multi-page applications with vue-cli

A simple example of developing multi-page applications with vue-cli

Feb 28, 2018 pm 02:28 PM
vue-cli use Simple

Create project

Use vue-cliCreate a project

$ vue init webpack vue-multiple-demo
Copy after login

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
Copy after login
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'
},
Copy after login

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>
Copy after login

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'),
Copy after login

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']
}),
Copy after login

There are two main changes here

  • filename Directly write to death

  • To prevent unnecessary loading of js, add chunks 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']
}),
Copy after login

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: './',
Copy after login

Build the application

$ npm run build
Copy after login
Copy after login

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

    • ##HelloWorld.vue
    entries
    • index.js
    • list.js
    templates
    • index.html
    • list.html
    According to the agreement

  • entries

    js file used to store the page entry

  • templates

    Templates used to store pageshtml 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

build/utils.js

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const glob = require('glob') // 遍历指定目录下的文件 exports.getEntries = (dirPath) =&gt; {   let filePaths = glob.sync(dirPath);   let entries = {};   filePaths.forEach(filePath =&gt; {     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'),
Copy after login

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: '../',
Copy after login

Build and preview

$ npm run build
Copy after login
Copy after login

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

  • static resources Path
  • 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 sharing

Vue-cli creates a single page to multi-page method example Code

vue cli reconstruction multi-page scaffolding example sharing


The 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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

The easiest way to query the hard drive serial number The easiest way to query the hard drive serial number Feb 26, 2024 pm 02:24 PM

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? How to write a simple student performance report generator using Java? Nov 03, 2023 pm 02:57 PM

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

Which computer should Geographic Information Science majors choose? Which computer should Geographic Information Science majors choose? Jan 13, 2024 am 08:00 AM

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 How to write a simple online reservation system through PHP Sep 26, 2023 pm 09:55 PM

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: Use Go language functions to implement a simple library management system Quick Start: Use Go language functions to implement a simple library management system Jul 30, 2023 am 09:18 AM

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: Create a Simple Employee Attendance Sheet MySQL Table Design Guide: Create a Simple Employee Attendance Sheet Jul 01, 2023 pm 01:54 PM

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++? How to write a simple minesweeper game in C++? Nov 02, 2023 am 11:24 AM

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++? How to write a simple music recommendation system in C++? Nov 03, 2023 pm 06:45 PM

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

See all articles