项目地址
前言
这不阿里云搞活动可领取六个月免费使用云主机么。闲来无事就领了个，想着写个个人主页玩玩。至于采用什么技术呢？好吧，那当然是什么新用什么啦！纯粹是检验自己学习能力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', mergeZH);
Vue.locale('en-US', mergeEN);
是不是觉得很简单呢。
mock
仿真，这个可是前后端分离必备啊。这样子就无需等后端同学了。大前端就是这么傲娇
搭建可参考
await/async
嗯，很新的东西。没接触过的小伙伴可以看下阮一峰老师的ECMAScript 6 入门。比promise更加优雅有木有。
动画
有看我主页的，可以看见滚动滚轮是有动画效果的。这个实现还是废了点周折。首先是vue也才使用，其次以前写动画除了css3还有jquery。不习惯啊啊，没了jquery。这里占个坑，有空分享下我遇到的问题。
优化
推荐一个个人觉得使用方便的网站webpagetest
可以看见评分标准好几种。自行优化即可。方法网上多得很，在此不再赘述。
cdn这个老实说我还没有搞定呢，不过打算采用又拍云或者七牛。什么时候有空折腾下。
后记
感觉大致就这么些，好多别人有讲而且我也很顺利就觉得没什么可说的。
本文只是大致介绍了下个人网站用的一些实现方法。具体的情况后续有时间继续分享。