vuepress docs bug All In One

ReferenceError: window is not defined

bug ❌

// import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import GUI from '../../lib/gui.common.js';
import '../../lib/gui.css';

export default ({
  Vue, // the version of Vue being used in the VuePress app
  options, // the options for the root Vue instance
  router, // the router instance for the app
  siteData // site metadata
}) => {
  // 使用 element-ui
  Vue.use(ElementUI);
  // 使用 gui
  Vue.use(GUI);
}

OK ✅

Async/Await & dynamic import module

// import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import '../../lib/gui.css';

export default async ({
    Vue, // the version of Vue being used in the VuePress app
    options, // the options for the root Vue instance
    router, // the router instance for the app
    siteData, // site metadata,
    isServer
}) => {
    // 使用 element-ui
    Vue.use(ElementUI);
    // 使用 gui
    if (!isServer) {
        await import('../../lib/gui.common.js').then(module => {
            Vue.use(module.default);
        });
    }
}

ClientOnly

not work at all ❌👎

## 多選下拉組件

> 多選表單中的多選

### 基本用法


:::demo 基本用法

/`/`/`vue
<template>
    <el-row :gutter="20">
        <el-col :span="12">
            <div class="grid-content" style="min-height: 350px">
                <p>默認</p>
                <ClientOnly>
                    <MultiSelect@change="handleChange" :resultList="resultList" :dataList="dataList"/>
                </ClientOnly>
            </div>
        </el-col>
        <el-col :span="12">
            <div class="grid-content">
                <p>禁用</p>
                <ClientOnly>
                    <MultiSelect @change="handleChange" :resultList="resultList"  :dataList="dataList" disabled/>
                </ClientOnly>
            </div>
        </el-col>
    </el-row>
</template>

<script>
export default {
    data () {
        return {
            dataList: [
                {label: '1', value: '1'},
                {label: '2', value: '2'},
                {label: '3', value: '3'},
            ],
            resultList: [],
        };
    },
    methods: {
        handleChange (res) {
            this.resultList = res;
        }
    }
};
</script>

<style scoped>

</style>

/`/`/`
:::


### Attributes
| 參數 | 說明 | 類型 | 可選值 | 默認值 |
| --- | --- | --- | --- | --- |
| disabled | 是否禁用 | boolean | - | false |
|  |  |  |  |  |

### Slot
| Name | Description |
| --- | --- |
| - | 描述 |
| title | 標題的內容 |

### Events
| 事件名稱 | 說明 | 回調參數 |
| ---| ---| --- |
| change | 選中值發生變化時觸發 | 目前的選中值 |

SSR bug

在 Markdown 中使用 Vue & 瀏覽器的 API 訪問限制

當你在開發一個 VuePress 應用時，由於所有的頁面在生成靜態 HTML 時都需要通過 Node.js 服務端渲染，因此所有的 Vue 相關代碼都應當遵循編寫通用代碼 (opens new window)的要求。
簡而言之，請確保只在 beforeMount 或者 mounted 訪問瀏覽器 / DOM 的 API。