여러 Vue 프로젝트 재방문

SPA라는 용어가 나를 얼마나 짜증나게 하는지에 대해 이야기했습니다. 클라이언트측 프레임워크는 웹사이트를 대체하는 것이 아니라 확장하는 데 적합하다고 생각합니다. 이를 염두에 두고 웹사이트를 향상시키는 몇 가지 클라이언트 측 앱에 대한 아이디어가 마음에 들지만 모든 프레임워크가 이를 쉽게 만드는 것은 아닙니다.

이 기사에서는 Vue 3에서 이 작업을 수행하는 새로운 접근 방식에 대해 이야기하겠습니다. Vue 3을 사용할 것이지만 이 접근 방식은 CLI(Vue 2 포함)를 사용하는 모든 Vue 프로젝트에서 작동합니다.

뷰 페이지

접근 방식에 대해 이야기하기 전에 Vue의 '페이지' 기능에 대해 이야기하겠습니다. 페이지는 각 '페이지'가 완전히 분리된 Vue 프로젝트일 수 있으므로 다소 잘못된 이름입니다. 여기서 유일한 진짜 마법은 Vue CLI를 사용하여 단일 빌드 단계에서 개별 Vue 프로젝트를 빌드한다는 것입니다.

Vue 프로젝트의 구조에 대한 간단한 보기부터 시작하겠습니다.



여기에는 vue.config.js 파일이 있습니다. 이것은 프로젝트를 빌드하는 방법을 사용자 정의할 수 있는 선택적 파일입니다.

// vue.config.js
module.exports = {
}

페이지 기능을 지원하려면 구성에서 페이지 개체를 생성하기만 하면 됩니다.

// vue.config.js
module.exports = {
  pages: {
    // ...
  }
}

이렇게 하면 main.js/ts 파일이 프로젝트 빌드의 유일한 시작점이 되는 것을 방지할 수 있습니다. 시작 .js/ts 파일을 가리키는 속성을 추가하기만 하면 됩니다. 예를 들어:

// vue.config.js
module.exports = {
  pages: {
    main: "src/main.js",
    about: "src/about.js",
  }
}

이러한 방식으로 소스 트리 내에서 두 개의 개별 프로젝트를 빌드합니다. 저에게 마법은 프로젝트 간에 코드를 공유할 수 있다는 것입니다. 프로젝트를 빌드하면 공유할 청크 공급업체 하나와 페이지의 각 항목에 대한 개별 패키지를 얻게 됩니다.

 File Size Gzipped

  dist\js\chunk-vendors.js 597.27 KiB 112.99 KiB
  dist\js\about.js 40.44 KiB 4.92 KiB
  dist\js\main.js 40.43 KiB 4.91 KiB

  Images and other types of assets omitted.

나의 새로운 전략

내 새로운 전략은 이전 접근 방식에서 약간 변경된 것이지만 공유 코드가 간소화되는 방식이 마음에 듭니다. 효과적으로 각 페이지를 자체 디렉토리로 이동하고 있습니다. 이렇게 하면 vue.config.js가 디렉토리를 가리킵니다.

// vue.config.js
module.exports = {
  pages: {
    main: "src/main",
    about: "src/about"
  }
}

그리고 공유 코드는 루트 수준에 유지됩니다.



따라서 공유 구성 요소에 대한 코드는 @ 접두사를 사용할 수 있습니다.

import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}

생각?



Shawn Wildermuth의 이 저작물은 Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License에 따라 라이선스가 부여되었습니다.
wildermuth.com의 작업을 기반으로 합니다.


이 기사가 마음에 들면 Pluralsight에서 Shawn의 과정을 참조하십시오.