Development of Custom Element using Vue.js #kyotojs
8589 단어 JavaScriptWebComponentsVue.js

오늘 할 말
주의

개발물
Kamishibai Viewer

Custom Elements의 개발 방법
하면, 만약, 만약...
lit-html
lit-element
Custom Elements의 개발 방법
프레임이 작동하면(1)
Angular Elements
Custom Elements의 개발 방법
프레임 작업하면(2)
Vue CLI v3
하고 싶은 말→Custom Elements는 프레임으로 만들 수 있어요.
Vue CLI v3 개발
대략적인 절차
환경 구축
terminal
$ vue create my-wc-project
$ yarn add @vue/web-component-wrapper
package.json 편집
package.json
{
"name": "my-wc-project",
"scripts": {
"build": "VUE_CLI_CSS_SHADOW_MODE=true vue-cli-service build --target wc --name my-component ./src/wc.ts",
"...": "..."
},
"...": "..."
}
Entrypoint 전용 제작
src/wc.ts
import Vue from 'vue'
// TS の定義はない
const { default: wrap } = require('@vue/web-component-wrapper')
// ?shadow を使って Shadow DOM での Scoped CSS を有効化するのでこう読む
const { default: MyComponent } = require('./MyComponent.vue?shadow')
window.customElements.define('my-component', wrap(Vue, MyComponent))
어셈블리의 스크래치
src/MyComponent.vue
<template>
<div>
<p>
<span>Hi, {{username}}</span>
</p>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
props: {
username: String
}
})
</script>
<style scoped>
p span {
padding-bottom: 8px;
border-bottom: solid 2px #77CB5B;
}
</style>
구축
terminal
$ yarn build
완성

실제로 해보세요 (시간 있으면)
슬라이드만 보는 사람
……
그럼 이게 뭐가 즐거워요?
Custom Element의 기쁨(1)
Custom Element의 기쁨(2)
다른 소감
Thanks
Reference
이 문제에 관하여(Development of Custom Element using Vue.js #kyotojs), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/potato4d/items/a25e77795de88f500157텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)