前言
這不阿里云搞活動(dòng)可領(lǐng)取六個(gè)月免費(fèi)使用云主機(jī)么。閑來(lái)無(wú)事就領(lǐng)了個(gè)，想著寫個(gè)個(gè)人主頁(yè)玩玩。至于采用什么技術(shù)呢？好吧，那當(dāng)然是什么新用什么啦！純粹是檢驗(yàn)自己學(xué)習(xí)能力O(∩_∩)O哈哈~。
項(xiàng)目是由vue腳手架生成，項(xiàng)目結(jié)構(gòu) 參考了手摸手，帶你用vue擼后臺(tái)。還有參考了部分組件封裝方法。
目錄結(jié)構(gòu)
├── build // 構(gòu)建相關(guān)
├── config // 配置相關(guān)
├── src // 源代碼
│ ├── api // 請(qǐng)求
│ ├── assets // 字體圖標(biāo)等靜態(tài)資源
│ ├── components // 全局公用組件
│ ├── filtres // 全局filter
│ ├── i18n // 國(guó)際化語(yǔ)言包
│ ├── mock // mock數(shù)據(jù)
│ ├── router // 路由
│ ├── store // vuex
│ ├── styles // 樣式
│ ├── utils // 公用方法
│ ├── view // 頁(yè)面視圖
│ ├── App.vue // 入口頁(yè)面
│ └── main.js // 入口加載組件 初始化等
├── static // 第三方不打包資源
├── .babelrc // babel-loader 配置
├── eslintrc.js // eslint 配置項(xiàng)
├── .gitignore // git 忽略項(xiàng)
├── favicon.ico // favicon圖標(biāo)
├── index.html // html模板
└── package.json // package.json
首先說(shuō)下基本工具
構(gòu)建工具
那自然是webpack啦。使用的也是vue腳手架生成的那一套。不過(guò)加了注釋，算是很詳盡了吧。
注意的是因?yàn)楸疚氖褂玫氖莍view，webpack配置有個(gè)小bug，生產(chǎn)環(huán)境打包，字體文件引用有問(wèn)題
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: false//這里得改成false
})
},
還有個(gè)就是熱更新問(wèn)題。舊vue腳手架生成的版本會(huì)發(fā)現(xiàn)每次都是強(qiáng)制刷新。注釋掉即可
// force page reload when html-webpack-plugin template changes
//聲明hotMiddleware無(wú)刷新更新的時(shí)機(jī):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
無(wú)論是基于什么原因，代碼風(fēng)格一致是必須的。何況博主處女座。自行配下即可。鑒于規(guī)則較多，費(fèi)了點(diǎn)時(shí)間基本涵蓋了所有規(guī)則，當(dāng)然都是貼于我自己喜歡的。不過(guò)基本上都注釋了，有興趣的話可以看看。eslintrc.js
本人使用的IDE為vscode ，以下為本人配置
其實(shí)可以看看一些優(yōu)秀團(tuán)隊(duì)的配置（node_modules下定位到具體包查看即可）。
實(shí)現(xiàn)的一些手段
首先說(shuō)下咱們做什么。怎么說(shuō)呢？大體就是使用vue2實(shí)現(xiàn)一個(gè)個(gè)人博客。這個(gè)肯定是得先有個(gè)效果圖。靈感啊靈感，很難啊。這里推薦個(gè)讓你文思泉涌的網(wǎng)站。Dribbble
我就很無(wú)恥的采用了其中一種設(shè)計(jì)。效果如下
布局
恩，使用的是響應(yīng)式彈性布局。感慨下Flex真好用。以前的盒模型好難用啊。不會(huì)的小伙伴可以買本書看看響應(yīng)式web設(shè)計(jì)(第二版)。
這里說(shuō)下斷點(diǎn)（@media后面的min/max-width）怎么找。把屏幕拉到支持的最小寬度。然后慢慢拉開。發(fā)現(xiàn)看不下去了，那就是斷點(diǎn)。超級(jí)好用吧。
axios
這個(gè)呢是有封裝的。不過(guò)這里不講怎么封裝。官網(wǎng)很清楚有木有啊。
這里講的是怎么處理異常。本人做法是添加一個(gè)響應(yīng)攔截器，然后在攔截器里處理例如401（跳到401界面）、403（跳到403界面）常見的狀態(tài)碼。你要是想比如我獲取文章失敗，怎么catch。這個(gè)肯定是不能全局的。乖乖哪里調(diào)用哪里catch吧。
國(guó)際化
國(guó)際化采用的是vue-i18n
想加什么語(yǔ)言自己新建文件就成。采用json對(duì)象分模塊編寫語(yǔ)言包。
// zh.js
const lang = {
validator: {
username: '請(qǐng)輸入正確的用戶名'
},
login: {
login: '登錄',
logout: '退出',
username: '用戶名',
password: '密碼'
},
dashboard: {
dashboardTitle: '首頁(yè)'
}
};
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);
// 自動(dòng)設(shè)置語(yǔ)言
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;
// 多語(yǔ)言配置
const mergeZH = Object.assign(zhLocale, zhLang);
const mergeEN = Object.assign(enLocale, enLang);
Vue.locale('zh-CN', mergeZH);
Vue.locale('en-US', mergeEN);
是不是覺(jué)得很簡(jiǎn)單呢。
mock
仿真，這個(gè)可是前后端分離必備啊。這樣子就無(wú)需等后端同學(xué)了。大前端就是這么傲嬌
搭建可參考
await/async
嗯，很新的東西。沒(méi)接觸過(guò)的小伙伴可以看下阮一峰老師的ECMAScript 6 入門。比promise更加優(yōu)雅有木有。
動(dòng)畫
有看我主頁(yè)的，可以看見滾動(dòng)滾輪是有動(dòng)畫效果的。這個(gè)實(shí)現(xiàn)還是廢了點(diǎn)周折。首先是vue也才使用，其次以前寫動(dòng)畫除了css3還有jquery。不習(xí)慣啊啊，沒(méi)了jquery。這里占個(gè)坑，有空分享下我遇到的問(wèn)題。
優(yōu)化
推薦一個(gè)個(gè)人覺(jué)得使用方便的網(wǎng)站webpagetest
可以看見評(píng)分標(biāo)準(zhǔn)好幾種。自行優(yōu)化即可。方法網(wǎng)上多得很，在此不再贅述。
cdn這個(gè)老實(shí)說(shuō)我還沒(méi)有搞定呢，不過(guò)打算采用又拍云或者七牛。什么時(shí)候有空折騰下。
后記
感覺(jué)大致就這么些，好多別人有講而且我也很順利就覺(jué)得沒(méi)什么可說(shuō)的。
本文只是大致介紹了下個(gè)人網(wǎng)站用的一些實(shí)現(xiàn)方法。具體的情況后續(xù)有時(shí)間繼續(xù)分享。
