docs: add vuepress doc

Author: justforuse

docs/.vuepress/config.js

@@ -0,0 +1,22 @@
+module.exports = {
+  title: 'Vue Mathjax',
+  head: [
+    ['script', { src: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-AMS_HTML' }]
+  ],
+  themeConfig: {
+    logo: '/logo.png',
+    nav: [{ text: 'Guide', link: '/guide/quick-start' }],
+    repo: 'https://github.com/justforuse/vue-mathjax',
+    sidebar: [
+      {
+        title: 'Guide',
+        collapsable: false,
+        sidebarDepth: 0,
+        children: ['/guide/quick-start']
+      }
+    ]
+  },
+  plugins: [
+    'demo-container'
+  ]
+}

docs/.vuepress/enhanceApp.js

@@ -0,0 +1,5 @@
+import Mathjax from '../../packages'
+
+export default ({ Vue, options, router }) => {
+  Vue.use(Mathjax)
+}

docs/.vuepress/public/logo.png

@@ -0,0 +1,8 @@
+---
+home: true
+heroImage: /logo.png
+heroText: Vue Mathjax
+tagline: A Vue plugin for mathjax
+actionText: Get Started →
+actionLink: /guide/quick-start
+---

docs/README.md

@@ -0,0 +1,68 @@
+# Quick start
+
+## Installation
+
+```sh
+npm install --save vue-mathjax
+```
+
+
+## Usage
+### ❗️❗️Don't forget to import the Mathjax.js:
+```js
+<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-AMS_HTML"></script>
+```
+
+Import globally
+```js
+import VueMathjax from 'vue-mathjax'
+Vue.use(VueMathjax)
+```
+OR
+```js
+import {VueMathjax} from 'vue-mathjax'
+export default {
+  ...
+  components: {
+    'vue-mathjax': VueMathjax
+  },
+  ...
+}
+```
+
+## Demo
+
+:::demo
+```html
+<div class="demo-container">
+    <textarea v-model="formula" cols="30" rows="10"></textarea>
+    <vue-mathjax :formula="formula"></vue-mathjax>
+</div>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  data () {
+    return {
+      formula: '$$x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.$$'
+    }
+  }
+}
+</script>
+<style>
+.demo-container {
+  text-align: center;
+}
+</style>
+```
+:::
+
+## Props
+### formula
+`type: string` mathjax string
+
+### safe
+`type: boolean; default: true` sometimes you want render the html in your mathjax, so just set it to false. demo: [codesandbox](https://codesandbox.io/s/vue-template-ftd5s)
+
+### options
+`type: object; default: {}` custom Mathjax configurations

docs/guide/quick-start.md

@@ -10,7 +10,9 @@
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "build:lib": "vue-cli-service build --target lib --name VueMathjax packages/index.js",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "docs:dev": "vuepress dev docs",
+    "docs:build": "vuepress build docs"
   },
   "dependencies": {
     "core-js": "^3.6.5",
@@ -31,7 +33,9 @@
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.6.11",
+    "vuepress": "^1.9.7",
+    "vuepress-plugin-demo-container": "^0.2.0"
   },
   "eslintConfig": {
     "root": true,