2017-2-22更新：
目前已經(jīng)開始采用vue+webpack的開發(fā)方式，本文只是提供一個(gè)開發(fā)思路，有利于快速理解vue+gulp的這種前端自動化開發(fā)的模式，實(shí)際開發(fā)工程中還是有不少坑要跳的，建議還是使用vue+webpack，而且網(wǎng)上這方面的問題及解決方案很多，會比較容易爬坑。
近幾年的前端真的是非常的熱鬧，各種框架層出不窮，真的是讓我這個(gè)前端新人看的眼花繚亂，想要有一些自己的想法都很難，一直在疲于追趕前端發(fā)展的腳步。剛剛學(xué)會了使用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)這種對應(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è)針對移動端的自適應(yīng)的比較好的方案，想要詳細(xì)了解的同學(xué)請戳這里），這種方案可以不寫meta=viewport，另外布局方面使用display:flex替代絕對定位和浮動布局。
另外，cssreset網(wǎng)上有很多大牛都有總結(jié)，肯定是沒有那個(gè)必要去重新寫一份的，所以這一塊我用了這個(gè)網(wǎng)站的樣式重置，實(shí)際使用效果還是很不錯(cuò)的。
3. js相關(guān)
在vue+webpack的方案中，可以將模板直接寫在.vue的文件中，不但代碼更加簡潔明了，而且還易于管理。而現(xiàn)在，對vue的js代碼采用cdn的方式的話，必須將模板寫在js中，而且在css樣式方面還可能會有產(chǎn)生沖突的可能性。
盡管如此，采用cdn+vue+gulp的這種方式相比vue+webpack來說還是有優(yōu)點(diǎn)的，學(xué)習(xí)的路徑可能就沒有那么陡峭了，cdn大家都會，gulp本身的api非常簡單易懂，而vue的文檔又是健全完善的，所以基本不會碰到什么大的難題。同時(shí)，對于多頁面的應(yīng)用這種方式也不需要像webpack一樣進(jìn)行額外的配置。另外，相比jquery這樣的傳統(tǒng)類庫來說，vue的好處我想也不多說了吧，所以基本上學(xué)習(xí)vue這類mvvm框架也是前端以后的必經(jīng)之路了。
在JS中寫vue組件的方式：
//組件
var templateHeader = {
template:
`
<header>
<div></div>
</header>
`,
data:function(){
return {
}
}
};
// 全局注冊組件
Vue.component('my-header', templateHeader);
4. 項(xiàng)目打包相關(guān)
這里主要采用了gulp這個(gè)前端自動化工具。相比于grunt和webpack，gulp的配置簡單明了，這里給個(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)目中的引用文件自動添加版本號
assetRev = require('gulp-asset-rev'),
//處理css樣式對瀏覽器的兼容
autoPrefixer = require('gulp-autoprefixer'),
//使用gulp-concat合并文件，減少網(wǎng)絡(luò)請求
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啟動瀏覽器進(jìn)行熱加載
var browserSync = require('browser-sync').create();
var Reload = browserSync.reload;
經(jīng)過合理的配置以后，可以將開發(fā)環(huán)境下的文件打包成滿足生產(chǎn)環(huán)境的文件。如下，這是我的測試文件目錄，開發(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)目中的引用文件自動添加版本號時(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ò)誤的地方，請及時(shí)指出，非常感謝。另，從今天起正式入住簡書啦。
