Parcel에서 Vue의 SFC (단일 파일 구성 요소)를 빌드해보십시오.
이것은 무엇입니까?
화제의 📦 Parcel 에서 Vue의 단일 파일 구성요소 (SFC; Single File Components)를 빌드해 본 기사입니다. Parcel의 기본 정보는 다른 기사를 참조하십시오.
샘플 코드는 corocn/parcel-vue-sfc-sample에 놓았습니다.
환경 구축
yarn or npm으로 바삭하게 넣어 버립니다.
parcel 단독으로는 Vue SFC를 사용할 수 없으므로 parcel-plugin-vue이 필요합니다.
yarn add parcel-bundler parcel-plugin-vue vue babel-preset-env
코드
Hello World 해봅시다.
각종 파일을 준비합니다. 전부 루트에 붙어 있습니다.
컴퍼넌트는 .vue 형식이 아니면 읽어 주지 않으므로 주의.
index.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Sample</title>
</head>
<body>
<div id="app"></div>
<script src="./index.js"></script>
</body>
</html>
index.jsimport Vue from 'vue';
import Hello from './Hello.vue'
const app = new Vue(Hello);
app.$mount('#app');
Hello.vue<template>
<div>{{greeting}} World!</div>
</template>
<script>
module.exports = {
data: function() {
return {
greeting: 'Hello'
}
},
mounted: function() {
console.log('mounted!')
}
}
</script>
<style>
div {
color: red;
}
</style>
<style scoped>
div {
font-size: 32px;
}
</style>
.babelrc{
"presets": ["env"]
}
실행
yarn parcel index.html
http://localhost:1234/ 에서 확인합시다.
scoped css도 효과가 있습니다.
parcel-plugin-vue
아직 불안정하기 때문에 Production에서의 사용은 추천할 수 없다는 것입니다. 앞으로 기대.
Stability: 1 - Experimental This feature is still under active development and subject to non-backwards compatible changes, or even removal, in any future version. Use of the feature is not recommended in production environments.
감상
놀라울 정도로 쉽게 움직입니다. 확실히 움직이고 싶을 때 편리하다고 생각했습니다.
Reference
이 문제에 관하여(Parcel에서 Vue의 SFC (단일 파일 구성 요소)를 빌드해보십시오.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/corocn/items/5fedcdb6c53d5c10a4d1
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Sample</title>
</head>
<body>
<div id="app"></div>
<script src="./index.js"></script>
</body>
</html>
import Vue from 'vue';
import Hello from './Hello.vue'
const app = new Vue(Hello);
app.$mount('#app');
<template>
<div>{{greeting}} World!</div>
</template>
<script>
module.exports = {
data: function() {
return {
greeting: 'Hello'
}
},
mounted: function() {
console.log('mounted!')
}
}
</script>
<style>
div {
color: red;
}
</style>
<style scoped>
div {
font-size: 32px;
}
</style>
{
"presets": ["env"]
}
yarn parcel index.html
Reference
이 문제에 관하여(Parcel에서 Vue의 SFC (단일 파일 구성 요소)를 빌드해보십시오.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/corocn/items/5fedcdb6c53d5c10a4d1텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
