Foreword
I was that white zero-based, front-end, what pages I have not studied, but there is little of Winform C # programming experience. These things just do interest dictates, I do not understand where the information can only find their own self-study.
This article just want to record your own learning experience, but also provide some reference for other compatriots who are interested.
Use of open source projects geekape / Geek-Navigation , this is the ultimate site navigation ape navigation http://quyonghu.cn .
Ready to work
Before you begin, you must be prepared for the following tasks:
- Installed node.js, npm (refer to the installation process to install and Node.js NPM )
- Install git for windows (or other git client)
- Code editing software (I use VS2017)
- Computer networking, speed is not too bad
These tools are installed above when I toss in a personal blog sites and GitBook, installation problems can find online tutorials, not repeat them here.
I installed node.js is node-v10.16.0-x64, Git client is PortableGit-2.22.0-64, download link at the end of the article.
Distress: a personal blog site is now in a suspended state indefinitely, mainly because technology is not enough detours will waste a lot of time, demand is not urgent. GitBook project is postponed indefinitely state, on the one hand I'm too lazy dragged on, on the one hand did not think anything good writing, the current gain experience by writing blog. Here were collated and analyzed in order to restart the project is to facilitate future software. Not only do things heat for three minutes, ah, hey! --2019-12-29
Download the source code navigation
There will be a git-cmd.exe, all commands are executed in the back there after installation PortableGit.
I use the source code navigation station is geek-navigation Static Navigation (JSON file) version , referring to github above tutorial, run the command:
// 1. 下载源码
git clone https://github.com/geekape/geek-navigation/tree/json-navigationMy results are as follows:
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 foundNot able to find, only to manually download the github, in order to facilitate my source on the D root directory.
Install dependencies
Referring to github above tutorial, run the command ( remember to enter the first source directory ):
//进入源码目录
cd D:\geek-navigation-json-navigation
// 2.安装依赖,进入根目录
npm install 或 cnpm installMy results are as follows:
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 vulnerabilitiesThe installation is successful, I spent about 20 minutes, you can see the following site.
View Website
Referring to github above tutorial, run the command:
// 3. 运行
npm run serveAlso into the source directory first, followed by the step can run commands directly .
My operating results:
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="`#${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.Next, open directly in the browser localhost: 8080 view site content.
Custom Website Content
Increased modify a Category
Find the geek-navigation-json-navigation \ src \ pages directory Index.vue file, write your own classification level after opening. I open the file with VS2017, in theory, you can open it with any one code editor.
Written at the beginning of the name of your site, I was "ape navigation", reads as follows:
<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>Write a classified source there are four categories, I just changed the category names, variable names. Code is as follows (can be found by keywords to quickly locate the position of the code):
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;
}Write two categories content
Secondary classification content is the content of navigation data, navigation data for all public / nav.json, the new in the root directory sites in a category of data on it, look at the structure had known. It reads as follows:
[
{
"_id": "5ce77a75afdec884fab9599d",
"classify": "［个人］常用网站",
"icon": "czs-cup-l",
"sites": [
{
"name": "菜鸟教程",
"href": "https://www.runoob.com/",
"desc": "runoob - 菜鸟教程 - 适合新手入门的教程网站",
"logo": "https://www.runoob.com/favicon.ico"
},I only interception of a part of the modification is simple to remember the added value of _id (hexadecimal number, you can order a plus). I did not use the site logo icons link to save your site directly using the target site logo own resources . Favicon.ico As shown above, the site is generally placed in the root directory of your site, even though there are exceptions can view the page source code to obtain logo link.
Generate publishable content
After the contents of the above, you can view the effect with the following command:
// 3. 运行
npm run serve
// 4. 查看效果
打开localhost:8080You can see the effect of the change, I am not here on the picture, you can see my site directly.
At this site can not be deployed, because npm run serve only view the results, the source root directory dist content folder or the previous.
Run command generation:
npm run buildMy results are as follows:
D:\blog\PortableGit>cd D:\geek-navigation-json-navigation
D:\geek-navigation-json-navigation>npm run build
> [email protected] 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.htmlGeneration is complete, the next deployment.
Deployment site
All files in the dist directory uploaded to the site root directory can be deployed, the site can choose Github Pages, object storage OSS, there are domain names can bind your own domain name.
I am using Ali cloud object storage , the domain name is Ali cloud buy, how to deploy object storage, binding domain, there are many online tutorials, will not be repeated here.
The name of the site (the site is the name of the browser window that appears) index.html need to manually change the dist directory under my website name is "ape navigation", only need to modify the title tag on it.
<!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>My website is navigation: ape navigation http://quyonghu.cn
annex
Git for Windows
Node.js Foundation
geek-navigation source