这是我参与「第四届青训营 」笔记创作活动的的第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）文章页加载慢，性能尚待优化

总结思考

• 基础还需要巩固
• 编程思维还停留在以前，需要提高

整体来讲，虽然问题繁多，但这次项目是出乎我的意料的，进步很大，谢谢我，也谢谢青训营。