빌드 프로세스가 없는 Vue.js 단일 파일 구성 요소

빌드 프로세스가 없는 Vue.js 단일 파일 구성 요소

저는 단순성 때문에 vue.js를 좋아합니다. 즉, 현대적이고 직관적인 데이터 바인딩 구문을 사용하여 복잡한 툴체인 없이 빠른 한 페이지 SPA를 해킹할 수 있습니다.

저는 또한 단일 파일 구성 요소에 대한 아이디어를 좋아합니다. 즉, 단일 장소가 있다는 것을 의미합니다.*.vue각 구성 요소에 DOM, 스타일 및 스크립트 기능이 저장됩니다.

하지만 앱을 함께 만들 때마다 빌드 프로세스를 관리하는 데 시간을 낭비하지 않고 단일 파일 구성 요소를 사용하고 싶습니다.간단히 말해, 빌드 툴 체인의 오버헤드 없이 구성 요소 관리의 이점을 원합니다. 즉, 브라우저가 각각의 부트스트랩을 위해 과도한 작업을 수행할 수 있도록 하는 것입니다.*.vue을 통해 철하다.XMLHttpRequestDOM 렌더링이 가능합니다.우리가 교체하는 것을 확인합니다.module.exports그리고.import해당하는 통화Vue.component()기능성

클라이언트 측(전용) 솔루션을 사용해 본 적이 있는지 알고 싶습니다.*.vue파일을 검색할 수 있습니다.확실히 이것은 이미 이루어졌습니까?

저는 이것이 아직 존재하지 않는다고 확신합니다. 왜냐하면 비교적 쉬워 보일 수 있지만, 특정 기능은 구현을 상당히 어렵게 만들 수 있기 때문입니다.예:

1. 다른 .vue 구성 요소만 가져올 필요는 없으며 외부 종속성을 임의로 가져올 수 있습니다.즉, 브라우저는 이제 npm 모듈을 다운로드 및 구문 분석하고 종속성을 처리해야 합니다.
2. .vue 구성 요소(템플릿, 논리 및 스타일)의 다른 섹션은 HTML, JS 및 CSS 이외의 언어로 작성될 수 있습니다.즉, 브라우저는 이제 제이드, 커피스크립트, LESS 또는 사용 중인 다른 모든 것에 대한 컴파일러/트랜스파일러를 다운로드하여 코드를 실행해야 합니다.일반 빌드 프로세스에서 사용되는 노드 모듈은 브라우저에서 실행할 수 없는 일부 외부 라이브러리의 래퍼일 수 있기 때문에 자바스크립트로 작성된 이러한 트랜스파일러가 실제로 존재한다는 보장은 없습니다.
3. .vue 구성 요소의 스타일링 범위를 지정할 수 있습니다. 즉, 이제 구성 요소의 템플릿을 구문 분석하여 임의로 생성된 ID를 요소 속성으로 삽입하고 동일한 구성 요소의 스타일링을 구문 분석하여 CSS 선택기에 동일한 ID를 삽입하여 스타일링 범위를 지정해야 합니다.

그리고 그것들은 제 머릿속에서 가장 명백한 것들입니다.물론, 여러분은 자신을 엄격하게 제한하고 이러한 기능을 사용하지 않을 수도 있지만, 그러면 더 이상 .vue 구성 요소가 아닙니다.

어떤 대가를 치르더라도 빌드 프로세스를 피하고 위의 기능을 사용하지 않는 제한을 감수하고 싶다면 JS 파일 하나만 사용하면 됩니다.

$(body).append(`<style>
  // styling goes here
</style>`); 

var myTemplate = `
  // template goes here
`; 

Vue.component('my-component', {
  template: myTemplate
  // component logic goes here
})

당신은 그것들을 정확한 순서대로 적재해야 합니다. 하지만 가난한 사람의 단일 파일 구성요소를 가지고 있습니다.

다른 방법은 http-vue-loader입니다.

html/js에서 .vue 파일을 직접 로드합니다.node.js 환경, 빌드 단계가 없습니다.

https://cdn.jsdelivr.net/npm/http-vue-loader@1.4.1/src/httpVueLoader.min.js

unkg cdn의 경우와 동일합니다.

https://unpkg.com/http-vue-loader

예를 들어 보겠습니다.

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/http-vue-loader"></script>

<script>
new Vue({
  el: '#app',
  components: {
    'header': httpVueLoader('/components/header.vue'),
    'nav-bar': httpVueLoader('/components/navbar.vue'),
    'aside': httpVueLoader('/components/aside.vue'),
    'content': httpVueLoader('/components/content.vue'),
    'footer': httpVueLoader('/components/footer.vue')
  }
});
</script>

또는 외부에서 구성 요소를 로드할 수 있습니다.

'MyHelloWorldComponent': httpVueLoader('https://my-cdn-or.github.io/path/HelloWorld.vue'),

https://codepen.io/mikechen2017/pen/wEdbBN/ 의 예를 참조하십시오.

2020년이고 에반 유는 지난주에 https://github.com/vuejs/vite 을 썼습니다.

클라이언트 측(전용) 솔루션을 사용한 적이 있는지 알고 싶습니다.

Vite는 서버를 가지고 있지만, 마치 메모장을 가지고 있던 웹의 옛 시절처럼 느껴집니다.데모를 실행한 지 5분도 안 되어 아주 간단합니다.

• @mzgajner가 언급한 세부 사항을 다루거나 다루는 것을 목표로 합니다.

현재로서는 Vue 3 베타 영역을 사용하면 바로 Vue 3 베타 영역에 있다는 것이 유일한 문제라고 생각합니다.Vue 2.x 없음.

하지만 앱을 함께 만들 때마다 빌드 프로세스를 관리하는 데 시간을 낭비하지 않고 단일 파일 구성 요소를 사용하고 싶습니다.간단히 말해서, 빌드 툴 체인의 오버헤드 없이 구성 요소를 관리할 수 있는 이점을 원합니다.

저는 공감하고 이 문제를 vue-block으로 해결하기로 했습니다.하나의 스크립트 태그만 있으면 시작할 수 있고, 빌드 도구가 필요하지 않으며, 완전한 클라이언트 측입니다.

서버 jsfiddle 예제에서 vue 파일을 로드할 수 있습니다(일부 제한 사항 있음).

<template src="path/to/vue-file.vue"></template>

Vue Blocks를 사용하면 다음과 같이 HTML 문서에 여러 개의 Vue 구성 요소를 작성할 수 있습니다.

<template component="sample-component">
    <div>
        <h1>Sample component</h1>
    </div>
    <style>
    </style>
    <script>
        export default {
            data() {
                return {}
            },
            mounted() {},
            methods: {
                xx() {

                }
            }
        }
    </script>
</template>

jsfiddle의 작업 데모: https://jsfiddle.net/o48L0y9j/

언급URL : https://stackoverflow.com/questions/40830113/vue-js-single-file-components-without-a-build-process