淺談vuepress 踩坑記

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

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

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

以下是幾個(gè)已知的問題

因?yàn)閡til.promisify是在node 8.0之后引入的，所以如果你不想像我一樣浪費(fèi)三個(gè)小時(shí)的時(shí)間，請(qǐng)查看并且更新node版本

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

使用cli的模板如果報(bào)錯(cuò)TypeError: Cannot read property 'vue' of undefined 是因?yàn)関uepress內(nèi)置的webpack的vueloader使用的版本和你本地的不一樣，請(qǐng)將本地的版本更新到穩(wěn)定最新版本

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

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

開始使用

使用cli新建一個(gè)webpack模板項(xiàng)目

//進(jìn)入項(xiàng)目首先安裝依賴
  npm install
  
  //將vue-loader進(jìn)行版本替換，使其和vuepress內(nèi)置的webpack里的vue-loader保持一致，否則會(huì)報(bào)錯(cuò)（不過尤大大已經(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
 
 //最后一步啟動(dòng)vuepress ，進(jìn)入docs目錄，使用vuepress dev命令即可
 
 cd docs
 
 vuepress dev
 
 //使用vuepress build即可完成對(duì)項(xiàng)目的打包
 
 //接下來就是按照官方的文檔，對(duì)你的網(wǎng)站進(jìn)行各種創(chuàng)造啦

項(xiàng)目部署的話我使用的是github，具體操作請(qǐng)參照官方文檔

示例網(wǎng)站

github地址

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

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vuepress

相關(guān)文章

Vue2.X和Vue3.0數(shù)據(jù)響應(yīng)原理變化的區(qū)別
這篇文章主要介紹了Vue2.X和Vue3.0數(shù)據(jù)響應(yīng)原理變化的區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
Vue.js 中的實(shí)用工具方法【推薦】
這篇文章主要介紹了Vue.js 中的實(shí)用工具方法，本文是小編日常開發(fā)中常用的一些工具方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-07-07
vue+watermark-dom實(shí)現(xiàn)頁面水印效果(示例代碼)
watermark.js 是基于 DOM 對(duì)象實(shí)現(xiàn)的 BS 系統(tǒng)的水印,確保系統(tǒng)保密性,安全性,降低數(shù)據(jù)泄密風(fēng)險(xiǎn),簡單輕量,支持多屬性配置,本文將通過 vue 結(jié)合 watermark-dom 庫,教大家實(shí)現(xiàn)簡單而有效的頁面水印效果,感興趣的朋友跟隨小編一起看看吧
2024-07-07
vue mounted()函數(shù)中無法定義初始化樣式的原因分析
這篇文章主要介紹了vue mounted()函數(shù)中無法定義初始化樣式的原因分析,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
關(guān)于vue項(xiàng)目一直出現(xiàn) sockjs-node/info?t=XX的解決辦法
sockjs-node 是一個(gè)JavaScript庫,提供跨瀏覽器JavaScript的API,創(chuàng)建了一個(gè)低延遲、全雙工的瀏覽器和web服務(wù)器之間通信通道,這篇文章主要介紹了vue項(xiàng)目一直出現(xiàn) sockjs-node/info?t=XX的解決辦法,需要的朋友可以參考下
2023-12-12
vue實(shí)現(xiàn)簡易圖片左右旋轉(zhuǎn),上一張,下一張組件案例
這篇文章主要介紹了vue實(shí)現(xiàn)簡易圖片左右旋轉(zhuǎn),上一張,下一張組件案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
Vue3.2+Ts組件之間通信的實(shí)現(xiàn)
本文主要介紹了Vue3.2+Ts組件之間通信的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
Vue實(shí)現(xiàn)Excel本地下載及上傳的方法詳解
相信大家在項(xiàng)目中經(jīng)常會(huì)遇到一些上傳下載文件的相關(guān)功能。這篇文章將為大家介紹一下Vue實(shí)現(xiàn)Excel本地下載及上傳的示例代碼，需要的可以參考一下
2022-07-07
el-menu修改item顏色的實(shí)現(xiàn)
本文主要介紹了el-menu修改item顏色的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
使用 vue-i18n 切換中英文效果
這篇文章主要介紹了使用 vue-i18n 切換中英文效果，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-05-05