前言
我就是那個零基礎小白，前端、網頁什么的我都沒有學習過，只是有一點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 core-js@2.6.10: 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 circular-json@0.3.3: CircularJSON is in maintenance only, fl
atted is its successor.
> yorkie@2.0.0 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
> node-sass@4.13.0 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
> core-js@2.6.10 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 -)
> ejs@2.7.4 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/)
> node-sass@4.13.0 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: fsevents@1.2.9 (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
> geek-navigation@0.1.0 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="`#${nav.classify}`">
25 | <i :class="nav.icon"></i>
26 | <span slot="title">{{nav.classify}}</span>
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="/favicon.ico">
<span>猿導航</span>
</div>
編寫一級分類，源碼里面有四個分類，我只是改了分類名稱、變量名稱。代碼如下（可以通過關鍵詞查找快速定位到代碼位置）：
computed: {
newDataList() {
const arr = [];
let personal = {};
let net = {};
let community = {};
let design = {};
// 個人
personal.name = "個人";
personal.icon = "csz czs-circle";
personal.data = this.data.filter(
item => item.classify.indexOf("［個人］") != -1
);
arr.push(personal);
// .NET
net.name = ".NET";
net.icon = "csz czs-square";
net.data = this.data.filter(
item => item.classify.indexOf("［.NET］") != -1
);
arr.push(net);
// 社區
community.name = "社區";
community.icon = "csz czs-camber";
community.data = this.data.filter(
item => item.classify.indexOf("［社區］") != -1
);
arr.push(community);
// 設計
design.name = "設計";
design.icon = "csz czs-triangle";
design.data = this.data.filter(
item => item.classify.indexOf("［設計］") != -1
);
arr.push(design);
return arr;
}
編寫二級分類內容
二級分類內容就是導航數據的內容， 所有導航數據在根目錄下public/nav.json里，在某個分類下新增sites數據就可以了，看結構就知道的。內容如下：
[
{
"_id": "5ce77a75afdec884fab9599d",
"classify": "［個人］常用網站",
"icon": "czs-cup-l",
"sites": [
{
"name": "菜鳥教程",
"href": "https://www.runoob.com/",
"desc": "runoob - 菜鳥教程 - 適合新手入門的教程網站",
"logo": "https://www.runoob.com/favicon.ico"
},
我只截取了一部分，修改起來很簡單，記得增加_id的值（十六進制數，順序加一即可）。網站的logo我沒有使用自己網站保存的圖標鏈接，直接使用目標網站自己的logo資源。如上所示，網站的favicon.ico一般放在網站的根目錄下，即使有例外也可以查看網頁源碼獲取logo鏈接。
生成可發布內容
上面的內容完成后，可以通過以下命令查看效果：
// 3. 運行
npm run serve
// 4. 查看效果
打開localhost:8080
可以看到修改的效果，這里我不上圖片，可以直接看我的網站。
此時還不能進行網站部署，因為npm run serve只能查看效果，源碼根目錄下dist文件夾下的內容還是以前的。
運行生成命令：
npm run build
我的運行結果如下：
D:\blog\PortableGit>cd D:\geek-navigation-json-navigation
D:\geek-navigation-json-navigation>npm run build
> geek-navigation@0.1.0 build D:\geek-navigation-json-navigation
> vue-cli-service build
- Building for production...
WARNING Compiled with 5 warnings 10:14:21 PM
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="`#${nav.classify}`">
25 | <i :class="nav.icon"></i>
26 | <span slot="title">{{nav.classify}}</span>
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.
warning in ./src/main.js
Module Warning (from ./node_modules/thread-loader/dist/cjs.js):
D:\geek-navigation-json-navigation\src\main.js
5:8 error 'Mock' is defined but never used no-unused-vars
22:2 error Mixed spaces and tabs no-mixed-spaces-and-tabs
? 2 problems (2 errors, 0 warnings)
@ multi ./src/main.js
warning
asset size limit: The following asset(s) exceed the recommended size limit (244
KiB).
This can impact web performance.
Assets:
js/chunk-vendors.d3208d9c.js (969 KiB)
favicon.ico (420 KiB)
warning
entrypoint size limit: The following entrypoint(s) combined asset size exceeds t
he recommended limit (244 KiB). This can impact web performance.
Entrypoints:
app (1.21 MiB)
css/chunk-vendors.723a90c8.css
js/chunk-vendors.d3208d9c.js
css/app.c94e441d.css
js/app.77259833.js
warning
webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to la
zy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
File Size Gzipped
dist\js\chunk-vendors.d3208d9c.js 968.69 KiB 272.05 KiB
dist\js\app.77259833.js 8.92 KiB 3.46 KiB
dist\css\chunk-vendors.723a90c8.css 227.83 KiB 34.59 KiB
dist\css\app.c94e441d.css 30.81 KiB 5.29 KiB
Images and other types of assets omitted.
DONE Build complete. The dist directory is ready to be deployed.
INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployme
nt.html
生成完成 ，接下來進行部署。
部署網站
將dist目錄下的所有文件上傳到網站根目錄即可部署，網站可以選擇Github Pages、對象存儲OSS，有域名的可以綁定自己的域名。
我使用的是阿里雲的對象存儲，域名也是在阿里雲買的，如何部署對象存儲、綁定域名，網上教程有很多，這里不再重復。
網站的名稱（就是瀏覽器窗口顯示的網站名稱）需要手動改dist目錄下的index.html，我的網站名稱是“猿導航”，只需要修改title標簽就可以了。
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=favicon.ico><title>猿導航</title>
我的導航網站是： 猿導航 http://quyonghu.cn
附件
Git for Windows
Node.js Foundation
geek-navigation源碼