个人博客网站上线

历时两周时间，我自己的个人博客网站终于搭建完成了

以后个人博客可能就转到自己搭建的博客网站了

先说一下技术栈吧：

　　前端：

• Vue全家桶（Vue、VueRouter、Vuex）
• Element-ui
• axios

　　后端：

• NodeJs
• express
• MongoDB、mongoose
• cors（允许跨域请求）

后台管理界面：

 （请无视我这迷人的审美）基于ElementUI

• 文章管理（新建/编辑/删除/评论）

• 留言板管理

• 时间线管理

后续会更新完善更多的功能

切换黑暗主题：

数据存储到 Vuex 中，通过动态绑定 class 实现

全局滚动条设置：

/* 滚动条 */
  ::-webkit-scrollbar {
    width: 6px;
    height: 10px;
   }
   /* 滚动条上的滑块 */
  ::-webkit-scrollbar-thumb {
    background-color: #c1c4ce;
    border-radius: 3px;
  }

没有使用插件，只是使用的原生样式，兼容性不是很好（后期完善）

切换路由，页面重置回顶部

当你的项目有多个路由时，假如你在首页滑动到了页面中间，点击进入文章详情页，会发现此时滚动条中滑块的位置也在中间

这其实是vue本身的问题，vue是单页面应用，所谓路由改变其实本质上就是处于活跃状态的组件改变了而已，页面是没变的，滚动条上滑块的位置自然也没有变，所以会出现路由切换时滚动条未在顶部的情况

我们可以在进入的页面组件中

mounted(){
  this.$nextTick(() => {
    document.querySelector("#app").scrollTop = 0
  })
},

页面加载时出现顶部进度条

用了nprogerss插件

下载

npm install nprogress --save

router.js

import NProgress from 'nprogress'  //顶部进度条
import 'nprogress/nprogress.css'
router.beforeEach((to, from, next) => {
  NProgress.start()  //开启
  next()
})
router.afterEach(() => {
  NProgress.done()  //关闭
})

切换路由的过渡动画

淡入淡出的效果

<transition name="fade" mode="in-out">
  <keep-alive include="Home">
    <router-view></router-view>
  </keep-alive>
</transition> 

.fade-enter {
  opacity:0;
}
.fade-leave{
  opacity:1;
}
.fade-enter-active{
  transition:opacity .5s;
}
.fade-leave-active{
  opacity:0;
  transition:opacity .5s;
}

然后就是开发-上线中遇到的一些困难

1、在腾讯云购买的Ubuntu服务器登陆默认不是root用户，在后期项目上传服务器可能会提示权限不足，解决方案：

先运行命令：

sudo passwd root

会提示输入密码，输入两次密码，然后运行：

su root

就能获得Ubuntu的最高权限

2、在打包之后axios请求的路径会发生错误

在本地开发时一直请求的是本地的后台地址，在上线之后会更改

所以在vue-cli中创建 .env.development 文件配置开发环境和生产环境的网络接口

然后使用 process.env.NAME ，这里的 NAME 就是在 .env.devlopment 文件中定义的开发环境变量

3、在做数据请求时，我一般会先在 data 函数中先声明好属性，

　  但是初始值需要与后台 mongoose 中模型的数据类型一致，

　  否则数据可能会发生错误，这算是踩的一个小坑吧，在这里记录下来。

暂时就想到这么多，最后附上新博客链接地址：http://lshblog.top（备用：http://cn.lshblog.xyz），欢迎大家多多评论，留言哦。