个人博客网站上线
历时两周时间，我自己的个人博客网站终于搭建完成了
以后个人博客可能就转到自己搭建的博客网站了
先说一下技术栈吧：
前端：
- 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 文件中定义的开发环境变量
