淺談vuepress 踩坑記

更新時間：2018年04月18日 09:55:01 作者：朱亮

本篇文章主要介紹了淺談vuepress 踩坑記，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

vuepress是尤大大4月12日發(fā)布的一個全新的基于vue的靜態(tài)網(wǎng)站生成器，實際上就是一個vue的spa應用，內置webpack，可以用來寫文檔。恰好最近需要為一些組件寫文檔，就動手擼了一波，畢竟剛發(fā)布，遇到不少坑，最終還是磕磕碰碰的運行起來了，為了避免大家踩同樣的坑，特意將搭建的過程記錄下來，分享一波。

以下是幾個已知的問題

因為util.promisify是在node 8.0之后引入的，所以如果你不想像我一樣浪費三個小時的時間，請查看并且更新node版本

建議不要使用webpack-simple的模板進行試驗，否則會各種運行不起來╮(╯▽╰)╭

使用cli的模板如果報錯TypeError: Cannot read property 'vue' of undefined 是因為vuepress內置的webpack的vueloader使用的版本和你本地的不一樣，請將本地的版本更新到穩(wěn)定最新版本

當出現(xiàn)安裝官方文檔部署之后一直跳轉到404的情況時，請使用路由的哈希模式來訪問

如遇到端口沖突等問題，在docs目錄下新建.vuepress文件夾，然后新建config配置文件對prot端口項進行配置即可，具體可參照官方文檔

開始使用

使用cli新建一個webpack模板項目

//進入項目首先安裝依賴
  npm install
  
  //將vue-loader進行版本替換，使其和vuepress內置的webpack里的vue-loader保持一致，否則會報錯（不過尤大大已經(jīng)在解決版本沖突的問題了，版本待發(fā)）
  npm update vue-loader@15.0.0-rc.2 --save-dev
  
  //接下來安裝vuepress
 npm install -D vuepress
 
 mkdir docs
 
 echo "# Hello VuePress!" > docs/README.md
 
 //最后一步啟動vuepress ，進入docs目錄，使用vuepress dev命令即可
 
 cd docs
 
 vuepress dev
 
 //使用vuepress build即可完成對項目的打包
 
 //接下來就是按照官方的文檔，對你的網(wǎng)站進行各種創(chuàng)造啦

項目部署的話我使用的是github，具體操作請參照官方文檔

示例網(wǎng)站

github地址

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vuepress

elementui中的el-cascader級聯(lián)選擇器的實踐
本文主要介紹了elementui中的el-cascader級聯(lián)選擇器的實踐，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-10-10
基于Vue3和element-plus實現(xiàn)登錄功能(最終完整版)
這篇文章主要介紹了基于Vue3和element-plus實現(xiàn)一個完整的登錄功能,本文結合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-03-03
Vue學習之常用指令實例詳解
這篇文章主要介紹了Vue學習之常用指令,結合實例形式詳細分析了vue.js創(chuàng)建實例、常用指令及相關操作技巧,需要的朋友可以參考下
2020-01-01
vue導入.md文件的步驟（markdown轉HTML）
這篇文章主要介紹了vue導入.md文件的步驟（markdown轉HTML），幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2020-12-12
Vue中的el-date-picker時間選擇器的使用實例詳解
el-date-picker是Element UI框架中提供的日期選擇器組件,它支持單個日期、日期范圍、時間、日期時間等多種選擇方式,本文給大家介紹Vue中的el-date-picker時間選擇器的使用,感興趣的朋友一起看看吧
2023-10-10
vue頁面離開后執(zhí)行函數(shù)的實例
下面小編就為大家分享一篇vue頁面離開后執(zhí)行函數(shù)的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
vue 數(shù)據(jù)(data)賦值問題的解決方案
這篇文章主要介紹了vue 數(shù)據(jù)(data)賦值問題的解決方案，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2021-03-03
前端vue播放m3u8、flv、mp4視頻的方法示例
這篇文章主要給大家介紹了關于前端vue播放m3u8、flv、mp4視頻的方法,隨著前端大屏頁面的逐漸壯大,客戶的需求也越來越多,大屏上面展示的事物也越來越豐富,需要的朋友可以參考下
2023-07-07
vue3 獲取元素高度不準的問題
這篇文章主要介紹了vue3 獲取元素高度不準的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
el-table?fixed固定列導致錯位的解決方法介紹
ElementUI中el-table設置指定列固定不動,不受滾動條影響,下面這篇文章主要給大家介紹了關于el-table?fixed固定列導致錯位的解決方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-11-11