vue 를 사용 하여 다 중 페이지 응용 을 구축 하 는 예제
mm
다 중 응용 프로그램 MPA
단일 페이지 응용 모드 SPA
응용 구성
여러 개의 전체 페이지 로 구성 되 어 있다.
하나의 케이스 페이지 와 여러 페이지 세 션 으로 구성 되 어 있 습 니 다.
점프 모드
페이지 간 의 이동 은 한 페이지 에서 다른 페이지 로 이동 하 는 것 이다.
페이지 세 션 사이 의 점프 는 한 페이지 세 션 을 삭제 하거나 숨 기 고 다른 페이지 세 션 을 불 러 와 표시 하 는 것 입 니 다.이것 은 세 션 간 의 아 날로 그 점프 입 니 다.케이스 페이지 를 열지 않 았 습 니 다.
이동 후 공공 자원 을 다시 불 러 올 지 여부
예.
아니.
URL 모드
http://xxx/page1.html
http://xxx/page1.html
http://xxx/shell.html#page1
http://xxx/shell.html#page2
사용자 체험
페이지 간 전환 로드 가 느 리 고 원활 하지 않 으 며 사용자 체험 이 좋 지 않 습 니 다.특히 모 바 일 장치 에서.
페이지 세 션 간 의 전환 이 빠 르 고 사용자 체험 이 좋 으 며 모 바 일 장치 에 포함 되 어 있 습 니 다.
필드 전환 애니메이션 을 실현 할 수 있 습 니까?
실현 불가능
실현 하기 쉽다.
페이지 간 전달 데이터
URL,쿠키 또는 localstorage 에 의존 하여 번 거 로 움 을 실현 합 니 다.
한 페이지 내 에서 페이지 간 에 데 이 터 를 전달 하 는 것 이 쉽게 이 루어 지기 때문이다.
검색엔진 최적화(SEO)
그냥 해도 돼 요.
단독 방안 이 필요 해서 좀 번거롭다
특별 적용 범위
검색엔진 에 우호 적 인 사이트 가 필요 합 니 다.
체험 에 대한 요구 가 높 은 응용,특히 모 바 일 응용
검색엔진 최적화(SEO)
그냥 해도 돼 요.
단독 방안 이 필요 해서 좀 번거롭다
개발 난이도
낮 게,프레임 선택 이 쉽다.
좀 높 으 면 이런 모델 의 개발 난이 도 를 낮 추 는 전문 적 인 틀 이 필요 하 다.
왜 Vue 로 여러 페이지 를 써 요?
vue 는 하나의 도구 일 뿐 이 고 그 를 dom 을 조작 하 는 도구 로 삼 아 여러 페이지 를 쓴다.한 페이지 의 장점 이 있 는 동시에 여러 페이지 의 표현 형식(구체 적 으로 수 요 를 봐 야 한다)
다 중 페이지 응용 프로그램 구축
준비 작업
새 항목 을 만 들 려 면 항목
"glob":"^7.0.3"의 의존 이 필요 합 니 다.웹 팩 설정 수정
변경 할 파일 이 필요 합 니 다.
// utils.js
/* ---------------------------- */
// glob webpack ， * , lib/*.js lib js
var glob = require('glob')
//
var HtmlWebpackPlugin = require('html-webpack-plugin')
// ， ， src pages
var PAGE_PATH = path.resolve(__dirname, '../src/pages')
// merge
var merge = require('webpack-merge')
//
// glob pages 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 html ，
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',
// 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
}
/* ---------------------------- */
module.exports = {
/* ---------------- */
entry: utils.entries(),
/* ---------------- */
output: {
path: config.build.assetsRoot,
// 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
// }),
/* ------------- */
new FriendlyErrorsPlugin()
/* .concat(utils.htmlPlugin()) ------------------ */
].concat(utils.htmlPlugin())
})
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
/* ---------------------- */
// 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'
// }),
/* ---------------------- */
// 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
pages 는 프로젝트 의 모듈 에 따라 분 리 된 폴 더 로 각 모듈 마다 세 가지 내용 이 있 습 니 다.vue 파일,js 파일,html 파일 입 니 다.이 세 파일 의 역할 은 SPA 단일 페이지 를 응용 할 때 루트 디 렉 터 리 의 index.html 페이지 템 플 릿,src 파일 의 main.js 와 app.vue 기능 에 해당 합 니 다.
원래 입구 파일 은 Main.js 가 하나 밖 에 없 었 는데 지금 은 여러 페이지 이기 때문에 입구 도 많 지 않 습 니 다.저 는 현재 두 개 입 니 다.index 와 cell.그 다음 에 포장 하면 dist 폴 더 에서 html 파일 두 개 를 생 성 합 니 다.index.html 과 cell.html(단일 페이지 응용 을 참고 할 때 포장 은 하나의 Index.html 만 생 성 합 니 다)
참고:
https://www.jb51.net/article/146566.htm
이상 은 vue 를 사용 하여 다 중 페이지 응용 을 구축 하 는 예제 의 상세 한 내용 입 니 다.vue 구축 다 중 페이지 응용 에 관 한 자 료 는 다른 관련 글 을 주목 하 십시오!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
