使用vue構(gòu)建多頁(yè)面應(yīng)用的示例
先了解一些單頁(yè)面和多頁(yè)面的區(qū)別
mm | 多頁(yè)應(yīng)用模式MPA | 單頁(yè)應(yīng)用模式SPA |
---|---|---|
應(yīng)用構(gòu)成 | 由多個(gè)完整頁(yè)面構(gòu)成 | 一個(gè)外殼頁(yè)面和多個(gè)頁(yè)面片段構(gòu)成 |
跳轉(zhuǎn)方式 | 頁(yè)面之間的跳轉(zhuǎn)是從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面 | 頁(yè)面片段之間的跳轉(zhuǎn)是把一個(gè)頁(yè)面片段刪除或隱藏,加載另一個(gè)頁(yè)面片段并顯示出來(lái)。這是片段之間的模擬跳轉(zhuǎn),并沒(méi)有開殼頁(yè)面 |
跳轉(zhuǎn)后公共資源是否重新加載 | 是 | 否 |
URL模式 |
http://xxx/page1.html http://xxx/page1.html |
http://xxx/shell.html#page1 http://xxx/shell.html#page2 |
用戶體驗(yàn) | 頁(yè)面間切換加載慢,不流暢,用戶體驗(yàn)差,特別是在移動(dòng)設(shè)備上 | 頁(yè)面片段間的切換快,用戶體驗(yàn)好,包括在移動(dòng)設(shè)備上 |
能否實(shí)現(xiàn)轉(zhuǎn)場(chǎng)動(dòng)畫 | 無(wú)法實(shí)現(xiàn) | 容易實(shí)現(xiàn)(手機(jī)app動(dòng)效) |
頁(yè)面間傳遞數(shù)據(jù) | 依賴URL、cookie或者localstorage,實(shí)現(xiàn)麻煩 | 因?yàn)樵谝粋€(gè)頁(yè)面內(nèi),頁(yè)面間傳遞數(shù)據(jù)很容易實(shí)現(xiàn) |
搜索引擎優(yōu)化(SEO) | 可以直接做 | 需要單獨(dú)方案做,有點(diǎn)麻煩 |
特別適用的范圍 | 需要對(duì)搜索引擎友好的網(wǎng)站 | 對(duì)體驗(yàn)要求高的應(yīng)用,特別是移動(dòng)應(yīng)用 |
搜索引擎優(yōu)化(SEO) | 可以直接做 | 需要單獨(dú)方案做,有點(diǎn)麻煩 |
開發(fā)難度 | 低一些,框架選擇容易 | 高一些,需要專門的框架來(lái)降低這種模式的開發(fā)難度 |
為什么用Vue寫多頁(yè)面
vue只是一個(gè)工具,把他當(dāng)做一個(gè)操作dom的工具來(lái)用寫多頁(yè)面,有單頁(yè)面的優(yōu)勢(shì)同時(shí)是多頁(yè)面的表現(xiàn)形式(具體要看需求)
構(gòu)建多頁(yè)面應(yīng)用
準(zhǔn)備工作
新建一個(gè)項(xiàng)目,項(xiàng)目需要一個(gè)"glob":"^7.0.3"
的依賴
修改webpack的配置
我們需要更改的文件
- utils.js
- webpack.base.conf.js
- webpack.dev.conf.js
- webpack.prod.conf.js
utils.js在最后添加
// utils.js文件 /* 這里是添加的部分 ---------------------------- 開始 */ // glob是webpack安裝時(shí)依賴的一個(gè)第三方模塊,還模塊允許你使用 *等符號(hào), 例如lib/*.js就是獲取lib文件夾下的所有js后綴名的文件 var glob = require('glob') // 頁(yè)面模板 var HtmlWebpackPlugin = require('html-webpack-plugin') // 取得相應(yīng)的頁(yè)面路徑,因?yàn)橹暗呐渲?,所以是src文件夾下的pages文件夾 var PAGE_PATH = path.resolve(__dirname, '../src/pages') // 用于做相應(yīng)的merge處理 var merge = require('webpack-merge') //多入口配置 // 通過(guò)glob模塊讀取pages文件夾下的所有對(duì)應(yīng)文件夾下的js后綴文件,如果該文件存在 // 那么就作為入口處理 exports.entries = function () { var entryFiles = glob.sync(PAGE_PATH + '/*/*.js') var map = {} entryFiles.forEach((filePath) => { var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.')) map[filename] = filePath }) return map } //多頁(yè)面輸出配置 // 與上面的多頁(yè)面入口配置相同,讀取pages文件夾下的對(duì)應(yīng)的html后綴文件,然后放入數(shù)組中 exports.htmlPlugin = function () { let entryHtml = glob.sync(PAGE_PATH + '/*/*.html') let arr = [] entryHtml.forEach((filePath) => { let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.')) let conf = { // 模板來(lái)源 template: filePath, // 文件名稱 filename: filename + '.html', // 頁(yè)面模板需要加對(duì)應(yīng)的js腳本,如果不加這行則每個(gè)頁(yè)面都會(huì)引入所有的js腳本 chunks: ['manifest', 'vendor', filename], inject: true } if (process.env.NODE_ENV === 'production') { conf = merge(conf, { minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, chunksSortMode: 'dependency' }) } arr.push(new HtmlWebpackPlugin(conf)) }) return arr } /* 這里是添加的部分 ---------------------------- 結(jié)束 */
webpack.base.conf.js 文件
module.exports = { /* 修改部分 ---------------- 開始 */ entry: utils.entries(), /* 修改部分 ---------------- 結(jié)束 */ output: { path: config.build.assetsRoot,
webpack.dev.conf.js 文件
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin(), // https://github.com/ampedandwired/html-webpack-plugin /* 注釋這個(gè)區(qū)域的文件 ------------- 開始 */ // new HtmlWebpackPlugin({ // filename: 'index.html', // template: 'index.html', // inject: true // }), /* 注釋這個(gè)區(qū)域的文件 ------------- 結(jié)束 */ new FriendlyErrorsPlugin() /* 添加 .concat(utils.htmlPlugin()) ------------------ */ ].concat(utils.htmlPlugin()) })
webpack.prod.conf.js 文件
new OptimizeCSSPlugin({ cssProcessorOptions: { safe: true } }), // generate dist index.html with correct asset hash for caching. // you can customize output by editing /index.html // see https://github.com/ampedandwired/html-webpack-plugin /* 注釋這個(gè)區(qū)域的內(nèi)容 ---------------------- 開始 */ // 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' // }), /* 注釋這個(gè)區(qū)域的內(nèi)容 ---------------------- 結(jié)束 */ // split vendor js into its own file new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: function (module, count) { // any required modules inside node_modules are extracted to vendor return ( module.resource && /\.js$/.test(module.resource) && module.resource.indexOf( path.join(__dirname, '../node_modules') ) === 0 ) } }), // extract webpack runtime and module manifest to its own file in order to // prevent vendor hash from being updated whenever app bundle is updated new webpack.optimize.CommonsChunkPlugin({ name: 'manifest', chunks: ['vendor'] }), // copy custom static assets new CopyWebpackPlugin([{ from: path.resolve(__dirname, '../static'), to: config.build.assetsSubDirectory, ignore: ['.*'] }]) /* 該位置添加 .concat(utils.htmlPlugin()) ------------------- */ ].concat(utils.htmlPlugin()) }) if (config.build.productionGzip) { var CompressionWebpackPlugin = require('compression-webpack-plugin') webpackConfig.plugins.push( new CompressionWebpackPlugin({ asset: '[path].gz[query]', algorithm: 'gzip', test: new RegExp( '\\.(' + config.build.productionGzipExtensions.join('|') + ')$' ), threshold: 10240, minRatio: 0.8 }) ) } if (config.build.bundleAnalyzerReport) { var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin webpackConfig.plugins.push(new BundleAnalyzerPlugin()) } module.exports = webpackConfig
src是我使用的工程文件,asset,components,pages分別是靜態(tài)資源文件,組件文件,頁(yè)面文件
pages是按照項(xiàng)目的模塊分的文件夾,每個(gè)模塊都有三個(gè)內(nèi)容:vue文件,js文件,html文件。這三個(gè)文件的作用相當(dāng)于做SPA單頁(yè)面應(yīng)用時(shí),根目錄的index.html頁(yè)面模板,src文件下的main.js和app.vue的功能。
原先,入口文件只有一個(gè)Main.js,但現(xiàn)在由于是多頁(yè)面,因此入口也沒(méi)多了,我目前就是兩個(gè):index和cell,之后如果打包,就會(huì)在dist文件夾下生成兩個(gè)html文件:index.html和cell.html(可以參考一下單頁(yè)面應(yīng)用時(shí),打包只會(huì)生成一個(gè)Index.html)
參考:
http://www.dbjr.com.cn/article/146566.htm
以上就是使用vue構(gòu)建多頁(yè)面應(yīng)用的示例的詳細(xì)內(nèi)容,更多關(guān)于vue構(gòu)建多頁(yè)面應(yīng)用的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
優(yōu)化Vue template中大量條件選擇v-if的方案分享
本文我們將給大家詳細(xì)的講解一下如何優(yōu)化Vue template 中的大量條件選擇v-if,文中通過(guò)代碼示例介紹的非常詳細(xì),有詳細(xì)的優(yōu)化方案,感興趣的朋友可以參考閱讀下2023-07-07vue+element+oss實(shí)現(xiàn)前端分片上傳和斷點(diǎn)續(xù)傳
這篇文章主要介紹了vue+element+oss實(shí)現(xiàn)前端分片上傳和斷點(diǎn)續(xù)傳,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03Vue下拉框值變動(dòng)事件傳多個(gè)參數(shù)方式
這篇文章主要介紹了Vue下拉框值變動(dòng)事件傳多個(gè)參數(shù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04詳解Vue項(xiàng)目在其他電腦npm run dev運(yùn)行報(bào)錯(cuò)的解決方法
這篇文章主要介紹了詳解Vue項(xiàng)目在其他電腦npm run dev運(yùn)行報(bào)錯(cuò)的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-10-10Mixin混入分發(fā)Vue組件可復(fù)用功能基礎(chǔ)示例
這篇文章主要為大家介紹了Mixin混入分發(fā)Vue組件可復(fù)用功能基礎(chǔ)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06Vue實(shí)現(xiàn)簡(jiǎn)單選項(xiàng)卡功能
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單選項(xiàng)卡功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03