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, webpack integrates all resources into one piece and makes it a single page. But vue can not only make single pages, it can also make long pages. If you want to make long pages, you need to rely on them, that is, webpack can be reconfigured. This article will talk about the configuration of webpack in detail.
There are two types of development of vue. One is to directly introduce files into the script tag. If you introduce this, you will feel more comfortable to make small and multi-pages. Once you do a larger project, you still need webpack. So another method is engineering development based on webpack and vue-cli. The steps are explained in detail below.
First declare that if you use vue for engineering development, you must first have it, and then the next npm. However, generally the new version of node will have npm, so you don’t need to do it. The command is entered on the command line. The first step is to generate a vue project, using instructions:
vue init webpack test
The file name declared by the blogger himself is test. After downloading it, 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 internet speed is not good, use cnpm install, and the effect is the same. After waiting for a few minutes, the entire dependency has been released. Then enter the command:
npm run dev
An interface will be automatically opened. If the error is reported, there is only one reason why the web page cannot be opened, and then the port is occupied. At this time, you need to go to the /config/ directory to change the port.
When a vue project completes all configurations, the next step is our focus. First, we create a few new html files. I created a new sum, and its corresponding vue and js files. The file directory is as follows:
After we finish it, we enter the \build\ directory, find entry in the domain, and configure it to add multiple entrances:
entry: {
app: './src/',
one: './src/js/',
two: './src/js/'
},
Note that the variable names in the purple part should be better, because they should be used later to prevent forgetting.
Next is to modify the development environment run dev, open the \build\ file, and find plugins there. The following is written as follows:
plugins: [
new ({
'':
}),
// /glenjamin/webpack-hot-middleware#installation--usage
new (),
new (),
// /ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: '',
template: '',
inject: true,
chunks: ['app']
}),
new HtmlWebpackPlugin({
filename: '',
template: '',
inject: true,
chunks: ['one']
}),
new HtmlWebpackPlugin({
filename: '',
template: '',
inject: true,
chunks: ['two']
}),
new FriendlyErrorsPlugin()
]
The app in chunks refers to the variable name corresponding to the entry. The function of chunks is that every time you compile and run, each entry will correspond to an entry. If it is not written, all page resources will be introduced.
Then, the run build, that is, the compilation environment is configured. First open the \config\ file and add this in the build:
index: (__dirname, '../dist/'), one: (__dirname, '../dist/'), two: (__dirname, '../dist/'),
Then open the /build// file, find the HTMLWebpackPlugin in plugins, and then add the following code:
new HtmlWebpackPlugin({
filename: .NODE_ENV === 'testing'
? ''
: ,
template: '',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// /kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency',
chunks: ['manifest', 'vendor', 'app']
}),
new HtmlWebpackPlugin({
filename: ,
template: '',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency',
chunks: ['manifest', 'vendor', 'one']
}),
new HtmlWebpackPlugin({
filename: ,
template: '',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency',
chunks: ['manifest', 'vendor', 'two']
}),
The filename refers to the build in \config\. Each page must be configured with a chunks, otherwise all page resources will be loaded.
Then the file can be written like this:
import Vue from 'vue'
import one from './'
= false
/* eslint-disable no-new */
new Vue({
el: '#one',
render: h => h(one)
})
The writing method is as follows：
<template>
<div >
{{msg}}
</div>
</template>
<script>
export default {
name: 'one',
data () {
return {
msg: 'I am one'
}
}
}
</script>
The two is written in a similar way, so I won't write it down.
Then write it like this:
<template>
<div >
<a href="" rel="external nofollow" >one</a><br>
<a href="" rel="external nofollow" >two</a><br>
{{msg}}
</div>
</template>
In this way, when you open the page, click on the link above and click on two to jump to. This is done.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.