vuepress是尤大大4月12日發佈的一個全新的基於vue的靜態網站生成器,實際上就是一個vue的spa應用,內置webpack,可以用來寫文檔。恰好最近需要爲一些組件寫文檔,就動手擼了一波,畢竟剛發佈,遇到不少坑,最終還是磕磕碰碰的運行起來了,爲了避免大家踩同樣的坑,特意將搭建的過程記錄下來,分享一波。
以下是幾個已知的問題
因爲util.promisify是在node 8.0之後引入的,所以如果你不想像我一樣浪費三個小時的時間,請查看並且更新node版本
建議不要使用webpack-simple的模板進行試驗,否則會各種運行不起來╮(╯▽╰)╭
使用cli的模板如果報錯TypeError: Cannot read property ‘vue’ of undefined 是因爲vuepress內置的webpack的vueloader使用的版本和你本地的不一樣,請將本地的版本更新到穩定最新版本
當出現安裝官方文檔部署之後一直跳轉到404的情況時,請使用路由的哈希模式來訪問
如遇到端口衝突等問題,在docs目錄下新建.vuepress文件夾,然後新建config配置文件對prot端口項進行配置即可,具體可參照官方文檔
全局安裝之後項目中再安裝的話依賴會衝突,引發Module build failed: CssSyntaxError ,建議寫在全局的vuepress
開始使用
使用cli新建一個webpack模板項目
//進入項目首先安裝依賴
npm install
//將vue-loader進行版本替換,使其和vuepress內置的webpack裏的vue-loader保持一致,否則會報錯(不過尤大大已經在解決版本衝突的問題了,版本待發)
npm install vue-loader@15.0.0-rc.2 --save-dev
//接下來安裝vuepress
npm install -D vuepress
mkdir docs
echo "# Hello VuePress" > docs/README.md
//最後一步啓動vuepress
npx vuepress dev docs
//使用vuepress build即可完成對項目的打包
//接下來就是按照官方的文檔,對你的網站進行各種創造啦
項目部署的話我使用的是github,具體操作請參照官方文檔
剩下的主題配置參照官方文檔的配置詳解就OK了,這裏就不在贅述