美文网首页
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