Vuepress生成文檔部署到gitee.io的注意事項(xiàng)及說(shuō)明
Vuepress生成文檔部署到gitee.io注意事項(xiàng)
1.靜態(tài)資源要放在.vuepress/public目錄下，比如創(chuàng)建一個(gè)assets/img/目錄。把圖片文件放在目錄下面。
2.本地開(kāi)發(fā)的時(shí)候，每次更新文件后，需要運(yùn)行 vuepress dev .命令重新發(fā)布。
3.運(yùn)行vuepress build .命令會(huì)編譯出來(lái)一個(gè)靜態(tài)文件的dist目錄。只要把這個(gè)目錄的東西push到gitee。
4.在gitee里創(chuàng)建一個(gè)新的倉(cāng)庫(kù)。比如https://gitee.com/xxxxxx/repo.git倉(cāng)庫(kù)的話，通過(guò)gitee pages服務(wù)會(huì)生成一個(gè)http://xxxxxx.gitee.io/repo的靜態(tài)文件網(wǎng)站。注意vuepress工程的config.js配置里必須配置base:'/repo/'設(shè)定基礎(chǔ)目錄。
追述：
1.#vuepress eject把默認(rèn)theme下載到項(xiàng)目的目錄里。
這樣project\.vuepress\目錄下會(huì)多一個(gè)theme的目錄，里面是模板文件。
關(guān)鍵一：要?jiǎng)?chuàng)建一個(gè)package.json，
{
"name": "vuepress-theme-xxx",
"version": "1.4.3",
"description": "a theme for vuepress",
"main": "index.js"
}里面定義這個(gè)模板的名稱(chēng)，vuepress-theme-xxx
然后編輯index.js模板的入口文件，這里只要設(shè)定繼承默認(rèn)模板就行了。其他開(kāi)發(fā)模板參考vuepress官網(wǎng)
const path = require('path')
// Theme API.
module.exports = {
extend: '@vuepress/theme-default'
}這樣，模板就搭建好了，修改模板就去改layouts目錄下的layout.vue和components目錄下的組件就可以。
3.使用
修改.vuepress目錄下的config.js，vuepress的入口文件。
module.exports = {
theme:"xxx" //這里因?yàn)榍懊婺０迮渲美铮琾ackage.json里定義的theme名為"vuepress-theme-xxx"，前面的vuepress-theme可以省略。
}在gitee中部署VuePress博客問(wèn)題
首先下載VuePress和博客主題
cnpm i vuepress @vuepress-reco/theme-cli –g
進(jìn)入文件夾“G:\GiteeRepositories”，并打開(kāi)dos窗口
theme-cli init lijiang_blog #項(xiàng)目名 cd lijiang_blog cnpm i #安裝依賴 cnpm run dev #項(xiàng)目運(yùn)行
（注意：這里有三種可以選，分別是blog，doc,和afternoon xxx，這里選擇blog就行。afternoon xxx這個(gè)是一個(gè)成熟的示例，需要的話可以單獨(dú)下載參考其代碼。doc和blog區(qū)別不大）
然后打包，注意，在打包之前，一定要在G:\GiteeRepositories\lijiang_blog\docs\.vuepress中的config.js中添加一行代碼，用來(lái)設(shè)置站點(diǎn)根路徑：
base: '/lijiang_blog/' #這里的“Lijiang_blog”為等會(huì)在gitee上創(chuàng)建的倉(cāng)庫(kù)名
然后打包：npm run build
接著去碼云新建倉(cāng)庫(kù)：https://gitee.com/projects/new
切記：倉(cāng)庫(kù)名要小寫(xiě)?。?/strong>
gitee上創(chuàng)建倉(cāng)庫(kù)后，再去本地磁盤(pán)初始化一個(gè)文件夾，再將此文件夾連接到gitee倉(cāng)庫(kù)。
依次執(zhí)行以下的命令
git init git remote add origin “剛剛創(chuàng)建的項(xiàng)目的http://gitee.com/xxx” git add . git commit –m ‘a(chǎn)sdf' git push origin master –u
點(diǎn)擊啟動(dòng)按鈕后，不到半分鐘就能部署好項(xiàng)目
這樣就可以訪問(wèn)了。這是我部署的：http://lidajiang.gitee.io/lijiang_blog/
后面在本地添加文章后，將項(xiàng)目推送到gitee，點(diǎn)服務(wù)按鈕，在打開(kāi)的頁(yè)面中點(diǎn)擊更新就行
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue使用canvas實(shí)現(xiàn)移動(dòng)端手寫(xiě)簽名
這篇文章主要為大家詳細(xì)介紹了基于vue使用canvas實(shí)現(xiàn)移動(dòng)端手寫(xiě)簽名，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
Vue el使用el-checkbox-group復(fù)選框進(jìn)行單選框方式
這篇文章主要介紹了Vue el使用el-checkbox-group復(fù)選框進(jìn)行單選框方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue對(duì)Element中的el-tag添加@click事件無(wú)效的解決
本文主要介紹了Vue對(duì)Element中的el-tag添加@click事件無(wú)效的解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
Vue如何實(shí)現(xiàn)el-table多選樣式變?yōu)閱芜x效果
這篇文章主要介紹了Vue如何實(shí)現(xiàn)el-table多選樣式變?yōu)閱芜x效果,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
在Vue應(yīng)用程序中,路由組件是構(gòu)建單頁(yè)應(yīng)用的關(guān)鍵部分,傳遞參數(shù)給路由組件可以讓我們動(dòng)態(tài)地展示內(nèi)容,處理用戶輸入,以及實(shí)現(xiàn)各種交互功能,本文就給大家介紹了六種Vue路由組件傳遞參數(shù)場(chǎng)景,需要的朋友可以參考下2023-09-09
vue表單驗(yàn)證rules及validator驗(yàn)證器的使用方法實(shí)例
在vue開(kāi)發(fā)中,難免遇到各種表單校驗(yàn),下面這篇文章主要給大家介紹了關(guān)于vue表單驗(yàn)證rules及validator驗(yàn)證器使用的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
本文主要介紹了vue3 ref 和reactive的區(qū)別詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
這篇文章主要介紹了vue項(xiàng)目中如何添加枚舉，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細(xì)介紹了vue3.0實(shí)現(xiàn)下拉菜單的封裝代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue實(shí)現(xiàn)實(shí)時(shí)上傳文件進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)實(shí)時(shí)上傳文件進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03