这是我参与「第四届青训营 」笔记创作活动的的第5天！
项目简介
由于这次大项目组队挑选了官方组队的原因，兜兜转转只剩下自己一个人做项目，又由于是刚刚学完vue毫无实战阅历的小白，想着要锻炼一下自己，所以挑选了用vue开发看上去最简单（一点也不）的仿官网，首要目标是要完结主页面翻滚加载，文章页面导航目录，代码高亮等功用，完结根本完好的文章浏览领会。
项目运用技能点
vue开发，vue-cli搭建，有用到vue路由和vuex，首要用到的插件有less(css预处理器)，maven-editor(将md转换为html)，Google Code Prettify(代码高亮)还有jQuery，整个进程下来确实领会到了vue的优势，文章页面直接烘托就行，整个页面也能够组件化，十分便利。
开发进程
1.思路
先做好主页面最上部的导航栏，经过路由切换导航栏页面，再完结下面的广告栏和文章栏，经过路由带着参数的方法访问特定文章。
2.遇到的问题
2.1款式与‘px’单位
原本以为写css写半响的时代已经远离自己了，没想到写主页面款式时困难重重，首先是动画完结的欠好，经过半响研究之后总算完结了几个比较简单的，可是相对困难的查找框动画却一向没有头绪，其次是想要测验用自适应单位，如：vw，可是也没有完结，仍是用了‘px’
查找框动画：
2.2文章数据存储
没有数据库，没有接口，测验去找快速定制接口的网站/插件，也没有找到，最终只好把数据都放进了vuex，没想到还挺便利的。
2.3主页面翻滚加载
刚开始想找一个翻滚加载的插件，找了一圈感觉不如自己写，大概的思路是：先把所有文章数据赋值到一个数组，再把这个数组切成多份，每份十五个文章，每当监视到页面滑动到底部时便运用‘concat’追加烘托出新的‘一份’。
首要代码如下：
window.addEventListener('scroll', this.scrollFn)
if (this.$store.state.database.length <= 15) {//文章数小于15则不用切分
this.ArticleData = this.$store.state.database
} else {//假如文章数大于15就切分
for (let i = 0; i < this.$store.state.database.length / 15; i++) {//从vuex拿到文章数据
obj[i] = this.$store.state.database.slice(15 * i, 15 * (i + 1))//切分
}
this.ArticleData = obj[0]
}
scrollFn() {
let windowHeight = window.innerHeight || document.documentElement.clientHeight
let st = window.pageYOffset || document.documentElement.scrollTop
let scrollHeight = document.documentElement.scrollHeight
if (objKey === Object.keys(obj).length - 1) {
return
}
if (windowHeight + st >= scrollHeight) {//假如滑动到了页面底部
objKey++
this.ArticleData = this.ArticleData.concat(obj[objKey])//追加文章数据
}
2.4怎么进入文章页面
最终的解决方案是进入文章页时带着’id’参数，再直接运用vuex文章数据找到对应的文章。
2.5将md转换为html
测验了市面上的多个插件之后挑选了maven-editor，它能够直接把加工好的md文档烘托到文章页面上，还有主动生成文章目录的功用，完全匹配我的要求，而且用法简单，美中不足是它的代码高亮效果失效了（猜想是它的代码高亮效果需求凭借highlight.js，可是它的内部代码没有跟上highlight.js的更新），于是接着解决代码高亮的问题。
只需一行即可：
<mavonEditor class="article" v-model="content" defaultOpen="preview" :toolbarsFlag="false" :subfield="false" :navigation="true" :ishljs="false" />
2.6代码高亮
在maven-editor失效后测验了多个代码高亮插件无果，首要是由于maven-editor就像一个黑盒子，很难在maven-editor做好一切的情况下去修改它内部烘托出的页面，幸好最终找到了Google Code Prettify，运用起来十分简单，仅需在代码所处的<code><code\>盒子加上对应类名（我用DOM来加类名）即可完结代码高亮。
for (let i = 0, len = codehl.length; i < len; i++) {
codehl[i].setAttribute('class', 'prettyprint')
}
2.7文章目录
尽管maven-editor自带文章目录，可是它给出的文章目录直接悬浮在了文章之上，而且款式也不尽人意，这儿我另外克己了一个文章目录，经过jQuery获取到me生成目录内容，再烘托到我克己的目录上。
this.$nextTick(() => {
const aArr = $('a').toArray()
let toc = []
let flag = true
aArr.forEach(item => {
let href = $(item).attr('id')
let name = $(item).parent().text()
if (href) {
for (let i = 0, len = toc.length; i < len; i++) {
if (toc[i].href == '#' + href) {
flag = false
}
}
if (flag) {
toc.push({
href: '#' + href,
name
})
}
}
})
this.toc = toc
})
3.优化空间
（1）进入文章页面后需求主动改写一次才干完结代码高亮效果，用户领会较差
（2） 查找栏、文章目录等处缺乏动效
（3）md转HTML插件无法直接识别md文档中的换行，需求手动加‘\n’
（4）改善页面计量单位，使其在不同设备上显示效果相同
（5）进入文章页后需求点两次回退按钮才干回到首页（由于改写过一次的原因）
（6）页面改为可伸缩的
（7）代码冗余，许多应该别离的代码写到了一起
（8）文章页加载慢，性能尚待优化
总结思考
- 根底还需求巩固
- 编程思想还停留在以前，需求提高
全体来讲，尽管问题繁复，但这次项目是出乎我的意料的，进步很大，谢谢我，也谢谢青训营。
