웹 팩/npm/연실이 없는 Vue 구성 요소
나는 vue-cli를 통해 구성 요소를 가져오는 것이 매우 간단하다는 것을 안다.그러나 vue-cli를 사용하지 않는 vue 프로젝트에 구성 요소를 가져올 수 있는가?
예를 들어, 내 index.html은 다음과 같이 보일 것이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue components</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"> </script>
<script src="https://github.com/mdbootstrap/Vue-Bootstrap-with-Material-Design/archive/mdbvue.js"> </script>
</head>
<body>
<div id="vue-app">
<Btn color="danger">Test Button</Btn>
</div>
</body>
</html>
그리고 내 앱.js:
import { Btn } from 'mdbvue'
new Vue({
el: '#vue-app',
components: {
Btn
},
data: {
}
}
만약 그것이 나의 예처럼 간단하지 않다면, npm이나 실을 사용하지 않고 이것을 어떻게 작동시키는지 알아낼 수 있는 자습서가 어디 있는가?
고마워요.
늦을지도 모르지만 나는 늦는 것보다 늦게 믿는 게 낫다고 생각해!!
나는 빌드 툴이 다소 과잉 살상이라고 느끼기 때문에 빌드 툴을 사용하고 싶지 않은 시밀라 상황을 우연히 알게 되었다.
한번 해 볼 수 있는 js 플러그인이 있다.(각으로 이사하면서 사용하지 않았다.JS + TypeScript + Visual Studio 2017 - 요구 사항을 충족함).
플러그인: http-vue-loader
링크: https://github.com/FranckFreiburger/http-vue-loader
예: 코드펜 도트 io /cscolabear/project/editor/AQ의 경우LQLO
요구 사항들
- Vue.js 2(컴파일러 및 런타임)
- es6-promise (IE, Chrome < 33, FireFox < 29, ... 제외))
- 웹 서버(선택 사항)...
작동 방식
- http 요청 vue 파일
- 문서 파편에 vue 파일을 로드하다.
- 각 섹션 처리(문자, 스크립트 및 스타일)
- Vue.js에 약속을 반환하다(async 구성 요소)
- 그런 다음 Vue.js는 구성 요소를 컴파일하고 캐시한다.
메모들
http-vue-loader의 목적은 컴파일 단계 없이 .vue 구성 요소를 신속하게 테스트하는 것이다.단, 프로덕션의 경우 웹 팩 모듈 번들러를 vue-loader와 함께 사용할 것을 권장하는데, 웹 팩-단순은 당신이 살펴봐야 할 좋은 미니멀리스트 웹 팩 구성이다.BTW, Vue.js가 템플릿을 지원하지 않는 이유를 확인하십시오.URL
주의바트
구글 크롬과 인터넷 익스플로러에 적합한 API가 없어 이 섹션의 구문 오류는 FireFox에서만 보고된다.
크레딧 : 프랑크 프라이버거
import { Btn } from 'mdbvue'
u가 게시한 코드에서 u는 이미 es6 모듈을 사용하였다.그러므로 적어도 babel-loader가 있는 웹 팩을 사용해야 한다. 그렇지 않으면 브라우저가 위의 문법을 지원하지 않을 것이다.
참조URL: https://stackoverflow.com/questions/51791597/vue-components-without-webpack-npm-yarn
'Programing' 카테고리의 다른 글
| 선택 항목을 사용할 때 문자열이 아닌 부울을 반환하는 방법 (0) | 2022.05.19 |
|---|---|
| 깃털 아이콘 사용량(Vue).JS (0) | 2022.05.19 |
| Builder Pattern을 언제 사용하시겠습니까? (0) | 2022.05.19 |
| vue에서 구성 요소를 동적으로 로드하는 방법 (0) | 2022.05.19 |
| 프로젝트를 Vue2에서 Vue3로 업그레이드하는 가장 좋은 방법 (0) | 2022.05.18 |