经过前面的折腾，至此我们指南相关的侧边栏和导航栏就已经完成了。 然后我们来创建一个像 VuePress 一样的主页。
默认主题的首页提供了一组默认配置。 但需要注意使用的前提。
---
home: true
heroImage: /img/avatar.jpeg # 注意这里可以使外链，也可以是静态资源
heroText: Hero 标题
tagline: Hero 副标题
actionText: 快速上手 →
actionLink: /guide/ # 这里是点击快速上手后的跳转链接。
features:
- title: 简洁至上
details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能
details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---
注意里面的图片存储位置
默认是为了避免.vuepress -> public 之后出现太多图片。 我分了一个文件夹。 vuepress -> 公共 -> img
快速重新运行您的项目，您将看到以下结果
看起来不错
这些都是基本配置，接下来就是我们的重头戏了
Markdown 语法扩展
语法扩展相信大部分朋友对于markdown的句型都略知一二。 以下是 VuePress 中的一些扩展句型。 大多数句型都比较简单。 这里我们重点关注文件导出。
在导出文件之前，我们需要了解一些知识：
components/demo-1.vue` 在使用时则是 `
components/guide/demo1.vue` 在使用时则是 `
这意味着您可以编写以下代码。
看看我们的组件
新文档/.vuepress/components/demo-1.vue
我是自定义的组件哦
创建一个新文件 docs/.vuepress/components/zz/demo.vue
我还是组件{{msg}}
export default {
data() {
return {
msg: 'Welcome to scalable'
}
},
}
然后在任何你想要的地方使用它
注意需要重启
导入外部组件（应用级配置）
官方：由于 VuePress 是一个标准的 Vue 应用程序，因此您可以通过创建 .vuepress/enhanceApp.js 文件来进行一些应用程序级别的配置elementui禁用按钮，该文件存在时将导出到应用程序中。 增强App.js应该默认导出一个钩子函数，该函数将包含一些应用程序级属性的对象作为参数。 你可以使用这个钩子来安装一些额外的Vue插件、注册全局组件、删除额外的路由钩子等。
// 使用异步函数也是可以的
export default ({
Vue, // VuePress 正在使用的 Vue 构造函数
options, // 附加到根实例的一些选项
router, // 当前应用的路由实例
siteData, // 站点元数据
isServer // 当前应用配置是处于 服务端渲染 或 客户端
}) => {
// ...做一些其他的应用级别的优化
}
上面的内容告诉我们可以使用插件，这是编写组件库文档必不可少的，满足要求即可，然后根据官方提示修改enhanceApp.js：
文档以element-ui为例
创建一个新文件 docs/.vuepress/enhanceApp.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
export default ({ Vue, options, router, siteData, isServer }) => {
Vue.use(ElementUI);
};
安装元素
npm install element-ui
安装演示插件
这里我们将使用一个 vuepress-plugin-demo-container 插件，使用以下命令安装它
npm install vuepress-plugin-demo-container
然后在 /docs/.vuepress/config.js 文件中配置插件
module.exports = {
// ...
plugins: ['demo-container'], // 配置插件
markdown: {}
}
修改按钮.md
::: demo 适用广泛的基础单选
```html
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
export default {
data() {
return {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}],
value: ''
}
}
}
```
:::
看看页面，哈哈，不行。 我找了很久才知道原因。 很可能是因为我的vuepress版本太低，所以我重新安装了它。
npm install vuepress
然后重启，成功
还有一个问题。 我把el-button复制到了那里elementui禁用按钮，但是默认的样式不是这样的。 修改页面默认样式
新 docs.vuepressstylesindex.styl
/*我们就直接写css了,默认是stylus格式的*/ .el-row{
margin-bottom:12px;
}
最后我们构建一下看看会不会报错
npm run build
成功。
你没有义务成为一年前、一天前、甚至 15 分钟前的自己。 无需感到遗憾或内疚，你生来就有改变和成长的力量。
发表评论