Vue+Markdown 编译静态网站

在线效果展示

https://kitorv.github.io/study-notes

基于 vue 搭建笔记内容使用markdown文件编写，自动编译成网站

更新日志

版本更新详细说明 CHANGELOG

运行环境搭建

Node 下载安装

Node 下载

包管理器

node自带的npm部分文件可能不能下载或者比较慢建议安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装 Vue 环境

npm install -g @vue/cli

安装依赖

切换到代码根目录

cd 代码目录

安装依赖

npm install
# OR
cnpm install

运行项目，浏览器访问

npm run serve
# OR
vue ui

打包发布

npm run build

文档编写

markdown文件编写,用:::snippet和:::包裹内容

:::snippet 片段标题

```html
<template></template>
```

```css
.md-class {
  color: #333333;
}
```

```javascript
let value = 123456;
```

:::

自动编译成效果

`setting.json`文件配置

属性	必填	描述
name	⭕	生成菜单标题或者分组标题
url	❌	markdown 的文件路径，不配置生成分组标题

@默认src目录

{
  "routes": [
    { "path": "", "name": "JavaScript基础" },
    {
      "path": "@/notes/javascript/JAVASCRIPT-01.md",
      "name": "简介和使用"
    }
  ]
}

部署配置

1. 通用打包服务器部署

npm run build

打包后dist文件夹内容直接发布到服务器

2. 静态预渲染服务器部署

npm run prerender

打包后dist文件夹内容直接发布到服务器

3. travis 自动构建 github-pages 在线访问

github 账号登陆 https://www.travis-ci.org,开启项目自动构建 study-notes

github 生成 Token https://github.com/settings/tokens,勾线repo 生成 token

复制生成的 token

travis 进入 Settings 配置环境变量 GITHUB_TOKEN 将 github 生成的 token 添加进去

travis 配置在项目下的.travis.yml，具体更多配置查看 https://docs.travis-ci.com

#项目构建环境Node
language: node_js

# Node版本 10
node_js:
  - "10"

# 依赖安装
install:
  - npm install

# 代码打包
script:
  - npm run build

# 发布到gh-pages
deploy:
  provider: pages
  local_dir: dist
  skip_cleanup: true
  github_token: $GITHUB_TOKEN
  keep_history: true
  on:
    branch: master