vue2.0에서 다중 페이지 개발을 구현하는 방법-JS 튜토리얼-php.cn

vue2.0에서 다중 페이지 개발을 구현하는 방법

亚连

풀어 주다： 2018-06-08 18:08:09

원래의

2425명이 탐색했습니다.

이 글은 주로 vue2.0의 다중 페이지 개발 사례를 소개하고 있습니다.

보통 Vue로 개발할 때 우리는 Vue가 단일 페이지 애플리케이션을 위해 특별히 탄생했다고 항상 느끼지만 그렇지 않습니다. Vue는 엔지니어링 개발 중에 webpack에 크게 의존하고 webpack은 모든 리소스를 단일 페이지에 통합하기 때문입니다. 하지만 vue는 단일 페이지를 만들 수 있을 뿐만 아니라 여러 페이지를 만들 수도 있습니다. 여러 페이지를 만들려면 이에 의존해야 합니다. 즉, webpack을 재구성해야 합니다. 이번 글에서는 webpack의 구성에 대해 자세히 설명하겠습니다.

vue를 개발하는 방법에는 두 가지가 있는데, 하나는 vue.js 파일을 스크립트 태그에 직접 도입하는 것입니다. 이런 방식으로 도입하면 소규모 다중 페이지 프로젝트를 수행하는 것이 더 편할 것이라고 개인적으로 느낍니다. 더 큰 프로젝트를 수행하더라도 여전히 웹팩을 활성화해야 합니다. 그래서 또 다른 방법은 webpack과 vue-cli를 기반으로 한 엔지니어링 개발입니다. 단계는 아래에 자세히 설명되어 있습니다.
우선 엔지니어링 개발을 위해 vue를 사용한다면 먼저 node.js가 있어야 하고 그 다음 npm을 다운로드해야 합니다. 하지만 일반적으로 새로운 버전의 node에는 npm이 있기 때문에 그럴 필요가 없습니다. . 지침은 명령줄에 입력됩니다. 우선 첫 번째 단계는 vue 프로젝트를 생성하는 것입니다.

vue init webpack test

로그인 후 복사

블로거가 선언한 파일 이름은 test입니다. 다운로드 후 끝까지 입력하면 vue 프로젝트가 생성됩니다. vue 프로젝트에는 관련 종속성이 없습니다. 이때 폴더에 들어가서 다음 명령을 입력해야 합니다.

npm install

로그인 후 복사

네트워크 속도가 좋지 않으면 cnpm install을 사용하면 효과는 동일합니다. 몇 분 후에 전체 종속성이 다운로드되었습니다. 그런 다음

npm run dev

로그인 후 복사

명령을 입력하면 인터페이스가 자동으로 열립니다. 오류가 보고되고 웹 페이지를 열 수 없는 경우 이유는 단 하나입니다. 포트가 사용 중입니다. 이때 /config/index로 이동해야 합니다. .js 디렉터리에서 포트를 변경하면 됩니다.

vue 프로젝트가 모든 구성을 완료한 후 다음 단계는 먼저 몇 가지 새로운 html 파일을 만드는 것입니다. 저는 블로거로서 새로운 one.html과 two.html, 그리고 해당 vue 파일을 만들었습니다.

작업을 마친 후 buildwebpack.base.conf.js 디렉토리에 들어가서 module.exports 도메인에서 항목을 찾은 다음 거기에 여러 항목을 구성하고 추가합니다.

entry: {
 app: &#39;./src/main.js&#39;,
 one: &#39;./src/js/one.js&#39;,
 two: &#39;./src/js/two.js&#39;
},

로그인 후 복사

참고 , 보라색 부분의 변수 이름은 나중에 잊어버리는 것을 방지하기 위해 사용되므로 잘 선택해야 합니다.

다음 단계는 dev를 실행하여 개발 환경을 수정하고, buildwebpack.dev.conf.js 파일을 열고, module.exports에서 플러그인을 찾는 것입니다. 다음은 다음과 같이 작성됩니다.

plugins: [
 new webpack.DefinePlugin({
  &#39;process.env&#39;: config.dev.env
 }),
 // 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: &#39;index.html&#39;,
  template: &#39;index.html&#39;,
  inject: true,
  chunks: [&#39;app&#39;]
 }),
 new HtmlWebpackPlugin({
  filename: &#39;one.html&#39;,
  template: &#39;one.html&#39;,
  inject: true,
  chunks: [&#39;one&#39;]
 }),
 new HtmlWebpackPlugin({
  filename: &#39;two.html&#39;,
  template: &#39;two.html&#39;,
  inject: true,
  chunks: [&#39;two&#39;]
 }),
 new FriendlyErrorsPlugin()
]

로그인 후 복사

청크에 있는 앱은 다음을 참조합니다. webpack.base .conf.js 항목의 해당 변수 이름입니다. 청크의 기능은 각 항목이 컴파일되고 실행될 때마다 항목에 해당한다는 것입니다. 작성되지 않으면 모든 페이지의 리소스가 도입됩니다.

이후 컴파일 환경인 Run Build를 구성합니다. 먼저 configindex.js 파일을 열고 이를 빌드에 추가합니다:

index: path.resolve(__dirname, &#39;../dist/index.html&#39;),
one: path.resolve(__dirname, &#39;../dist/one.html&#39;),
two: path.resolve(__dirname, &#39;../dist/two.html&#39;),

로그인 후 복사

그런 다음 /build/webpack.prod/conf.js 파일을 열고 플러그인에서 HTMLWebpackPlugin을 찾은 후 다음 코드를 추가합니다.

new HtmlWebpackPlugin({
 filename: process.env.NODE_ENV === &#39;testing&#39;
  ? &#39;index.html&#39;
  : config.build.index,
 template: &#39;index.html&#39;,
 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: &#39;dependency&#39;,
 chunks: [&#39;manifest&#39;, &#39;vendor&#39;, &#39;app&#39;]
}),
new HtmlWebpackPlugin({
 filename: config.build.one,
 template: &#39;one.html&#39;,
 inject: true,
 minify: {
  removeComments: true,
  collapseWhitespace: true,
  removeAttributeQuotes: true
 },
 chunksSortMode: &#39;dependency&#39;,
 chunks: [&#39;manifest&#39;, &#39;vendor&#39;, &#39;one&#39;]
}),
 new HtmlWebpackPlugin({
   filename: config.build.two,
   template: &#39;two.html&#39;,
   inject: true,
   minify: {
     removeComments: true,
     collapseWhitespace: true,
     removeAttributeQuotes: true
   },
   chunksSortMode: &#39;dependency&#39;,
   chunks: [&#39;manifest&#39;, &#39;vendor&#39;, &#39;two&#39;]
 }),

로그인 후 복사

여기서 파일 이름은 참조합니다. configindex로 .js의 빌드에서 각 페이지는 하나의 청크로 구성되어야 합니다. 그렇지 않으면 모든 페이지의 리소스가 로드됩니다.

그러면 one.js 파일은 다음과 같이 작성할 수 있습니다.

import Vue from &#39;vue&#39;
import one from &#39;./one.vue&#39;

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
 el: &#39;#one&#39;,
 render: h => h(one)
})
one.vue写法如下：
<template>
 <p id="one">
  {{msg}}
 </p>
</template>

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

로그인 후 복사

two도 비슷한 방식으로 작성되므로 따로 적지 않겠습니다.

그러면 App.vue에서는 다음과 같이 작성할 수 있습니다.

<template>
 <p id="app">
  <a href="one.html" rel="external nofollow" >one</a><br>
  <a href="two.html" rel="external nofollow" >two</a><br>
  {{msg}}
 </p>
</template>

로그인 후 복사

이렇게 페이지를 열었을 때 위의 one 링크를 클릭하면 one.html로 이동하고, 두 개를 클릭하면 two.html로 이동합니다. 이렇게 하면 완료됩니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.