隨著工作年限的增加，越來越認同，文件是程式必不可少的一部分。話不多說，今天給大家推薦一個寫文件的外掛 VuePress，它可以將你寫的md文件渲染成靜態html頁面，現在就可以開心地用md檔案地形式來寫文件
VuePress有兩種使用方式，第一種就是單獨使用，第二種就是整合到專案中。我們使用第二種方式，讓開發人員可以在一個地方同時進行文件編寫和程式碼開發
首先，新建一個測試專案，新建成功
專案結構
安裝VuePress
yarn add -D vuepress
建立文件根目錄
已經做好了準備工作，我們們來建立目錄開始寫文件！在根目錄新增資料夾mydocs
新增配置
VuePress的配置方式是，在當前文件目錄(mydocs)下，建立一個.vuepress資料夾，VuePress或預設去讀取這個資料夾的配置下的config.js。建立結構後：
現在我們來配置一下這個config.js
const path=require('path')
module.exports = {
title: '測試開發文件',
description: '測試開發文件',
themeConfig: {
// 側邊欄導航
sidebar: [['/', 'Start'],
['/first/', '第一個板塊'],
['/second/second.md', '第二個版塊']
],
sidebarDepth: 2
},
dest:path.resolve('public','mydocs'),
base:'/docs/'
}
複製程式碼這些配置項分別是什麼意思，我就不做過多贅述，建議查閱官方文件
值得一提的是，sidebar這個配置，代表著側邊導航欄。程式碼中的配置的意思是，我的文件有3個大的導航，每個陣列第一個引數是要讀取的路徑，如果沒有具體到檔名，就會預設讀取該資料夾下的README.md檔案，類似於Start和第一個版塊
建立文件結構
建立建立文件結構和建立配置檔案沒有一定的先後順序，但是要保證兩者一致
根據我們的配置檔案，我們要建立對應的目錄
寫入執行文件指令碼
好像我們的準備工作已經差不多了，怎麼開始我們的文件編寫呢？
和我們的程式碼專案類似，VuePress也是通過命令的方式啟動的，在package.json中，我們新增兩個指令碼
執行文件
萬事具備！執行！
yarn run docs:dev
成功！讓我們訪問連結，在瀏覽器檢視一下
什麼都沒有。。。。
當然了，你還一個字都沒寫呢，哈哈
修改文件
讓我們往我們的md文件中寫點東西！
我們把根目錄的README.md寫入如下內容
## 我是首頁哦
### 我是首頁三級標題哦
#### 我是首頁四級標題哦
複製程式碼其他目錄下的也按照規則隨意寫一些，儲存，檢視瀏覽器
完美
如何匯出文件
VuePree 執行 yarn run docs:build命令，可以把.md檔案生成靜態html檔案，但是當我們要把開發文件提交給領導的時候，總不能跟領導說，領導，你去訪問xxxx可以看到！（大多時候，他們只信word那一套）
這裡，我推薦pandoc
安裝pandoc
pandoc的作用是，把.md文件轉換成其他格式的檔案
請自行搜尋pandoc，下載安裝包，安裝時注意勾選給所有使用者使用
安裝完成之後，請自行檢視學習pandoc的轉換命令
現在我們可以把.md檔案轉換成.docx檔案啦
但是，但是！！我們文件一旦多起來，靠手動一個命令去轉換，也太蠢了吧，這不符合我用50分鐘的時間寫程式碼去完成5分鐘就可以完成的事的精神，我決定寫一個webpack外掛，每次打包成產品的時候，就自動匯出文件(打包產品的時候一般已經足夠穩定)
寫一個配合使用的webpack外掛
直接上程式碼
const path = require('path')
const fs = require('fs')
const cmd = require('node-cmd')
/**
* webpack外掛，當打包生產模式的時候，將vuePree的md文件輸出word文件
* tx 20190705
*/
class DocsOutPutPlugin {
constructor(options) {
const defaultOptions = {
basePath: '', // 基本目錄上下文
output: 'docsOutput', // 匯出的目標目錄
dir: 'mydocs' // 包含md文件的頂層目錄
}
if (!options || !options.basePath) {
throw new Error('basePath is required')
}
this.options = Object.assign({}, defaultOptions, options)
this.outputPath = path.resolve(this.options.basePath, this.options.output)
this.docsPath = path.resolve(this.options.basePath, this.options.dir)
}
apply(compiler) {
compiler.plugin('compile', params => {
this.createDir(this.outputPath)
this.makeDocxFile(this.docsPath)
})
}
// create output dir
createDir(dir) {
if (!fs.existsSync(dir)) {
fs.mkdirSync(dir)
}
}
// create output file
makeDocxFile(_path) {
fs.readdir(_path, (readErr, files) => {
if (readErr) {
throw readErr
}
files.forEach(file => {
const stats = fs.statSync(_path + '\\' + file)
if (stats.isFile()) {
const extname = path.extname(file).toLowerCase()
if (extname === '.md') {
const commond = `pandoc ${_path + '\\' + file} -o ${this
.outputPath +
'\\' +
file.replace('.md', '')}.docx`
cmd.run(commond)
}
} else if (stats.isDirectory()) {
const newPath = _path + '\\' + file
this.makeDocxFile(newPath)
}
})
})
}
}
module.exports = DocsOutPutPlugin
複製程式碼新增配置檔案 webpack.pro.config.js
const DocsOutPutPlugin = require('./webpackPlugins/DocsOutPutPlugin')
module.exports = {
plugins: [new DocsOutPutPlugin({
basePath: __dirname
})]
}
複製程式碼修改vue.config.js
const proConfig = require('./webpack.pro.config')
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
return proConfig
}
//else {
// ERROR WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
// return config //不太明白這裡為什麼會出錯，結構一樣，但是卻報錯
//}
}
}
複製程式碼結束！！