目錄
- 前言
- 準備作業
- 下載導航源代碼
- 安裝依賴項
- 查看網站
- 自定義網站內容
- 增加修改一級分類
- 撰寫二級分類內容
- 生成可發布內容
- 部署網站
- 附件
前言
我就是那個零基礎小白,前端、網頁什么的我都沒有學習過,只是有一點C#的Winform編程作業經驗,做這些東西只是興趣使然,遇到不懂的地方也只能自己找資料自學,
本文只是想記錄一下自己的學習經歷,也為其他有興趣的同胞提供一些參考,
使用的是開源專案geekape/geek-navigation,這是最終的導航網站 猿導航 http://quyonghu.cn,
準備作業
開始之前,你必須準備好下面的作業:
- 安裝了node.js、npm(安裝程序參考安裝Node.js和npm)
- 安裝了git for windows(或者其它git客戶端)
- 代碼編輯軟體(我用的是VS2017)
- 電腦連網,網速不能太差
上面這些工具是我在折騰個人博客網站和GitBook時安裝好的,安裝問題可以網上查找教程,這里不在贅述,
我安裝的node.js是node-v10.16.0-x64、Git客戶端是PortableGit-2.22.0-64,下載鏈接在文章末尾,
有感而發:個人博客網站現處于無限期暫停狀態,主要原因是技術不夠會浪費很多時間走彎路、需求也不迫切,GitBook專案處于無限期延遲狀態,一方面是我太懶了一拖再拖,一方面也沒有想好寫什么,目前靠寫博客積累經驗,這里對軟體進行歸納整理也是為了以后重啟專案方便,做事情不能只有三分鐘熱度啊,哎!——2019-12-29
下載導航源代碼
安裝好PortableGit后會有一個git-cmd.exe,后面的所有命令都在這里面執行,
我使用的導航站原始碼是geek-navigation靜態導航(JSON檔案)版本,參照github上面的使用教程,運行命令:
// 1. 下載原始碼
git clone https://github.com/geekape/geek-navigation/tree/json-navigation
我的運行結果如下:
D:\blog\PortableGit>git clone https://github.com/geekape/geek-navigation/tree/js
on-navigation
Cloning into 'json-navigation'...
fatal: repository 'https://github.com/geekape/geek-navigation/tree/json-navigati
on/' not found
提示找不到,只能到github手動下載了,為了方便我的原始碼放在D盤根目錄,
安裝依賴項
參照github上面的使用教程,運行命令(記得要先進入原始碼的目錄):
//進入原始碼目錄
cd D:\geek-navigation-json-navigation
// 2.安裝依賴,進入根目錄
npm install 或 cnpm install
我的運行結果如下:
D:\blog\PortableGit>
D:\blog\PortableGit>cd D:\geek-navigation-json-navigation
D:\geek-navigation-json-navigation>npm install
npm WARN deprecated [email protected]: core-js@<3.0 is no longer maintained and not
recommended for usage due to the number of issues. Please, upgrade your depende
ncies to the actual version of core-js@3.
npm WARN deprecated [email protected]: CircularJSON is in maintenance only, fl
atted is its successor.
> [email protected] install D:\geek-navigation-json-navigation\node_modules\yorkie
> node bin/install.js
setting up Git hooks
can't find .git directory, skipping Git hooks installation
> [email protected] install D:\geek-navigation-json-navigation\node_modules\node-
sass
> node scripts/install.js
Downloading binary from https://github.com/sass/node-sass/releases/download/v4.1
3.0/win32-x64-64_binding.node
Download complete ] - :
Binary saved to D:\geek-navigation-json-navigation\node_modules\node-sass\vendor
\win32-x64-64\binding.node
Caching binary to C:\Users\admin\AppData\Roaming\npm-cache\node-sass\4.13.0\win3
2-x64-64_binding.node
> [email protected] postinstall D:\geek-navigation-json-navigation\node_modules\cor
e-js
> node postinstall || echo "ignore"
Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfill
ing JavaScript standard library!
The project needs your help! Please consider supporting of core-js on Open Colle
ctive or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock
Also, the author of core-js ( https://github.com/zloirock ) is looking for a goo
d job -)
> [email protected] postinstall D:\geek-navigation-json-navigation\node_modules\ejs
> node ./postinstall.js
Thank you for installing EJS: built with the Jake JavaScript build tool (https:/
/jakejs.com/)
> [email protected] postinstall D:\geek-navigation-json-navigation\node_modules\n
ode-sass
> node scripts/build.js
Binary found at D:\geek-navigation-json-navigation\node_modules\node-sass\vendor
\win32-x64-64\binding.node
Testing binary
Binary is fine
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fse
vents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}
)
added 1486 packages from 980 contributors and audited 25243 packages in 583.07s
found 0 vulnerabilities
安裝成功,我用了大概20分鐘,下面就可以查看網站了,
查看網站
參照github上面的使用教程,運行命令:
// 3. 運行
npm run serve
同樣要先進入原始碼的目錄,緊接著上一步的可以直接運行命令,
我的運行結果:
D:\geek-navigation-json-navigation>npm run serve
> [email protected] serve D:\geek-navigation-json-navigation
> vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin
WARNING Compiled with 2 warnings 5:45:37 PM
Module Warning (from ./node_modules/eslint-loader/index.js):
error: 'Mock' is defined but never used (no-unused-vars) at src\main.js:5:8:
3 | import App from './App.vue'
4 | import router from "./router"
> 5 | import Mock from "./mock"
| ^
6 | import localStorage from "./utils/localStorage"
7 | const Storage = new localStorage('NAV')
8 | Vue.config.productionTip = false
error: Mixed spaces and tabs (no-mixed-spaces-and-tabs) at src\main.js:22:2:
20 | new Vue({
21 | router,
> 22 | render: h => h(App)
| ^
23 | }).$mount('#app')
24 |
2 errors found.
Module Warning (from ./node_modules/eslint-loader/index.js):
error: 'index' is defined but never used (vue/no-unused-vars) at src\pages\Index
.vue:18:57:
16 | active-text-color="#fff"
17 | >
> 18 | <el-submenu :index="item.name" v-for="(item,index) in newData
List" :key="item.name">
| ^
19 | <template slot="title">
20 | <i :class="item.icon"></i>
21 | <span slot="title">{{item.name}}</span>
error: 'idx' is defined but never used (vue/no-unused-vars) at src\pages\Index.v
ue:23:58:
21 | <span slot="title">{{item.name}}</span>
22 | </template>
> 23 | <el-menu-item :index="nav._id" v-for="(nav,idx) in item.dat
a" :key="nav._id">
| ^
24 | <a :href=https://www.cnblogs.com/timefiles/p/"`#${nav.classify}`">
25 |
26 | {{nav.classify}}
2 errors found.
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
App running at:
- Local: http://localhost:8080
- Network: http://192.168.1.101:8080
Note that the development build is not optimized.
To create a production build, run npm run build.
接下來直接在瀏覽器打開localhost:8080,查看網站內容,
自定義網站內容
增加修改一級分類
找到geek-navigation-json-navigation\src\pages目錄下的Index.vue檔案,打開后撰寫自己的一級分類,我是用VS2017打開檔案的,理論上可以用任何一款代碼編輯器打開它,
在開始位置撰寫自己網站的名稱,我的是“猿導航”,內容如下:
<template>
<section class="index container">
<div class="left-bar" :style="{left: isLeftbar ? 0 : '-249px'}">
<div class="title">
<img class="icon-logo" src=https://www.cnblogs.com/timefiles/p/"/favicon.ico">
猿導航
