Vue.js의 헤더 및 바닥글 구성 요소
나는 Vue.js를 배우고 있고, 나는 vue.js 설치에 cli를 사용하는 것이 아니라, 방금 Vue.js 파일을 다운받아서 배우려고 한다.
내 문제는 헤더와 같은 구성요소를 외부화하는 것이다.부와 발바닥vue 및 기본 구성 요소에 추가.
나는 사용했다.Vue.component('MyHeader', require('./components/Header.vue'));구성 요소를 로드할 때 다음과 같은 오류가 발생함"Uncaught ReferenceError: require is not defined".
이 오류를 해결하려면 여기에서 .js 파일이 필요하지만 구성 요소 파일을 로드할 수 없다.
폴더 구조
인덱스.포인트
<!DOCTYPE html>
<html>
<head>
<title>this is example of header and footer</title>
</head>
<body>
<div id='root'>
<testcomponent></testcomponent>
<MyHeader></MyHeader>
<div>I am Content</div>
<MyFooter></MyFooter>
</div>
<!-- we need this two files for vue js -->
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="require.js"></script>
<!-- End of we need this two files for vue js -->
<script type="text/javascript" src="indexController.js"></script>
</body>
</html>
인덱스컨트롤러.js
//rout file for vue js
Vue.component("testcomponent",{
template:'<p>I am Test Component</p>'
});
Vue.component('MyHeader', require('./components/Header.vue'));
Vue.component('MyFooter', require('./components/Footer.vue'));
//import MyHeader from './components/Header.vue'
//import MyFooter from './components/Footer.vue'
var app = new Vue({
el: "#root",
components: {
MyHeader,
MyFooter
},
data: {
},
methods:{
}
});
헤더.vue
<template>
<h1>I am Header</h1>
</template>
바닥글.뷰
<template>
<h1>I am Footer</h1>
</template>
단일 파일 구성 요소(.vue)
.vue 파일을 일반 js 형식으로 변환하려면 vue-loader가 필요하다.https://vuejs.org/v2/guide/single-file-components.html,에서 설명서를 읽으려면 기본적으로 웹 팩이나 브라우저ify를 사용하여 .vue 파일 확장자를 사용해야 한다.
코멘트에 나와 있듯이, 당신은 .vue 파일을 사용하기 위한 빌드 도구가 필요하다.그러나 일반 .js 파일을 사용하면 범위 css를 제외한 모든 구성요소의 장점을 얻을 수 있다.
.js 템플릿 문자열에 템플릿을 넣은 다음 구성 요소를 기존 방식으로 호출하십시오.<script src="urlOfFile.js">또는 requiredjs로 전화를 걸지만, .vue가 아니라 .js 파일이어야 한다.
Vue와 모든 JS 마법으로 시작하는 경우 vue cli install approach 링크를 살펴보겠다.그것은 웹팩과 단일 페이지 구성요소에 필요한 모든 것들을 설치해야 하고, 그러면 당신은 그 설정의 일부를 해체하기 위해 역방향으로 일할 수 있다.
당신은 또한 Vue GitHub reposed의 예를 볼 수 있다.연결하다
이 예제는 vuex를 단일 파일 구성 요소와 함께 사용하는 것이지만 vuex는 견고하다.
CommonJS 사용법require(과 혼동하지 말 것)require.jsAMD 사용:
대신에Header.vue만들다Header.js그러면 다음과 같이 요구할 수 있다:
module.exports = {
template: `<template>
<h1>I am Header</h1>
</template>`
}
ES6 수출/수입
ES6를 사용하려면import대신에require, 이것은 의 내용일 것이다.Header.js:
export default {
template: `<template>
<h1>I am Header</h1>
</template>`
}
작업하기.vue구성 요소 파일 및 구조화, 필요vue-webpack-loader웹팩이나 브라우저 같은 것을 포함하는 빌드 스택.
참조
참조URL: https://stackoverflow.com/questions/48946164/header-and-footer-component-in-vue-js
'IT이야기' 카테고리의 다른 글
| 웹 주소록 수신기에서 전역 이벤트 방출 (0) | 2022.04.17 |
|---|---|
| Vue.js - [Vue warn]을(를) 어떻게 해결해야 하는가:렌더 오류: "TypeError: 정의되지 않은 속성 '포트'를 읽을 수 없음"? (0) | 2022.04.16 |
| 공유 라이브러리를 구축할 때 -fPIC는 무엇을 의미하는가? (0) | 2022.04.16 |
| django를 이용한 Vuejs 앱 개발 및 구축 (0) | 2022.04.16 |
| 부트스트랩 Vue 편집 가능 테이블 열 (0) | 2022.04.16 |