當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

簡易版運(yùn)行

1. 下載簡易版

地址：https://gitee.com/gy297879328/vue_press_code

2. 編譯啟動(dòng)項(xiàng)目

## 在解壓目錄也就是package.json文件的當(dāng)前目錄下執(zhí)行命令 ## 編譯運(yùn)行的命令 npm install ## 啟動(dòng)當(dāng)前項(xiàng)目 npm run dev ##打開 http://localhost:8080/ 即可看到一個(gè) Vue 文檔風(fēng)格的網(wǎng)站

搭建流程

1. 安裝node.js

Node.js 版本 >= 8.6

1、安裝Node.js，打開官網(wǎng)(http://nodejs.cn/)，點(diǎn)擊下載相應(yīng)系統(tǒng)的文件。（Windows / MacOs）

安裝文件下載完成后，運(yùn)行并點(diǎn)擊下一步直至安裝結(jié)束（期間安裝的位置可自行選擇)

在終端（Windows cmd.exe，Macos 終端）執(zhí)行指令

npm -version

配置NPM淘寶鏡像，終端內(nèi)執(zhí)行

npm config set registry https://registry.npm.taobao.org #之后再執(zhí)行(檢查配置的是否正確) npm config get registry

2. 安裝yarn

## 1.運(yùn)行命令 npm i yarn -g##-i：install ##-g：全局安裝（global）,使用 -g 或 --global## 2. 輸入yarn -version 可以看到版本號(hào)，說明安裝成功了。我們就可以在項(xiàng)目中像使用npm一樣使用yarn

3. 起步操作

## 參考 https://www.vuepress.cn/guide/getting-started.html ## 1.新建的目錄進(jìn)入prodoc makedir mydoc makedir prodoc cd prodoc ## 2.全局安裝 VuePress yarn add -D vuepress ## 3.初始化生成package.json yarn init -y ## 4.創(chuàng)建你的第一篇文檔（在prodoc目錄里新建） mkdir docs && echo '# Hello VuePress' > docs/README.md ## 5.添加主題 (在docs/README.md中添加) ## https://www.vuepress.cn/theme/default-theme-config.html 參考 --- home: true heroImage: /hero.png heroText: Hero 標(biāo)題 tagline: Hero 副標(biāo)題 actionText: 快速上手 → actionLink: /zh/guide/ features: - title: 簡潔至上details: 以 Markdown 為中心的項(xiàng)目結(jié)構(gòu)，以最少的配置幫助你專注于寫作。 - title: Vue驅(qū)動(dòng)details: 享受 Vue + webpack 的開發(fā)體驗(yàn)，在 Markdown 中使用 Vue 組件，同時(shí)可以使用 Vue 來開發(fā)自定義主題。 - title: 高性能details: VuePress 為每個(gè)頁面預(yù)渲染生成靜態(tài)的 HTML，同時(shí)在頁面被加載的時(shí)候，將作為 SPA 運(yùn)行。 footer: MIT Licensed | Copyright ? 2018-present Evan You --- ## 6.啟動(dòng) yarn docs:dev # npm run docs:dev ## VuePress 會(huì)在 http://localhost:8080 (opens new window) 啟動(dòng)一個(gè)熱重載的開發(fā)服務(wù)器。

4. 導(dǎo)航目錄設(shè)置

4.1 設(shè)置logo

## 1.新建about目錄并新建README.md文檔（docs中） ## 2.重啟服務(wù)后訪問鏈接 localhost:8080/about 即可看到

注意: docs根目錄的md文件會(huì)編譯成.html文件(無關(guān)緊要，可無視)

## https://www.vuepress.cn/theme/default-theme-config.html#%E5%AF%BC%E8%88%AA%E6%A0%8F 參考鏈接 ## 3. 新建目錄 .vuepress 在.vuepress下新建js config.js （docs中） ## 4. 在config中新增內(nèi)容 module.exports = {themeConfig: {logo: '/assets/img/logo.png',} } ## 5. 新建public文件因?yàn)槭枪操Y源目錄（默認(rèn)規(guī)則詳細(xì)查看 https://www.vuepress.cn/guide/directory-structure.html） ## 在 .vuepress 下新建 public 目錄 ## 在public下新建/assets/img目錄存放Logo

4.2 導(dǎo)航欄鏈接

## https://www.vuepress.cn/theme/default-theme-config.html#%E5%AF%BC%E8%88%AA%E6%A0%8F 參考路徑 ## 在config.js中配置 themeConfig: {nav: [{ text: 'Home', link: '/' },{ text: 'Guide', link: '/guide/' },{ text: 'External', link: 'https://google.com' },]}

5. 側(cè)邊欄

## https://www.vuepress.cn/theme/default-theme-config.html#%E4%BE%A7%E8%BE%B9%E6%A0%8F 自動(dòng)生成參考路徑 ## https://www.vuepress.cn/theme/default-theme-config.html#%E4%BE%A7%E8%BE%B9%E6%A0%8F%E5%88%86%E7%BB%84 側(cè)邊欄分組參考路徑

5.1 自動(dòng)生成

// .vuepress/config.js module.exports = {themeConfig: {sidebar: 'auto'} }

5.2 側(cè)邊欄分組

//測試?yán)?/span> module.exports = {themeConfig: {sidebar: ['','about',{title: '測邊框分層', // 必要的path: '/morethread/', // 可選的, 標(biāo)題的跳轉(zhuǎn)鏈接，應(yīng)為絕對路徑且必須存在collapsable: false, // 可選的, 默認(rèn)值是 true,sidebarDepth: 1, // 可選的, 默認(rèn)值是 1children: ['/morethread/bf','/morethread/test1',]}]} } //按照路徑分組 //https://www.vuepress.cn/theme/default-theme-config.html#%E5%A4%9A%E4%B8%AA%E4%BE%A7%E8%BE%B9%E6%A0%8F module.exports = {themeConfig: {sidebar: {'/morethread/': ['', /* /foo/ */'bf', /* /foo/one.html */'test1' /* /foo/two.html */],'/about/': ['', /* /bar/ */'test1' /* /bar/three.html */],}} } //自動(dòng)生成插件 https://github.com/shanyuhai123/vuepress-plugin-auto-sidebar //鏈接 https://docs.shanyuhai.top/

6. SEO

// https://www.vuepress.cn/config/#%E5%9F%BA%E6%9C%AC%E9%85%8D%E7%BD%AE 參考文檔 // https://favicon.io/emoji-favicons/ 選一個(gè)ico圖標(biāo) // .vuepress/config.js module.exports = {title:"小光頭的java日記",description:"小光頭的java日記,java筆記,java面試",head: [['meta', { name: 'Keywords', content: '小光頭的java日記,java筆記,java面試' }],['meta', { name: 'description', content: '小光頭的java日記用心分享' }],['link', { rel: 'icon', href: '/assets/img/favicon.ico' }]] }

7. 最后更新時(shí)間

// https://www.vuepress.cn/theme/default-theme-config.html#%E6%9C%80%E5%90%8E%E6%9B%B4%E6%96%B0%E6%97%B6%E9%97%B4 參考 //第一種 // .vuepress/config.js module.exports = {themeConfig: {lastUpdated: 'Last Updated', // string | boolean} } // 第二種使用日期插件 //執(zhí)行命令本地安裝moment yarn add moment// .vuepress/config.jsplugins: [['@vuepress/last-updated',{transformer: (timestamp) => {moment.locale("zh-cn");return moment(timestamp).fromNow("LLLL")}}]],

8. 部署gitee

// https://www.vuepress.cn/guide/deploy.html#github-pages 文檔// docs/.vuepress/config.js// docs/ 1.修改 package.json {"name": "prodoc","version": "1.0.0","main": "index.js","repository": "https://github.com/gy297879328/prodoc.git","author": "gy <297879328@qq.com>","license": "MIT","scripts": {"docs:dev": "vuepress dev docs","docs:build": "vuepress build docs","deploy": "bash deploy.sh"},"devDependencies": {"@vuepress/back-to-top": "^1.5.0","vuepress": "^1.7.1"} } // docs/.vuepress/config.js// 2. 修改config.js 添加base屬性上傳到github的庫名 module.exports = {title:"小光頭的java日記",description:"小光頭的java日記,java筆記,java面試",base:"/vuepresstest/", } // docs 3. 新建 deploy.sh 文件 #!/usr/bin/env sh# 確保腳本拋出遇到的錯(cuò)誤 set -e# 生成靜態(tài)文件 npm run docs:build# 進(jìn)入生成的文件夾 cd docs/.vuepress/dist# 如果是發(fā)布到自定義域名 # echo 'www.example.com' > CNAMEgit init git add -A git commit -m 'deploy'# 如果發(fā)布到 https://<USERNAME>.github.io # git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master# 如果發(fā)布到 https://<USERNAME>.github.io/<REPO> git push -f git@github.com:gy297879328/vuepresstest.git master:gh-pagescd - // docs 4. 執(zhí)行編譯命令會(huì)生成html文件在（docs/.vuepress/dist）目錄下上傳到服務(wù)器即可 npm run docs:build

9. vssue評論

9.1 安裝到個(gè)體

// https://vssue.js.org/zh/guide/getting-started.html 官網(wǎng)//1.獲取vssue的授權(quán)碼（提前登陸自己的github賬號(hào)） https://github.com/settings/developers ## 2.本地安裝 yarn add @vssue/vuepress-plugin-vssue yarn add @vssue/api-github-v4 // 3.修改 docs/.vuepress/config.js//plugins: {'@vuepress/back-to-top':true,'@vssue/vuepress-plugin-vssue': {// 設(shè)置 `platform` 而不是 `api`platform: 'github-v4',// 其他的 Vssue 配置owner: 'gy297879328',//github用戶名repo: 'vuepresstest',//需要評論的倉庫clientId: '734e36fe47755fb32027',clientSecret: 'aa9953c892dc6235c8d95d622d2e2dc741247695',autoCreateIssue:true //自動(dòng)初始化倉庫},}, //4. 修改全局配置 //https://vssue.js.org/zh/options/#autocreateissue

9.2 全局配置

// https://blog.csdn.net/weixin_43742708/article/details/109545561 參考博客 1. 首先我們先在 .vuepress 文件目錄下新建 theme,再在該目錄下新建layouts目錄： 2. 然后下載git clone https://gitee.com/mirrors/VuePress.git 或者(本地的node_modules\@vuepress\theme-default模塊的也可以) 3. 進(jìn)入該文件的 packages\@vuepress\theme-default\layouts\ 把 Layout.vue拷貝到我們剛才新建的 Layouts目錄下。 4. 進(jìn)入該文件的 packages\@vuepress\theme-default\目錄下把 util文件夾，也拷貝到我們的 theme文件夾下。 5. 接下來在我們的theme 目錄下新建index.js,并添加如下配置： module.exports = {extend: '@vuepress/theme-default' }

// 6.修改 Layout.vue 文件

10. 百度統(tǒng)計(jì)插件

1. 獲取代碼

## https://blog.csdn.net/qq_39367226/article/details/107449882 ## 添加百度統(tǒng)計(jì)登陸后獲取代碼 https://tm.baidu.com/ <script> var _hmt = _hmt || []; (function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?0cbb5bf425c624587e0804d2122aea84";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script>

2. 修改config.js

// 配置給 head屬性 // 添加百度統(tǒng)計(jì)["script",{},`var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?0cbb5bf425c624587e0804d2122aea84";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();`]

3.修改enhanceApp

// .vuepress/enhanceApp.js 沒有就新建 export default ({ router }) => {/*** 路由切換事件處理*/router.beforeEach((to, from, next) => {console.log("切換路由", to.fullPath, from.fullPath);//觸發(fā)百度的pv統(tǒng)計(jì)if (typeof _hmt != "undefined") {if (to.path) {_hmt.push(["_trackPageview", to.fullPath]);console.log("上報(bào)百度統(tǒng)計(jì)", to.fullPath);}}// continuenext();}); };

11. 自動(dòng)生成側(cè)邊欄

## https://github.com/shanyuhai123/vuepress-plugin-auto-sidebar ## 1.下載依賴 yarn add vuepress-plugin-auto-sidebar ## 2.添加插件 // .vuepress/config.js"vuepress-plugin-auto-sidebar": {}

12. 美化插件(自選)

1. 鼠標(biāo)點(diǎn)擊特效插件

//鼠標(biāo)點(diǎn)擊特效先安裝在配置， // 1. 下載: npm install vuepress-plugin-cursor-effects // 2. .vuepress/config.js plugins 中"cursor-effects":{size: 3, // size of the particle, default: 2shape: ['circle'], // shape of the particle, default: 'star'zIndex: 999999999 // z-index property of the canvas, default: 999999999}

2. 復(fù)制插件

## https://www.npmjs.com/package/vuepress-plugin-copyright yarn add vuepress-plugin-copyright ## .vuepress/config.js plugins 中['copyright',{minLength: 10,noCopy: true,},]

3. 動(dòng)態(tài)標(biāo)題

// 1. 下載: yarn add vuepress-plugin-dynamic-title // 2. .vuepress/config.js plugins 中"dynamic-title": {showIcon: "/assets/img/logo.png",showText: "(/≧▽≦/)你來啦！",hideIcon: "/assets/img/favicon.ico",hideText: "(●—●)喔喲，崩潰啦！",recoverTime: 2000}

4. 驗(yàn)證碼的方式(待研究)

https://segmentfault.com/a/1190000038222412

5. 新增點(diǎn)擊的富強(qiáng)愛國顯示

5.1 新建js

// .vuepress\public\js\MouseClickEffect.js var a_idx = 0;function getRandom(max, min) {return Math.floor(Math.random() * (max - min + 1) + min); } jQuery(document).ready(function ($) {$("body").click(function (e) {var a = new Array("富強(qiáng)", "民主", "文明", "和諧", "自由", "平等", "公正", "法治", "愛國", "敬業(yè)", "誠信", "友善");var $i = $("<span/>").text(a[a_idx]);a_idx = (a_idx + 1) % a.length;var x = e.pageX,y = e.pageY;$i.css({"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,"top": y - 20,"left": x,"position": "absolute","font-weight": "bold","color": `rgb(${getRandom(255,0)},${getRandom(255,0)},${getRandom(255,0)})`,"user-select": 'none',"cursor": 'default'});$("body").append($i);$i.animate({"top": y - 180,"opacity": 0},1500,function () {$i.remove();});}); });

5.2 配置config

// 配置給 head屬性 // 引入jquery["script", {"language": "javascript","type": "text/javascript","src": "https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"}],// 引入鼠標(biāo)點(diǎn)擊腳本["script", {"language": "javascript","type": "text/javascript","src": "/js/MouseClickEffect.js"}],

13.部署發(fā)布

編譯文件

在根目錄下執(zhí)行 npm run build 命令會(huì)將md文檔編譯成html靜態(tài)頁（默認(rèn)生成在docs/.vuepress/dist下）

13. 服務(wù)器部署

13.1.1 上傳文件

將靜態(tài)頁放到 /home/vue_press 目錄下

13.1.2 安裝nginx

下載nginx

nginx下載地址：https://nginx.org/download/

## 1.解壓 tar -zxvf nginx nginx-1.18.0 ## 2.安裝gcc命令 yum -y install gcc pcre-devel zlib-devel openssl openssl-devel ## 3.編譯 ./configure # make make make install ## 4.啟動(dòng)日志會(huì)默認(rèn)生成到 /usr/local/nginx/sbin/nginx 下

修改nginx.conf的配置文件(/usr/local/src/vue_press/nginx-1.18.0/conf)

server {listen 80;server_name localhost;#charset koi8-r;#access_log logs/host.access.log main;# root 配置讀取的路徑location / {root /home/vue_press/; index index.html index.htm;}}

13.2 gitee上部署

在gitee上部署，需要修改 docs.vuepress.config.js中的base屬性，里面需要填寫成新建庫的名字

base: '/', // 部署到github相關(guān)的配置 ## 修改成 base: '/vue_press_code/', // 部署到github相關(guān)的配置

將生成的靜態(tài)頁上傳到倉庫中

點(diǎn)擊服務(wù)中的Gitee Pages選項(xiàng)

上線獲取地址

13.3 github上部署

在github上部署，需要修改 docs.vuepress.config.js中的base屬性，里面需要填寫成新建庫的名字

靜態(tài)頁上傳到github上

點(diǎn)擊settings下拉找到github pages頁面

分支必須選擇 main
save以后就會(huì)出現(xiàn)地址

安裝的yarn源(了解即可)

## 全局環(huán)境 yarn add -D vuepress yarn add moment ## 評論插件 yarn add @vssue/vuepress-plugin-vssue yarn add @vssue/api-github-v4## 自動(dòng)生成測邊框插件 npm i vuepress-plugin-auto-sidebar -D##鼠標(biāo)點(diǎn)擊特效先安裝在配置， npm install vuepress-plugin-cursor-effects

重要

總結(jié)

以上是生活随笔為你收集整理的最新最全vuepress零基础搭建(github搭建+新增插件)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：最新最全的java多线程基础总结(上)
下一篇： java 最新sql注入原因以及预防方案