Vuepress生成文檔部署到gitee.io的注意事項(xiàng)及說明
Vuepress生成文檔部署到gitee.io注意事項(xiàng)
1.靜態(tài)資源要放在.vuepress/public目錄下，比如創(chuàng)建一個(gè)assets/img/目錄。把圖片文件放在目錄下面。
2.本地開發(fā)的時(shí)候，每次更新文件后，需要運(yùn)行 vuepress dev .命令重新發(fā)布。
3.運(yùn)行vuepress build .命令會(huì)編譯出來一個(gè)靜態(tài)文件的dist目錄。只要把這個(gè)目錄的東西push到gitee。
4.在gitee里創(chuàng)建一個(gè)新的倉(cāng)庫。比如https://gitee.com/xxxxxx/repo.git倉(cāng)庫的話，通過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è)模板的名稱，vuepress-theme-xxx
然后編輯index.js模板的入口文件，這里只要設(shè)定繼承默認(rèn)模板就行了。其他開發(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博客問題
首先下載VuePress和博客主題
cnpm i vuepress @vuepress-reco/theme-cli –g
進(jìn)入文件夾“G:\GiteeRepositories”，并打開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中添加一行代碼，用來設(shè)置站點(diǎn)根路徑：
base: '/lijiang_blog/' #這里的“Lijiang_blog”為等會(huì)在gitee上創(chuàng)建的倉(cāng)庫名
然后打包：npm run build
接著去碼云新建倉(cāng)庫：https://gitee.com/projects/new
切記：倉(cāng)庫名要小寫?。?/strong>
gitee上創(chuàng)建倉(cāng)庫后，再去本地磁盤初始化一個(gè)文件夾，再將此文件夾連接到gitee倉(cāng)庫。
依次執(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)目
這樣就可以訪問了。這是我部署的：http://lidajiang.gitee.io/lijiang_blog/
后面在本地添加文章后，將項(xiàng)目推送到gitee，點(diǎn)服務(wù)按鈕，在打開的頁面中點(diǎn)擊更新就行
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用Vite搭建vue3+TS項(xiàng)目的實(shí)現(xiàn)步驟
本文主要介紹了使用Vite搭建vue3+TS項(xiàng)目的實(shí)現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
使用vue-router切換組件時(shí)使組件不銷毀問題
這篇文章主要介紹了使用vue-router切換組件時(shí)使組件不銷毀問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue的hover/click事件如何動(dòng)態(tài)改變顏色和背景色
這篇文章主要介紹了Vue的hover/click事件如何動(dòng)態(tài)改變顏色和背景色問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了解讀Vue-loader的相關(guān)知識(shí)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
深入淺析Vue不同場(chǎng)景下組件間的數(shù)據(jù)交流
探通過本篇文章給大家探討不同場(chǎng)景下組件間的數(shù)據(jù)“交流”的Vue實(shí)現(xiàn)方法，感興趣的朋友一起看看吧2017-08-08
el-table-column疊加el-popover使用示例小結(jié)
el-table-column有一列展示多個(gè)tag信息,實(shí)現(xiàn)點(diǎn)擊tag展示tag信息以及tag對(duì)應(yīng)的詳細(xì)信息,本文通過示例代碼介紹el-table-column疊加el-popover使用示例小結(jié),感興趣的朋友跟隨小編一起看看吧2024-04-04
vue出現(xiàn)Uncaught SyntaxError:Unexpected token問題及解決
這篇文章主要介紹了vue出現(xiàn)Uncaught SyntaxError:Unexpected token問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
如何使用vue slot創(chuàng)建一個(gè)模態(tài)框的實(shí)例代碼
這篇文章主要介紹了如何使用vue slot創(chuàng)建一個(gè)模態(tài)框,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-05-05
vue3使用Electron打包成exe的方法與打包報(bào)錯(cuò)解決
在前端開發(fā)中,Electron是一種常用的工具,它允許開發(fā)者使用Web技術(shù)構(gòu)建桌面應(yīng)用程序,本文主要介紹了vue3使用Electron打包成exe的方法與打包報(bào)錯(cuò)解決,具有一定的參考價(jià)值,感興趣的可以了解一下2024-06-06
解決element-ui里的下拉多選框 el-select 時(shí),默認(rèn)值不可刪除問題
這篇文章主要介紹了解決element-ui里的下拉多選框 el-select 時(shí),默認(rèn)值不可刪除問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08