Vue-CLI3 で作成した WebComponentsに、UIフレームワークを適用し、かつ、 IE11対応にする


wrote: 2019.1.18

↓の続き記事です

[Vue CLI3 を使って、IE11でも動作するWeb Componentsを作ってみた - Qiita](https://qiita.com/sugasaki/items/7bb4d46e928e0e4d0739)

# 前回まで

Vue-CLI3でWebComponentを作成し、IE11で起動するところまでやりました。

<img src='https://qiita-image-store.s3.amazonaws.com/0/49910/6d3852b9-ba68-3559-9ec9-532d39005dda.png' width='300px' /> 


# 最初に

不要なコンポーネントを削除します。

* src/assets/logo.png
* src/components/HelloWorld.vue



# vuetify

UIフレームワークとして人気上昇中のvuetifyを使ってみます。

基本的に以下の無いように沿って進みます。

[Quick Start — Vuetify.js](https://vuetifyjs.com/ja/getting-started/quick-start)


### install vuetify

```shell
vue add vuetify
```



### main.js

src/main.jsに以下を追加

```js
import Vuetify from 'vuetify'
import "vuetify/dist/vuetify.min.css"; // Ensure you are using css-loader

Vue.use(Vuetify)
```


main.js は以下のようになる。

```js:.src/main.js
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");
```



// index.js or main.js
import 'vuetify/dist/vuetify.min.css' // Ensure you are using css-loader




## Material Icons

Material Iconsを使う場合には、<head>に以下を追加する必要があります。

```html
<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

`<v-app>`タグでくくる。　**← ここ重要**
これが無いとスタイルが適用されません。真白なボタンになったりします。
![image](https://qiita-image-store.s3.amazonaws.com/0/49910/859fe05a-28b6-d409-5ad3-e00dc0b4a5fc.png)


```html
<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

`<button>` タグを`<v-btn>に変更します。

```js
<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は以下のようにします。

```js
<script>
export default {
  name: "Counter",
  props: {
    count: {
      type: Number,
      default: 0,
      required: true
    }
  },
  methods: {
    countUp() {
      this.count += 1;
    },
    countDown() {
      this.count -= 1;
    }
  }
};
</script>
```

### 動作確認

実行

```shell
yarn serve --open
```

こんなのが出ればOK

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/d24ef477-e7c2-b0c6-8be1-7ddc4dc859c9.png)



## web componentの作成

wcオプションでビルドします。
wcはpackage.jsに定義済み

```shell
yarn build
```

### 動作確認

./dist/demo.htmlをブラウザで開いてみます。

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/dad0a85b-4aed-9ce4-43cf-f6e546b57f9f.png)

スタイルがががが・・・消えてます。

devtoolで見てもスタイルが当たっているように見えません。

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/4e7b20b6-dd50-78ce-2995-e53eeef1d944.png)

WebComponentはShadowDOMで閉じた世界になることが原因のようです。

## スタイルの適用




# a

```js
<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>

```