零基础小白建立自己的导航网站
前言
我就是那个零基础小白，前端、网页什么的我都没有学习过，只是有一点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源码
