Shulou(Shulou.com)06/01 Report--

Multiple pages of vue

Still use vue-cli to initialize our project

Then modify the main directory structure as follows:

├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js src pages │ ├── boys │ ├── index.html │ ├── index.js │ └── index.vue │ │ ├── goods │ ├── index.html │ ├── index.js │ └── index.vue │ │ index │ │ ├── index.html │ ├── index.js │ └── index.vue │ │ └── │ │ ├── index.html │ │ ├── index.js │ │ └── index.vue write each page

You can see that here we have four separate pages, which are boys,goods,index,sotho

First look at the code in the boys folder:

Index.html

Vue3

This is the page we want to generate separately, and finally the index.html.

Index.vue

.boys {background-color: red;} boys got many things. Export default {name: 'boys'}

This is our vue file, which can be regarded as a component, but in fact, the .vue file you can think of as a syntax sugar, which will eventually be compiled into js by vue-loader to generate the corresponding css,js,dom.

Index.js

Import Vue from 'vue'import Index from'. / index.vue'Vue.config.productionTip = falsenew Vue ({el:'# app', template:', components: {Index}})

This is the main file, where the instantiation of vue is performed, and the usage is the same as introducing the vue.js file directly into the browser page.

The same is true for several other pages, which can be found in: https://git.oschina.net/zqzjszqzjs/vue2-x-multiple

Modify webpack.config.js

Because the configuration in vue uses modular management, we need to modify the following two files:

Webpack.base.conf.js

We need to modify the entry entry of webpack.base.conf.js, which is the focus of configuring multi-entry files!

If you do not understand the meaning of multi-entry, it is recommended to take a look at the webpack documentation.

Webpack.base.conf.js

.. module.exports = {entry: {'pages/boys/index':'. / src/pages/boys/index.js', / / configure the boys page entry 'pages/goods/index':'. / src/pages/goods/index.js', / / configure the goods page entry 'pages/index/index':'. / src/pages/index/index.js' / / configure the index page entry 'pages/sotho/index':'. / src/pages/sotho/index.js', / / configure the sotho page entry},.

Webpack.dev.conf.js

Here we need to modify plugins, which is a powerful plug-and-play extension.

We use html-webpack-plugin to generate our right page.

.. var HtmlWebpackPlugin = require ('html-webpack-plugin'). Module.exports = merge (baseWebpackConfig, {. Plugins: [new webpack.DefinePlugin ({'process.env': config.dev.env}), new HtmlWebpackPlugin ({filename:'./pages/boys/index.html', / / specify the storage path of the generated html template:'./src/pages/boys/index.html', / / specify the path of the html template inject: true, / / whether to inject js into the page And specify the injection location 'head' or' body' chunks: ['pages/boys/index'] / / the chunk (module resources) to be introduced Resources for all pages (js/css) will be introduced if not configured, which is a very important attribute You can not configure the trial effect}), new HtmlWebpackPlugin ({filename:'./pages/goods/index.html', template:'./src/pages/goods/index.html', inject: true, chunks: ['pages/goods/index']}), new HtmlWebpackPlugin ({filename:'./pages/index/index.html', template:'./src/pages/index/index.html', inject: true) Chunks: ['pages/index/index']}), new HtmlWebpackPlugin ({filename:'./pages/sotho/index.html', template:'./src/pages/sotho/index.html', inject: true, chunks: [' pages/sotho/index']}),...]})

These are the main configuration items for our multi-page development.

Development environment visits the page

Run npm run dev and take a look at how to access our multi-page vue application.

Http://localhost:9090/pages/index/index.html visits the index page

Http://localhost:9090/pages/boys/index.html visits the boys page

Http://localhost:9090/pages/goods/index.html visits the goods page

Http://localhost:9090/pages/sotho/index.html visits the sotho page

Let's take a look at what our dom structure looks like:

The js in the page is injected by us through the plug-in, and we do it by specifying the chunks.

Build

Run npm run build

Vue2-x-multiple git: (master) npm run build > vue3@1.0.0 build/ study/vue2-x-multiple > node build/build.js building for production...Starting to optimize CSS...Processing static/css/pages/boys/index.19ebbc80a1c187989dbf02d03192e84e.css...Processing static/css/pages/goods/index.fe8f1bc39f33dce4c4d610c2326482c6.css...Processing static/css/pages/index/index.f6340f14071a89cf2b092da280ffaf8c.css...Processing static/css/pages/sotho/index.7415ffd3ef7b9d1a4398cba49927b12b.css...Processed static/css/pages/boys/index.19ebbc80a1c187989dbf02d03192e84e.css Before: 114, after: 44, ratio: 38.6%Processed static/css/pages/goods/index.fe8f1bc39f33dce4c4d610c2326482c6.css, before: 116, after: 46, ratio: 39.66%Processed static/css/pages/index/index.f6340f14071a89cf2b092da280ffaf8c.css, before: 92, after: 22, ratio: 23.91%Processed static/css/pages/sotho/index.7415ffd3ef7b9d1a4398cba49927b12b.css, before: 92, after: 22 Ratio: 23.91%Hash: 2467c91090ccf4690865Version: webpack 2.5.1Time: 6319ms Asset Size Chunks Chunk Namesstatic/css/pages/sotho/index.7415ffd3ef7b9d1a4398cba49927b12b.css.map 312 bytes 1 [emitted] pages/sotho/index static/js/vendor.d7548891d04d4f883b29.js 83.2 KB 0 [emitted] vendor static/js/pages/index/index.b2ce74f4155fb942a064.js 671 bytes 2 [emitted] pages/index/index static/js/pages/goods/index.7d0dda2791db2d3b1500.js 702 bytes 3 [emitted] pages/goods/index static/js/pages/boys/index.2c268b75ba9424211d79.js 699 bytes 4 [emitted] pages/ Boys/index static/js/manifest.f466ccb58b3271558be5.js 1.57 kB 5 [emitted] manifest static/css/pages/boys/index.19ebbc80a1c187989dbf02d03192e84e.css 44 bytes 4 [emitted] pages/boys/index static/css/pages/goods/index.fe8f1bc39f33dce4c4d610c2326482c6.css 46 bytes 3 [emitted] pages/goods/index static/css/pages/index/index.f6340f14071a89cf2b092da280ffaf8c.css 22 bytes 2 [emitted] pages/index/index static/css/pages/sotho/index.7415ffd3ef7b9d1a4398cba49927b12b.css 22 bytes 1 [emitted] pages/sotho/index static/js/vendor.d7548891d04d4f883b29.js.map 687 kB 0 [emitted] vendor static/js/pages/sotho/index.e706490d7c42ad8e4f73.js.map 5.55 kB 1 [emitted] pages/sotho / indexstatic/ js/pages/sotho/index.e706490d7c42ad8e4f73.js 674 bytes 1 [emitted] pages/sotho/index static/js/pages/index/index.b2ce74f4155fb942a064.js.map 5.55 kB 2 [emitted] pages/index/indexstatic/css/pages/index/index.f6340f14071a89cf2b092da280ffaf8c.css.map 312 bytes 2 [emitted] pages/index/indexstatic/ js/pages / goods/index.7d0dda2791db2d3b1500.js.map 5.64 kB 3 [emitted] pages/goods/indexstatic/css/pages/goods/index.fe8f1bc39f33dce4c4d610c2326482c6.css.map 338 bytes 3 [emitted] pages/goods/indexstatic/ js/pages/boys/index.2c268b75ba9424211d79.js.map 5.62 kB 4 [emitted] pages/boys/index static/css/pages/boys/index.19ebbc80a1c187989dbf02d03192e84e.css.map 333 bytes 4 [emitted] pages/boys/index static/js/manifest.f466ccb58b3271558be5.js.map 14.6 kB 5 [emitted] manifest. / pages/boys/index.html 386 bytes [emitted]. / pages/goods/index .html 389 bytes [emitted]. / pages/index/index.html 389 bytes [emitted]. / pages/sotho/index.html 389 bytes [emitted] Build complete. Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work.

Go to the dist directory and view the generated page

├── pages │ ├── boys │ │ └── index.html │ ├── goods │ │ └── index.html │ ├── index │ │ └── index.html │ └── sotho │ index.html static css pages boys ── index.19ebbc80a1c187989dbf02d03192e84e.css │ │ └── index.19ebbc80a1c187989dbf02d03192e84e.css.map │ ├── goods │ │ ├── index.fe8f1bc39f33dce4c4d610c2326482c6.css │ │ └── index.fe8f1bc39f33dce4c4d610c2326482c6.css.map │ ├── index │ │ ├── index.f6340f14071a89cf2b092da280ffaf8c.css │ │ index. F6340f14071a89cf2b092da280ffaf8c.css.map │ └── sotho │ ├── index.7415ffd3ef7b9d1a4398cba49927b12b.css │ └── index.7415ffd3ef7b9d1a4398cba49927b12b.css.map └── js ├── manifest.f466ccb58b3271558be5.js ├── manifest.f466ccb58b3271558be5.js.map ├── pages │ ├── boys │ │ ├── index.2c268b75ba9424211d79. Js │ │ └── index.2c268b75ba9424211d79.js.map │ ├── goods │ │ ├── index.7d0dda2791db2d3b1500.js │ │ └── index.7d0dda2791db2d3b1500.js.map │ ├── index │ │ ├── index.b2ce74f4155fb942a064.js │ │ └── index.b2ce74f4155fb942a064.js.map │ └── sotho │ ├── index.e706490d7c42ad8e4f73.js │ └── index.e706490d7c42ad8e4f73.js.map ├── vendor.d7548891d04d4f883b29.js └── vendor.d7548891d04d4f883b29.js.map

So far, a simple multi-page application based on vue2.x is complete.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.