基于koa2、vue2、mongodb的个人网站（前端序篇）

项目地址

前言

这不阿里云搞活动可领取六个月免费使用云主机么。闲来无事就领了个，想着写个个人主页玩玩。至于采用什么技术呢？好吧，那当然是什么新用什么啦！纯粹是检验自己学习能力O(∩_∩)O哈哈~。

项目是由vue脚手架生成，项目结构 参考了手摸手，带你用vue撸后台。还有参考了部分组件封装方法。

目录结构

├── build                      // 构建相关
├── config                     // 配置相关
├── src                        // 源代码
│   ├── api                    // 请求
│   ├── assets                 // 字体图标等静态资源
│   ├── components             // 全局公用组件
│   ├── filtres                // 全局filter
│   ├── i18n                   // 国际化语言包
│   ├── mock                   // mock数据
│   ├── router                 // 路由
│   ├── store                  // vuex
│   ├── styles                 // 样式
│   ├── utils                  // 公用方法
│   ├── view                   // 页面视图
│   ├── App.vue                // 入口页面
│   └── main.js                // 入口加载组件 初始化等
├── static                     // 第三方不打包资源
├── .babelrc                   // babel-loader 配置
├── eslintrc.js                // eslint 配置项
├── .gitignore                 // git 忽略项
├── favicon.ico                // favicon图标
├── index.html                 // html模板
└── package.json               // package.json

首先说下基本工具

构建工具

那自然是webpack啦。使用的也是vue脚手架生成的那一套。不过加了注释，算是很详尽了吧。

注意的是因为本文使用的是iview，webpack配置有个小bug，生产环境打包，字体文件引用有问题

module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: false//这里得改成false
})
},

还有个就是热更新问题。旧vue脚手架生成的版本会发现每次都是强制刷新。注释掉即可

// force page reload when html-webpack-plugin template changes
//声明hotMiddleware无刷新更新的时机:html-webpack-plugin 的template更改之后
// currently disabled until this is resolved:
// https://github.com/jantimon/html-webpack-plugin/issues/680 // compiler.plugin('compilation', function (compilation) {
//     compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
//         hotMiddleware.publish({ action: 'reload' })
//         cb()
//     })
// })

eslint

无论是基于什么原因，代码风格一致是必须的。何况博主处女座。自行配下即可。鉴于规则较多，费了点时间基本涵盖了所有规则，当然都是贴于我自己喜欢的。不过基本上都注释了，有兴趣的话可以看看。eslintrc.js

本人使用的IDE为vscode ，以下为本人配置



其实可以看看一些优秀团队的配置（node_modules下定位到具体包查看即可）。

实现的一些手段

首先说下咱们做什么。怎么说呢？大体就是使用vue2实现一个个人博客。这个肯定是得先有个效果图。灵感啊灵感，很难啊。这里推荐个让你文思泉涌的网站。Dribbble

我就很无耻的采用了其中一种设计。效果如下

布局

恩，使用的是响应式弹性布局。感慨下Flex真好用。以前的盒模型好难用啊。不会的小伙伴可以买本书看看响应式web设计(第二版)。

这里说下断点（@media后面的min/max-width）怎么找。把屏幕拉到支持的最小宽度。然后慢慢拉开。发现看不下去了，那就是断点。超级好用吧。

axios

这个呢是有封装的。不过这里不讲怎么封装。官网很清楚有木有啊。

这里讲的是怎么处理异常。本人做法是添加一个响应拦截器，然后在拦截器里处理例如401（跳到401界面）、403（跳到403界面）常见的状态码。你要是想比如我获取文章失败，怎么catch。这个肯定是不能全局的。乖乖哪里调用哪里catch吧。

国际化

国际化采用的是vue-i18n



想加什么语言自己新建文件就成。采用json对象分模块编写语言包。

// zh.js
const lang = {
validator: {
username: '请输入正确的用户名'
},
login: {
login: '登录',
logout: '退出',
username: '用户名',
password: '密码'
},
dashboard: {
dashboardTitle: '首页'
}
};

export default lang;

配置文件

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import zhLang from './zh';
import enLang from './en';
import zhLocale from 'iview/dist/locale/zh-CN';
import enLocale from 'iview/dist/locale/en-US';
Vue.use(VueI18n);

// 自动设置语言
const navLang = navigator.language;
const localLang = navLang === 'zh-CN' || navLang === 'en-US' ? navLang : false;
const lang = window.localStorage.getItem('language') || localLang || 'zh-CN';

Vue.config.lang = lang;

// 多语言配置
const mergeZH = Object.assign(zhLocale, zhLang);
const mergeEN = Object.assign(enLocale, enLang);
Vue.locale('zh-CN', me
a7e2
rgeZH);
Vue.locale('en-US', mergeEN);

是不是觉得很简单呢。

mock

仿真，这个可是前后端分离必备啊。这样子就无需等后端同学了。大前端就是这么傲娇

搭建可参考

await/async

嗯，很新的东西。没接触过的小伙伴可以看下阮一峰老师的[ECMAScript 6 入门](http://es6.ruanyifeng.com/)。比promise更加优雅有木有。

动画

有看我主页的，可以看见滚动滚轮是有动画效果的。这个实现还是废了点周折。首先是vue也才使用，其次以前写动画除了css3还有jquery。不习惯啊啊，没了jquery。这里占个坑，有空分享下我遇到的问题。

优化

推荐一个个人觉得使用方便的网站webpagetest

可以看见评分标准好几种。自行优化即可。方法网上多得很，在此不再赘述。

cdn这个老实说我还没有搞定呢，不过打算采用又拍云或者七牛。什么时候有空折腾下。

后记

感觉大致就这么些，好多别人有讲而且我也很顺利就觉得没什么可说的。

本文只是大致介绍了下个人网站用的一些实现方法。具体的情况后续有时间继续分享。