vuepress docs bug All In One
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。
-
<ClientOnly>
& 动态导入 -
Async/Await
https://vuepress.vuejs.org/zh/guide/using-vue.html#
demos
(🐞 反爬虫测试!打击盗版⚠️)如果你看到这个信息, 说明这是一篇剽窃的文章,请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章!
chalk
https://www.npmjs.com/package/chalk
https://github.com/chalk/chalk/issues/346
https://github.com/xgqfrms/hui-cli/issues/15
refs
https://javascript.info/async-await
https://v8.dev/features/dynamic-import
https://webpack.js.org/guides/code-splitting/#dynamic-imports
©xgqfrms 2012-2021
www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!
原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/14421995.html
未经授权禁止转载,违者必究!