vue는 다중 페이지 애플리케이션에 적합합니까?

vue는 다중 페이지 애플리케이션에 적합합니다. Vue는 엔지니어링 개발 중에 webpack에 의존하며 webpack은 모든 리소스를 통합하여 html 파일과 여러 js 파일을 형성합니다. vue를 사용하여 다중 페이지 애플리케이션을 구현하려면 종속성을 재구성해야 합니다. 웹팩 구성을 수정하면 스캐폴딩에 다중 페이지 애플리케이션을 구축할 수 있는 기능이 있습니다.

이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.

우리는 vue가 웹 단일 페이지 애플리케이션을 빠르게 개발할 수 있다는 것을 알고 있으며 공식에서는 자체 애플리케이션 스캐폴딩 vue-cli를 제공합니다. vue 애플리케이션의 프로토타입을 시작하려면 스캐폴딩을 다운로드하고 종속성을 설치하기만 하면 됩니다.

이는 webpack의 종속성 추적, 다양한 리소스 접미사 로더 및 관련 webpack 플러그인의 강력한 기능의 이점을 제공합니다.

그러나 때로는 여러 페이지에 대한 개발 요구가 있을 수 있습니다. 이 경우 vue-cli를 통해 여러 애플리케이션 디렉토리를 생성하는 등 여러 페이지에 대한 여러 애플리케이션을 구축할 수 있지만 이로 인해 더 많은 반복적인 빌드 코드가 발생하고 상용구 코드는 또한 애플리케이션의 통일성을 파괴하고 유지 관리를 어렵게 만듭니다. vue-cli를 기반으로 웹팩 구성을 수정하여 스캐폴딩이 다중 페이지 애플리케이션을 구축할 수 있도록 할 수 있습니다.

vue는 엔지니어링 개발 중에 webpack에 의존하며 webpack은 모든 리소스를 통합하여 html 파일과 여러 js 파일을 구성합니다. vue가 다중 페이지 애플리케이션으로 구현되면 해당 종속성을 재구성해야 합니다.

다음은 주로 Vue

구체적인 구현 단계

1.1.1.1의 다중 페이지 애플리케이션 개발에 대해 자세히 설명합니다. 1. buildwebpack.base.conf.js 디렉토리에 들어가서 module.exports 도메인에서 항목을 찾은 다음 거기에 여러 항목을 구성하고 추가합니다.

녹색 상자의 수정 및 대응에 주의하세요.

  entry: {
    app: './src/main.js',
    one: './src/pages/one.js',
    two: './src/pages/two.js'
  }

2 개발 환경을 수정하고 dev를 실행하고 buildwebpack.dev.conf.js 파일을 열고 module.exports에서 플러그인을 찾습니다.

    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      chunks: ['app']
    }),
    new HtmlWebpackPlugin({
      filename: 'one.html',
      template: 'one.html',
      inject: true,
      chunks: ['one']
    }),
    new HtmlWebpackPlugin({
      filename: 'two.html',
      template: 'two.html',
      inject: true,
      chunks: ['two']
    }),

참고: 여기서 구성이 더 중요합니다. 잘 작성되지 않으면 패키징 중에 오류가 보고됩니다. 청크의 앱은 webpack.base.conf.js 항목의 해당 변수 이름을 참조합니다. 청크의 기능은 각 항목이 컴파일되고 실행될 때마다 해당 항목에 해당한다는 것입니다. 작성되지 않으면 모든 페이지의 리소스가 도입됩니다. 즉, 프로젝트 구성이 변경되기 전에 단일 페이지 애플리케이션이 구성되었습니다.

3. 그런 다음 컴파일 환경인 실행 빌드를 구성합니다. 먼저 configindex.js 파일을 열고 이

    index: path.resolve(__dirname, '../dist/index.html'),
    one: path.resolve(__dirname, '../dist/one.html'),
    two: path.resolve(__dirname, '../dist/two.html'),

을 빌드에 추가하세요. 참고: 패키징 후 dist 폴더에 형성된 html입니다.

4. 그런 다음 /build/webpack.prod.conf.js 파일을 열고 플러그인에서 HTMLWebpackPlugin을 찾아

 new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
      chunksSortMode: 'dependency',
      chunks: ['manifest', 'vendor', 'app']
    }),
    new HtmlWebpackPlugin({
      filename: config.build.one,
      template: 'one.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
      chunksSortMode: 'dependency',
      chunks: ['manifest', 'vendor', 'one']
    }),
    new HtmlWebpackPlugin({
      filename: config.build.two,
      template: 'two.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
      chunksSortMode: 'dependency',
      chunks: ['manifest', 'vendor', 'two']
    }),

를 추가합니다. 참고: 파일 이름은 configindex.js의 빌드를 나타내며, 필요한 각 페이지는 다음과 같습니다. 청크를 구성하십시오. 그렇지 않으면 모든 페이지의 리소스가 로드됩니다.

1.2. 내 디렉토리

2.3 생성해야 할 여러 파일의 코드 1. 예) two.js는 이 코드와 유사합니다. "one"을 "two"로 바꾸면 됩니다.

import Vue from 'vue'
import one from './one.vue'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
    el: '#one',
    render: h => h(one)
})

2. One.vue 파일 코드: (여기서 예제를 제공합니다.) two.vue는 이 코드와 유사합니다. "one"을 "two"로 바꾸면 됩니다.

<template>
    <div>
        <p>{{msg}}</p>
    </div>
</template>

<script>
    export default {
        name: &#39;one&#39;,
        data() {
            return {
                msg: &#39;I am one&#39;
            }
        }
    }
</script>

3. One.html 파일 코드: (여기서 예제를 제공합니다.) two.vue는 이 코드와 유사합니다. "one"을 "two"로 바꾸세요.

nbsp;html>


    <meta>
    <meta>
    <title>one-page</title>


    <div></div>

주의! 이전에

에서 ID를 수정하는 것을 잊어버렸고 페이지가 내용 없이 비어 있었습니다. 콘솔을 열었을 때 div 태그에 내용이 없고 ID가 app인 것을 확인했습니다. 수정 후.

<div id="one"></div>【관련 추천:

vuejs 동영상 튜토리얼

, 웹 프론트엔드 개발】

위 내용은 vue는 다중 페이지 애플리케이션에 적합합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!