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。

1. <ClientOnly> & 动态导入

2. Async/Await

https://vuepress.vuejs.org/zh/guide/using-vue.html#

refs

https://javascript.info/async-await

https://v8.dev/features/dynamic-import

https://webpack.js.org/guides/code-splitting/#dynamic-imports

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---