vue2.0에서 여러 페이지를 개발하는 방법

이번에는 vue2.0으로 다중 페이지를 개발하는 방법과 vue2.0으로 다중 페이지를 개발할 때 주의사항에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

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

vue를 개발하는 방법은 두 가지가 있는데, 하나는 vue.js 파일을 script 태그에 직접 도입하는 방법인데, 개인적으로는 작은 멀티페이지를 해보면 더 편할 것 같습니다. 더 큰 프로젝트라도 webpack 없이는 할 수 없습니다. 그래서 또 다른 방법은 webpack과 vue-cli를 기반으로 한 엔지니어링 개발입니다. 단계는 아래에 자세히 설명되어 있습니다.
우선, 엔지니어링 개발을 위해 vue를 사용하는 경우 먼저 node.js가 있어야 하고 npm을 다운로드해야 합니다. 그러나 일반적으로 새 버전의 node에는 npm이 있으므로 그럴 필요가 없습니다. 그것을 해라. 지침은 명령줄에 입력됩니다. 첫 번째 단계는

vue init webpack test

명령을 사용하여 vue 프로젝트를 생성하는 것입니다. 블로거가 직접 선언한 파일명은 test 입니다. 다운로드 후 끝까지 입력하시면 vue 프로젝트가 생성되는데, 이 시점에서 해당 폴더와 관련된 의존성이 일부 존재하지 않습니다. 다음 명령을 입력하세요:

npm install

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

npm run dev

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

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

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

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

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

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

plugins: [
 new webpack.DefinePlugin({
  'process.env': 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: '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']
 }),
 new FriendlyErrorsPlugin()
]

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

그런 다음 컴파일 환경인 실행 빌드를 구성합니다. 먼저 configindex.js 파일을 열고 빌드에 다음을 추가하세요:

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

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

new HtmlWebpackPlugin({
 filename: process.env.NODE_ENV === 'testing'
  ? 'index.html'
  : 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',
 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의 빌드를 참조합니다. 각 페이지는 하나의 청크로 구성되어야 합니다. 그렇지 않으면 모든 페이지의 리소스가 로드됩니다.

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

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)
})
one.vue写法如下：
<template>
 <p>
  {{msg}}
 </p>
</template>
<script>
export default {
 name: &#39;one&#39;,
 data () {
  return {
   msg: &#39;I am one&#39;
  }
 }
}
</script>

두 분의 쓰는 방식이 비슷해서 따로 적지는 않겠습니다,

그런 다음 App.vue에 다음과 같이 작성합니다.

<template>
 <p>
  <a>one</a><br>
  <a>two</a><br>
  {{msg}}
 </p>
</template>

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

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

JS 프롬프트 텍스트 상자 이메일 주소 완성

$.ajax() 메소드 서버에서 json 데이터를 가져오는 방법

위 내용은 vue2.0에서 여러 페이지를 개발하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!