How to implement multi-page development in vue2.0

This article mainly introduces examples of the development of multiple pages in vue2.0. Now I share it with you and give you a reference.

When we usually use vue to develop, we always feel that vue seems to be born specifically for single-page applications, but it is not. Because Vue relies heavily on webpack during engineering development, and webpack integrates all resources into a single page. But vue can not only make a single page, it can also make multiple pages. If you want to make multiple pages, you need to rely on it, that is, webpack needs to be reconfigured. This article will talk about the configuration of webpack in detail.

There are two ways to develop vue. One is to directly introduce the vue.js file in the script tag. If you introduce it this way, I personally feel that it will be more comfortable to make small multi-pages. Once you make a larger one The project is still inseparable from webpack. So another method is engineering development based on webpack and vue-cli. The steps are detailed below.
Let me first state that if you use vue for engineering development, you must first have node.js, and then download npm. However, generally new versions of node will have npm, so you don’t need to do it. Instructions are entered on the command line. First of all, the first step is to generate a vue project. Use the command:

vue init webpack test

The file name declared by the blogger himself is test. After downloading, enter all the way. After that, a vue project is generated, but this vue project is not yet available. For some related dependencies, you need to enter the folder at this time and enter the command:

npm install

If the network speed is not good, use cnpm install, the effect will be the same. After a few minutes, the entire dependency has been downloaded. Then enter the command:

npm run dev

and an interface will automatically open. If an error is reported and the web page cannot be opened, there is only one reason, that is, the port is occupied. At this time, you need to Just change the port in the /config/index.js directory.

After a vue project has completed all configurations, the next step is our focus. First, we create several new html files. As a blogger, I created a new one.html and two.html, and The corresponding vue files and js files, the file directory is as follows:

After finishing, we enter the \build\webpack.base.conf.js directory, find the entry in the module.exports domain, and Configure and add multiple entries there:

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

Note that the variable names in the purple part must be well named, because they will be used later to prevent forgetting.

The next step is to modify the development environment run dev, open the \build\webpack.dev.conf.js file, and find the plugins in module.exports. The following is written as follows:

plugins: [
 new webpack.DefinePlugin({
  'process.env': config.dev.env
 }),
 // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
 new webpack.HotModuleReplacementPlugin(),
 new webpack.NoEmitOnErrorsPlugin(),
 // https://github.com/ampedandwired/html-webpack-plugin
 new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'index.html',
  inject: true,
  chunks: ['app']
 }),
 new HtmlWebpackPlugin({
  filename: 'one.html',
  template: 'one.html',
  inject: true,
  chunks: ['one']
 }),
 new HtmlWebpackPlugin({
  filename: 'two.html',
  template: 'two.html',
  inject: true,
  chunks: ['two']
 }),
 new FriendlyErrorsPlugin()
]

The app in chunks refers to the corresponding variable name in the entry of webpack.base.conf.js. The function of chunks is that each entry will correspond to an entry every time it is compiled and run. If not written, the resources of all pages will be introduced.

After that, configure the run build, which is the compilation environment. First open the \config\index.js file and add this to the build:

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

Then open the /build/webpack.prod/conf.js file, find the HTMLWebpackPlugin in the plugins, and then add the following code:

new HtmlWebpackPlugin({
 filename: process.env.NODE_ENV === 'testing'
  ? 'index.html'
  : 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']
}),
new HtmlWebpackPlugin({
 filename: config.build.one,
 template: 'one.html',
 inject: true,
 minify: {
  removeComments: true,
  collapseWhitespace: true,
  removeAttributeQuotes: true
 },
 chunksSortMode: 'dependency',
 chunks: ['manifest', 'vendor', 'one']
}),
 new HtmlWebpackPlugin({
   filename: config.build.two,
   template: 'two.html',
   inject: true,
   minify: {
     removeComments: true,
     collapseWhitespace: true,
     removeAttributeQuotes: true
   },
   chunksSortMode: 'dependency',
   chunks: ['manifest', 'vendor', 'two']
 }),

The filename refers to the build in \config\index.js. Each page must be configured with a chunks, otherwise the resources of all pages will be loaded.

Then the one.js file can be written like this:

import Vue from 'vue'
import one from './one.vue'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
 el: '#one',
 render: h => h(one)
})
one.vue写法如下：
<template>
 <p id="one">
  {{msg}}
 </p>
</template>

<script>
export default {
 name: &#39;one&#39;,
 data () {
  return {
   msg: &#39;I am one&#39;
  }
 }
}
</script>

two is written in a similar way, so I won’t write it down.

Then in App.vue it is written like this:

<template>
 <p id="app">
  <a href="one.html" rel="external nofollow" >one</a><br>
  <a href="two.html" rel="external nofollow" >two</a><br>
  {{msg}}
 </p>
</template>

In this way, when you open the page, clicking the one link above will jump to one.html, and clicking two will jump to two.html. This way you're done.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to compile, package and view the index file in vue

How to use Jade template in vue

Passing templates to components in Angular

The above is the detailed content of How to implement multi-page development in vue2.0. For more information, please follow other related articles on the PHP Chinese website!