2017-2-22更新:
目前已經(jīng)開始采用vue+webpack的開發(fā)方式践啄,本文只是提供一個(gè)開發(fā)思路浇雹,有利于快速理解vue+gulp的這種前端自動(dòng)化開發(fā)的模式,實(shí)際開發(fā)工程中還是有不少坑要跳的屿讽,建議還是使用vue+webpack昭灵,而且網(wǎng)上這方面的問題及解決方案很多,會(huì)比較容易爬坑伐谈。
近幾年的前端真的是非常的熱鬧烂完,各種框架層出不窮,真的是讓我這個(gè)前端新人看的眼花繚亂诵棵,想要有一些自己的想法都很難抠蚣,一直在疲于追趕前端發(fā)展的腳步。剛剛學(xué)會(huì)了使用jquery的開發(fā)方式履澳,就又開始流行組件化開發(fā)嘶窄。但還好,我正好是一個(gè)比較熱愛前端奇昙,喜歡追求新技術(shù)的人护侮。
首先說一下我這個(gè)題目,所謂傳統(tǒng)cdn前端結(jié)合vuejs储耐,就是說不采用現(xiàn)在比較火爆的vue+webpack的開發(fā)模式羊初,而是使用cdn引用資源,即cdn+vuejs+gulp這樣的一套開發(fā)模式什湘。為什么要用這樣一種方式长赞?這也是由于公司方面的限制,前端這一塊必須采用cdn引用資源(好吧闽撤,其實(shí)就是我并不知道怎么用webpack實(shí)現(xiàn)這種對(duì)應(yīng)的效果)得哆,于是我就想先琢磨出來一套cdn也一樣可以實(shí)施的開發(fā)模式,等這方面的問題解決以后哟旗,再選擇重構(gòu)并替換使用webpack贩据。以下就詳細(xì)講講我目前琢磨出來的一點(diǎn)東西。
1. html相關(guān)
html的話闸餐,是cdn引用vue,vue-router,vue-resource等饱亮,這一塊沒什么好說的。
具體可見以下代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
//這種方案可以不寫meta=viewport
<script type="text/javascript" src="js/tmdpr-solution.js"></script>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/all.css">
</head>
<body>
<div id="app"></div>
<script src="http://cdn.bootcss.com/vue/2.1.10/vue.js"></script>
<script src="http://cdn.bootcss.com/vue-router/2.2.0/vue-router.js"></script>
<script src="http://cdn.bootcss.com/vue-resource/1.1.0/vue-resource.js"></script>
<script src="js/all.js"></script>
</body>
</html>
2. css相關(guān)
css的話舍沙,預(yù)處理這一塊使用的是less,并使用gulp-autoprefixer進(jìn)行兼容近上,同時(shí)自適應(yīng)使用的是天貓團(tuán)隊(duì)的dpr自適應(yīng)解決方案(這是一個(gè)針對(duì)移動(dòng)端的自適應(yīng)的比較好的方案,想要詳細(xì)了解的同學(xué)請(qǐng)戳這里)拂铡,這種方案可以不寫meta=viewport壹无,另外布局方面使用display:flex替代絕對(duì)定位和浮動(dòng)布局葱绒。
另外,cssreset網(wǎng)上有很多大牛都有總結(jié)斗锭,肯定是沒有那個(gè)必要去重新寫一份的地淀,所以這一塊我用了這個(gè)網(wǎng)站的樣式重置,實(shí)際使用效果還是很不錯(cuò)的岖是。
3. js相關(guān)
在vue+webpack的方案中骚秦,可以將模板直接寫在.vue的文件中,不但代碼更加簡(jiǎn)潔明了璧微,而且還易于管理作箍。而現(xiàn)在,對(duì)vue的js代碼采用cdn的方式的話前硫,必須將模板寫在js中胞得,而且在css樣式方面還可能會(huì)有產(chǎn)生沖突的可能性。
盡管如此屹电,采用cdn+vue+gulp的這種方式相比vue+webpack來說還是有優(yōu)點(diǎn)的阶剑,學(xué)習(xí)的路徑可能就沒有那么陡峭了,cdn大家都會(huì)危号,gulp本身的api非常簡(jiǎn)單易懂牧愁,而vue的文檔又是健全完善的,所以基本不會(huì)碰到什么大的難題外莲。同時(shí)猪半,對(duì)于多頁(yè)面的應(yīng)用這種方式也不需要像webpack一樣進(jìn)行額外的配置。另外偷线,相比jquery這樣的傳統(tǒng)類庫(kù)來說磨确,vue的好處我想也不多說了吧,所以基本上學(xué)習(xí)vue這類mvvm框架也是前端以后的必經(jīng)之路了声邦。
在JS中寫vue組件的方式:
//組件
var templateHeader = {
template:
`
<header>
<div></div>
</header>
`,
data:function(){
return {
}
}
};
// 全局注冊(cè)組件
Vue.component('my-header', templateHeader);
4. 項(xiàng)目打包相關(guān)
這里主要采用了gulp這個(gè)前端自動(dòng)化工具乏奥。相比于grunt和webpack,gulp的配置簡(jiǎn)單明了亥曹,這里給個(gè)傳送門可以幫助大家快速學(xué)習(xí)gulp邓了。
以下是我目前用到的gulp相關(guān)插件:
//gulpfile.js文件應(yīng)該放在項(xiàng)目根目錄
var gulp = require('gulp'),
//處理less文件為css
Less = require('gulp-less'),
//處理圖片深度壓縮
Imagemin = require('gulp-imagemin'),
//確保本地已安裝imagemin-pngquant [cnpm install imagemin-pngquant --save-dev]
Pngquant = require('imagemin-pngquant'),
//使用gulp-asset-rev為項(xiàng)目中的引用文件自動(dòng)添加版本號(hào)
assetRev = require('gulp-asset-rev'),
//處理css樣式對(duì)瀏覽器的兼容
autoPrefixer = require('gulp-autoprefixer'),
//使用gulp-concat合并文件,減少網(wǎng)絡(luò)請(qǐng)求
Concat = require('gulp-concat'),
//使用gulp-uglify壓縮javascript文件媳瞪,減小文件大小
Uglify = require('gulp-uglify'),
//使用gulp-clean-css壓縮css文件骗炉,減小文件大小
CleanCss = require('gulp-clean-css'),
//使用gulp-htmlmin壓縮html文件,減小文件大小
Htmlmin = require('gulp-htmlmin');
//使用gulp啟動(dòng)瀏覽器進(jìn)行熱加載
var browserSync = require('browser-sync').create();
var Reload = browserSync.reload;
經(jīng)過合理的配置以后材失,可以將開發(fā)環(huán)境下的文件打包成滿足生產(chǎn)環(huán)境的文件痕鳍。如下硫豆,這是我的測(cè)試文件目錄龙巨,開發(fā)完成以后笼呆,可以將文件都打包到dist文件夾下,整合完畢即可發(fā)布旨别。
│ gulpfile.js
│ index.html
│ package.json
├─css
├─data
├─dist
│ │ index.html
│ ├─css
│ │ all.css
│ ├─data
│ ├─images
│ └─js
│ all.js
│ tianmao-dpr-solution.js
├─images
├─js
└─less
ps:這里有個(gè)要點(diǎn)诗赌,使用gulp-asset-rev為項(xiàng)目中的引用文件自動(dòng)添加版本號(hào)時(shí),需要修改gulp-asset-dev的源文件才能實(shí)現(xiàn)以下這種效果
<!-- <script src="js/vue.js?v=278e590"></script> -->
<!-- <script src="js/vue-router.js?v=126bb47"></script> -->
<!-- <script src="js/vue-resource.js?v=82cd2d7"></script> -->
具體修改代碼如下:
//gulp-asset-dev修改配置文件index.js
if (fs.existsSync(assetPath)) {
var buf = fs.readFileSync(assetPath);
var md5 = createHash(buf, options.hashLen || 7);
// var verStr = (options.verConnecter || "-") + md5;
var verStr = md5;
// src = src.replace(verStr, '').replace(/(\.[^\.]+)$/, verStr + "$1");
src=src+"?v="+verStr;
} else {
return str;
}
以上就是我目前所采用的前端解決方案秸弛,有些地方可能考慮的沒有很周全铭若,目前還在不斷完善的過程中。但是最終使用起來递览,用以上方式搭建應(yīng)用還是非车鹜溃快的。第一次寫文绞铃,由于技術(shù)有限可能有些方面的觀點(diǎn)不是很正確镜雨,如果大家看到本文有錯(cuò)誤的地方,請(qǐng)及時(shí)指出儿捧,非常感謝荚坞。另,從今天起正式入住簡(jiǎn)書啦菲盾。