How to develop multiple pages in vue2.0

This time I will show you how to develop multiple pages in vue2.0. What are the precautions for developing multi-pages in vue2.0. Here are practical cases, let’s take a look.

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 do a larger project, you still can't do it without it. 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 next 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. The first step is to generate a vue project using the command:

vue init webpack test

The file name declared by the blogger himself is test. After downloading, enter all the way, and then a vue project is generated. However, this vue project does not have some related dependencies. At this time, you need to enter the folder 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, and then enter the command:

npm run dev

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

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

After that, we enter the buildwebpack.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 name in the purple part must be chosen carefully, because it will be used later to prevent forgetting.

The next step is to modify the development environment run dev, open the buildwebpack.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.

Then configure the run build, which is the compilation environment. First open the configindex.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 HTMLWebpackPlugin in plugins, and 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 configindex.js. Each page must be configured with one 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: 'one',
 data () {
  return {
   msg: 'I am one'
  }
 }
}
</script>

The writing method of two is similar to it, so I won’t write it down,

Then write this in App.vue:

<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.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

JS prompt text box email address completion

$.ajax() method how to get json from the server data

The above is the detailed content of How to develop multiple pages in vue2.0. For more information, please follow other related articles on the PHP Chinese website!