/study-notes

笔记 vue+markdown 自动编译成静态网站

Primary LanguageVueMIT LicenseMIT

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;
```

:::

自动编译成效果

demo

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 在线访问

start

token

  • 复制生成的 token

copy

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

copy

#项目构建环境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

gh-page

gh-page