美文网首页
vuepress搭建自己的文档地址

vuepress搭建自己的文档地址

作者: 客观开发者 | 来源:发表于2021-06-09 08:48 被阅读0次

vuepress 是什么

VuePress 由两部分组成:第一部分是一个极简静态网站生成器 (opens new window),它包含由 Vue 驱动的主题系统插件 API,另一个部分是为书写技术文档而优化的默认主题,它的诞生初衷是为了支持 Vue 及其子项目的文档需求。

能做什么?

例如:
https://vuepress.vuejs.org/zh/guide/#%E5%AE%83%E6%98%AF%E5%A6%82%E4%BD%95%E5%B7%A5%E4%BD%9C%E7%9A%84
http://www.macrozheng.com/#/README
https://nacos.io/zh-cn/docs/quick-start.html

这个俩个就是很好的案例。

执行写readme 文件就行了。
我的git 地址
https://gitee.com/OptimisticDevelopers/vuepress.git

目录很清楚,文件名称也很清楚,目前只是一个 案例没有太多实质性的东西。。。

写好了文件和文档之后就可以发布到网上了。

一些文档,看起来很好,自己会收藏已经自己去写一部分内容。

这样的文档说明和教程说明。进行部署和创建

教程

https://juejin.cn/post/6954183097961152549
1,新建一个云服务期
2,创建一个项目(直接下载来下,修改一下就可以了,当然还是正规用命令开始,)

2.1. 创建并进入一个新目录

```
mkdir vuepress-starter && cd vuepress-starter

```

2.2. 使用你喜欢的包管理器进行初始化

```
yarn init # npm init

```

2.3. 将 VuePress 安装为本地依赖

我们已经不再推荐全局安装 VuePress

```
yarn add -D vuepress # npm install -D vuepress

```

注意

如果你的现有项目依赖了 webpack 3.x,我们推荐使用 [Yarn (opens new window)](https://classic.yarnpkg.com/zh-Hans/)而不是 npm 来安装 VuePress。因为在这种情形下,npm 会生成错误的依赖树。

2.4. 创建你的第一篇文档

```
mkdir docs && echo '# Hello VuePress' > docs/README.md

```

2.5. 在 package.json 中添加一些 scripts(opens new window)

这一步骤是可选的,但我们推荐你完成它。在下文中,我们会默认这些 scripts 已经被添加。

```
{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

```

2.6. 在本地启动服务器

```
yarn docs:dev # npm run docs:dev

```

VuePress 会在 [http://localhost:8080 (opens new window)](http://localhost:8080/)启动一个热重载的开发服务器。

3,里面有.vuepress
配置内容

module.exports = {
    title: "VuePress 云开发网站应用示例",
    description: "基于云开发的 VuePress 网站应用示例",
    base: "/vuepress/",
    themeConfig: {
        nav: [{
                text: "首页",
                link: "/"
            },
            {
                text: "指南",
                link: "/guides/"
            },
        ],
        sidebar: [
            ['/', '介绍'],
            ['/demo', '示例'],
            ['/use', '起步'],
            {
                title: 'API',
                collapsable: false,
                children: [
                    ['/props', 'Props'],
                    ['/events', 'Event']
                ]
            }, {
                title: '二次开发',
                collapsable: false,
                children: [
                    ['/extend', '功能扩展'],
                    ['/optimize', '优化']
                ]
            }, {
                collapsable: false,
                children: [
                    ['/others', '其他']
                ]
            },
            ['/changelog', '更新日志'],
        ]
    },
};

nav 是上面的标题
sidebar 是左面的 list 进行数据变化

其它文件和路径都是md 文件。这就是我们平时写的文章和文字了。
然后上传到git 公开的源码里面了。
然后 在云开发 CloudBase 创建一个免费的控件,然后在上面操作就可以了。
这次是免费免费。


微信截图_20210609084423.png 微信截图_20210609084500.png

可以直接部署上去就可以了。

微信截图_20210609084507.png

今天才有人阅读量,,,腾讯收我一分钱。哏!!!

相关文章

网友评论

      本文标题:vuepress搭建自己的文档地址

      本文链接:https://www.haomeiwen.com/subject/jpedrltx.html