UI 프레임워크를 Vue-CI3에서 만든 WebComponents에 적용하고 IE 11
12900 단어 IE11WebComponentsVue.jsvue-cli3
↓의 후속 보도
Vue CLI3을 사용하여 IE 11도 작동할 수 있는 웹 컴포니트를 만들어 보았습니다.
지난번까지.
Vue-Cai3로 웹컴포넌트를 제작해 IE11로 시작할 때까지 했다.
먼저
필요하지 않은 구성 요소를 삭제합니다.
필요하지 않은 구성 요소를 삭제합니다.
vuetify
UI 프레임워크로 인기가 높아지는 vuetify를 사용해 보세요.
기본적으로 다음과 같은 내용에 따라 진행한다.
Quick Start — Vuetify.js
install vuetify
vue add vuetify
main.js
src/main.js에 다음 내용 추가import Vuetify from 'vuetify'
import "vuetify/dist/vuetify.min.css"; // Ensure you are using css-loader
Vue.use(Vuetify)
main.js는 다음과 같다.
.src/main.jsimport Vue from "vue";
import App from "./App.vue";
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css"; // Ensure you are using css-loader
Vue.use(Vuetify);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
//index.js or main.js
import 'vuetify/dist/vuetify.min.css'//Ensure you are using css-loader
Material Icons
Material Icons를 사용할 때는 다음을 추가해야 합니다.<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
IE11 & Safari 9 support
사랑을 끊다
마지막 참조
yarn add babel-polyfill
yarn add @babel/preset-env -d
app.js
4<v-app> 라벨로 묶는다.← 여기가 중요해
이게 없으면 스타일을 적용할 수 없어요.새하얀 단추가 됩니다.
<template>
<v-app>
<div id="app">
<Counter v-bind:count="7"/>
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</v-app>
</template>
Counter.vue
4<button> 레이블을 `(으)로 변경합니다.<template>
<div>
<h1>{{ count }}</h1>
<v-btn color="success" v-on:click="countUp">Count Up</v-btn>
<v-btn color="info" v-on:click="countDown">Count Down</v-btn>
</div>
</template>
script는 다음과 같습니다.<script>
export default {
name: "Counter",
props: {
count: {
type: Number,
default: 0,
required: true
}
},
methods: {
countUp() {
this.count += 1;
},
countDown() {
this.count -= 1;
}
}
};
</script>
동작 확인
실행yarn serve --open
이런 거 나오면 OK.
웹component 제작
wc 옵션으로 구축됩니다.
wc는 패키지입니다.js에서 정의됨yarn build
동작 확인
./dist/demo.브라우저로 열어볼게요.
양식이 사라지다.
devotol에서도 몸매가 잘 어울리는지 모르겠다.
WebComponent가 ShadowDOM의 폐쇄적인 세계로 바뀌었기 때문인 것 같다.
스타일 적용
a <meta charset="utf-8" /> <title>as demo</title>
<script src="https://unpkg.com/vue"></script>
<script src="./as.js"></script>
<style>
#host::shadow span {
}
@font-face {
font-family: element-icons;
src: url(fonts/element-icons.2fad952a.woff) format("woff"),
url(fonts/element-icons.6f0a7632.ttf) format("truetype");
font-weight: 400;
font-style: normal;
}
</style>
<as-demo></as-demo>
Reference
이 문제에 관하여(UI 프레임워크를 Vue-CI3에서 만든 WebComponents에 적용하고 IE 11), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/sugasaki/items/faa33b36c227765e20a3
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
vue add vuetify
import Vuetify from 'vuetify'
import "vuetify/dist/vuetify.min.css"; // Ensure you are using css-loader
Vue.use(Vuetify)
import Vue from "vue";
import App from "./App.vue";
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css"; // Ensure you are using css-loader
Vue.use(Vuetify);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
<template>
<v-app>
<div id="app">
<Counter v-bind:count="7"/>
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</v-app>
</template>
<template>
<div>
<h1>{{ count }}</h1>
<v-btn color="success" v-on:click="countUp">Count Up</v-btn>
<v-btn color="info" v-on:click="countDown">Count Down</v-btn>
</div>
</template>
<script>
export default {
name: "Counter",
props: {
count: {
type: Number,
default: 0,
required: true
}
},
methods: {
countUp() {
this.count += 1;
},
countDown() {
this.count -= 1;
}
}
};
</script>
yarn serve --open
yarn build
<meta charset="utf-8" /> <title>as demo</title>
<script src="https://unpkg.com/vue"></script>
<script src="./as.js"></script>
<style>
#host::shadow span {
}
@font-face {
font-family: element-icons;
src: url(fonts/element-icons.2fad952a.woff) format("woff"),
url(fonts/element-icons.6f0a7632.ttf) format("truetype");
font-weight: 400;
font-style: normal;
}
</style>
<as-demo></as-demo>
Reference
이 문제에 관하여(UI 프레임워크를 Vue-CI3에서 만든 WebComponents에 적용하고 IE 11), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/sugasaki/items/faa33b36c227765e20a3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
