vuepress踩坑記

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，具體操做請參照官方文檔

示例網站

github地址

剩下的主題配置參照官方文檔的配置詳解就OK了，這裏就不在贅述