使用vue構(gòu)建多頁面應(yīng)用的示例
先了解一些單頁面和多頁面的區(qū)別
| mm | 多頁應(yīng)用模式MPA | 單頁應(yīng)用模式SPA |
|---|---|---|
| 應(yīng)用構(gòu)成 | 由多個完整頁面構(gòu)成 | 一個外殼頁面和多個頁面片段構(gòu)成 |
| 跳轉(zhuǎn)方式 | 頁面之間的跳轉(zhuǎn)是從一個頁面跳轉(zhuǎn)到另一個頁面 | 頁面片段之間的跳轉(zhuǎn)是把一個頁面片段刪除或隱藏,加載另一個頁面片段并顯示出來。這是片段之間的模擬跳轉(zhuǎn),并沒有開殼頁面 |
| 跳轉(zhuǎn)后公共資源是否重新加載 | 是 | 否 |
| URL模式 |
http://xxx/page1.html http://xxx/page1.html |
http://xxx/shell.html#page1 http://xxx/shell.html#page2 |
| 用戶體驗 | 頁面間切換加載慢,不流暢,用戶體驗差,特別是在移動設(shè)備上 | 頁面片段間的切換快,用戶體驗好,包括在移動設(shè)備上 |
| 能否實現(xiàn)轉(zhuǎn)場動畫 | 無法實現(xiàn) | 容易實現(xiàn)(手機app動效) |
| 頁面間傳遞數(shù)據(jù) | 依賴URL、cookie或者localstorage,實現(xiàn)麻煩 | 因為在一個頁面內(nèi),頁面間傳遞數(shù)據(jù)很容易實現(xiàn) |
| 搜索引擎優(yōu)化(SEO) | 可以直接做 | 需要單獨方案做,有點麻煩 |
| 特別適用的范圍 | 需要對搜索引擎友好的網(wǎng)站 | 對體驗要求高的應(yīng)用,特別是移動應(yīng)用 |
| 搜索引擎優(yōu)化(SEO) | 可以直接做 | 需要單獨方案做,有點麻煩 |
| 開發(fā)難度 | 低一些,框架選擇容易 | 高一些,需要專門的框架來降低這種模式的開發(fā)難度 |
為什么用Vue寫多頁面
vue只是一個工具,把他當(dāng)做一個操作dom的工具來用寫多頁面,有單頁面的優(yōu)勢同時是多頁面的表現(xiàn)形式(具體要看需求)
構(gòu)建多頁面應(yīng)用
準(zhǔn)備工作
新建一個項目,項目需要一個"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安裝時依賴的一個第三方模塊,還模塊允許你使用 *等符號, 例如lib/*.js就是獲取lib文件夾下的所有js后綴名的文件
var glob = require('glob')
// 頁面模板
var HtmlWebpackPlugin = require('html-webpack-plugin')
// 取得相應(yīng)的頁面路徑,因為之前的配置,所以是src文件夾下的pages文件夾
var PAGE_PATH = path.resolve(__dirname, '../src/pages')
// 用于做相應(yīng)的merge處理
var merge = require('webpack-merge')
//多入口配置
// 通過glob模塊讀取pages文件夾下的所有對應(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
}
//多頁面輸出配置
// 與上面的多頁面入口配置相同,讀取pages文件夾下的對應(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 = {
// 模板來源
template: filePath,
// 文件名稱
filename: filename + '.html',
// 頁面模板需要加對應(yīng)的js腳本,如果不加這行則每個頁面都會引入所有的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
/* 注釋這個區(qū)域的文件 ------------- 開始 */
// new HtmlWebpackPlugin({
// filename: 'index.html',
// template: 'index.html',
// inject: true
// }),
/* 注釋這個區(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
/* 注釋這個區(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'
// }),
/* 注釋這個區(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)資源文件,組件文件,頁面文件

pages是按照項目的模塊分的文件夾,每個模塊都有三個內(nèi)容:vue文件,js文件,html文件。這三個文件的作用相當(dāng)于做SPA單頁面應(yīng)用時,根目錄的index.html頁面模板,src文件下的main.js和app.vue的功能。
原先,入口文件只有一個Main.js,但現(xiàn)在由于是多頁面,因此入口也沒多了,我目前就是兩個:index和cell,之后如果打包,就會在dist文件夾下生成兩個html文件:index.html和cell.html(可以參考一下單頁面應(yīng)用時,打包只會生成一個Index.html)
參考:
http://www.dhdzp.com/article/146566.htm
以上就是使用vue構(gòu)建多頁面應(yīng)用的示例的詳細(xì)內(nèi)容,更多關(guān)于vue構(gòu)建多頁面應(yīng)用的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Vue Getters和mapGetters的原理及使用示例詳解
Vuex的核心概念包括state、mutations、actions、getters和modules,今天,我們要深入探討其中一個關(guān)鍵部分:getters,以及它的相關(guān)輔助函數(shù)mapGetters,感興趣的朋友跟隨小編一起看看吧2024-08-08
vue項目多環(huán)境配置(.env)的實現(xiàn)
最常見的多環(huán)境配置,就是開發(fā)環(huán)境配置,和生產(chǎn)環(huán)境配置,本文主要介紹了vue項目多環(huán)境配置的實現(xiàn),感興趣的可以了解一下2021-07-07
Vue中this.$nextTick()方法的使用及代碼示例
$nextTick()是Vue.js框架中的一個方法,它主要用于DOM操作,當(dāng)我們修改Vue組件中的數(shù)據(jù)時,Vue.js會在下次事件循環(huán)前自動更新視圖,并異步執(zhí)行$nextTick()中的回調(diào)函數(shù),本文主要介紹了Vue中this.$nextTick()方法的使用及代碼示例,需要的朋友可以參考下2023-05-05
Vue如何動態(tài)修改el-table的某列數(shù)據(jù)
這篇文章主要介紹了Vue如何動態(tài)修改el-table的某列數(shù)據(jù),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04
vue如何使用 Slot 分發(fā)內(nèi)容實例詳解
本篇文章主要介紹了vue如何使用 Slot 分發(fā)內(nèi)容實例詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
vue-router實現(xiàn)組件間的跳轉(zhuǎn)(參數(shù)傳遞)
這篇文章主要為大家詳細(xì)介紹了vue-router實現(xiàn)組件間的跳轉(zhuǎn),參數(shù)傳遞方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-11-11

