Zoomla!逐浪CMS官网

最新版本号[免费下载]
逐浪软件

快速创建vuepress项目-使用vuepress+Markdown写文档并发布为网站


作者: 发布时间:2020-04-26 来源:本站原创 点击数:

vuepress的官方文档:https://vuepress.vuejs.org/zh/guide/

参考:
https://segmentfault.com/a/1190000016333850

https://juejin.im/post/5d1f1136f265da1ba77cc3d3

https://juejin.im/post/5d1ab9c151882579dd60d5e0

视频教程:https://www.bilibili.com/video/av78052346?p=2

搭建一个vuepress项目

项目初始化

1、创建一个文件夹

2、项目初始化

npm init

安装配置VuePress

1、进入创建的文件夹

2、在文件夹目录下安装VuePress

npm install -D vuepress

3、新建文件夹,并命名为docs

4、创建一个Markdown文件

echo "# Hello VuePress!" > docs/README.md

5、启动预览

npx vuepress dev docs

如果使用vscode,则根据控制台提供的地址进行访问

6、配置package.json

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

7、更换启动命令,再次启动,查看是否配置成功

npm run docs:dev

编写文档

1、配置主页,这是 个叫README.md文件

---
home: true
heroImage: /flypig.gif
heroText: 中药溯源系统
tagline: 接口文档
actionText: 快速上手 →
actionLink: /guide/
features:
- title: 简洁至上
  details: 以 Markdown 为中心的项目结构,以最少的配置帮助你专注于写作。
- title: Vue驱动
  details: 享受 Vue + webpack 的开发体验,在 Markdown 中使用 Vue 组件,同时可以使用 Vue 来开发自定义主题。
- title: 高性能
  details: VuePress 为每个页面预渲染生成静态的 HTML,同时在页面被加载的时候,将作为 SPA 运行。
footer: 中药溯源接口文档1.0 | Copyright © 2019 flypig
---

2、在docs文件夹下创建.vuepress文件夹,并在.vuepress下创建config.js和public文件夹,public文件夹下放图片等静态文件

我的config.js的配置:

module.exports = ctx => ({
    title: 'xxxxxx文档',
    head: [['link', { rel: 'icon', href: '/logo.ico' }]],
    description: 'Just playing around',
    theme: '@vuepress/theme-default',
    themeConfig: {
        nav: [
            { text: '首页', link: '/' },
            { text: '指南', link: '/guide/' },
            {
                text: '接口', items: [
                    { text: '微信小程序', link: '/interface/wxapi/' },
                    { text: '网站', link: '/interface/web/' }
                ]
            },
            { text: '我的博客', link: 'https://www.cnblogs.com/flypig666' },
            { text: '我的码云', link: 'https://gitee.com/flypig666/projects' },
        ],
        sidebar: {
            "/guide/": [""],
            "/interface/wxapi/": [""],
            "/interface/web/": [""],
        }
    }
})

3、我的文件目录如下:

4、网站效果如下:

接下来你还可以配置各类主题

参照网站: http://www.z01.com/cli

终极发布

你只要运行:

npm run docs:build

就能生成文件,将生成的文件部署的服务器上就可以了。

本文责任编辑:  加入会员收藏夹 点此参与评论>>
当前网址:
复制本网址-发给QQ/微信上的朋友

+什么是CMS

CMS(Content Management System)是网站内容管理系统简称, 互联网上每个网站(无论大小门户)其后台都由专业CMS系统支撑- Zoomla!逐浪CMS作为国内高端CMS与WEB应用典范,首创第3代CMS理念,专注底层核心技术研发,以云技术、创新精神构建行业新成就,提供从网站内核到电商、办公、移动一体化的开发体验!

7×24小时服务热线 021-50391046 技术支持:13177777714
©Copyright 2003- 逐浪软件z01.com版权所有 All rights reserved
经营许可证号:工商3601002021063 沪ICP备09077823号 沪公网安备31011502000316号
本网站基于®Zoomla!逐浪CMS内核开发

ISO9001国际认证企业 CSDN外包TOP资质 鉴赏MTV电广视告 7×24小时全天候贴心服务 社会征信网