2017-2-22更新：
目前已经开始采用vue+webpack的开发方式，本文只是提供一个开发思路，有利于快速理解vue+gulp的这种前端自动化开发的模式，实际开发工程中还是有不少坑要跳的，建议还是使用vue+webpack，而且网上这方面的问题及解决方案很多，会比较容易爬坑。
近几年的前端真的是非常的热闹，各种框架层出不穷，真的是让我这个前端新人看的眼花缭乱，想要有一些自己的想法都很难，一直在疲于追赶前端发展的脚步。刚刚学会了使用jquery的开发方式，就又开始流行组件化开发。但还好，我正好是一个比较热爱前端，喜欢追求新技术的人。
首先说一下我这个题目，所谓传统cdn前端结合vuejs，就是说不采用现在比较火爆的vue+webpack的开发模式，而是使用cdn引用资源，即cdn+vuejs+gulp这样的一套开发模式。为什么要用这样一种方式？这也是由于公司方面的限制，前端这一块必须采用cdn引用资源（好吧，其实就是我并不知道怎么用webpack实现这种对应的效果），于是我就想先琢磨出来一套cdn也一样可以实施的开发模式，等这方面的问题解决以后，再选择重构并替换使用webpack。以下就详细讲讲我目前琢磨出来的一点东西。
1. html相关
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相关
css的话，预处理这一块使用的是less,并使用gulp-autoprefixer进行兼容，同时自适应使用的是天猫团队的dpr自适应解决方案（这是一个针对移动端的自适应的比较好的方案，想要详细了解的同学请戳这里），这种方案可以不写meta=viewport，另外布局方面使用display:flex替代绝对定位和浮动布局。
另外，cssreset网上有很多大牛都有总结，肯定是没有那个必要去重新写一份的，所以这一块我用了这个网站的样式重置，实际使用效果还是很不错的。
3. js相关
在vue+webpack的方案中，可以将模板直接写在.vue的文件中，不但代码更加简洁明了，而且还易于管理。而现在，对vue的js代码采用cdn的方式的话，必须将模板写在js中，而且在css样式方面还可能会有产生冲突的可能性。
尽管如此，采用cdn+vue+gulp的这种方式相比vue+webpack来说还是有优点的，学习的路径可能就没有那么陡峭了，cdn大家都会，gulp本身的api非常简单易懂，而vue的文档又是健全完善的，所以基本不会碰到什么大的难题。同时，对于多页面的应用这种方式也不需要像webpack一样进行额外的配置。另外，相比jquery这样的传统类库来说，vue的好处我想也不多说了吧，所以基本上学习vue这类mvvm框架也是前端以后的必经之路了。
在JS中写vue组件的方式：
//组件
var templateHeader = {
template:
`
<header>
<div></div>
</header>
`,
data:function(){
return {
}
}
};
// 全局注册组件
Vue.component('my-header', templateHeader);
4. 项目打包相关
这里主要采用了gulp这个前端自动化工具。相比于grunt和webpack，gulp的配置简单明了，这里给个传送门可以帮助大家快速学习gulp。
以下是我目前用到的gulp相关插件：
//gulpfile.js文件应该放在项目根目录
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为项目中的引用文件自动添加版本号
assetRev = require('gulp-asset-rev'),
//处理css样式对浏览器的兼容
autoPrefixer = require('gulp-autoprefixer'),
//使用gulp-concat合并文件，减少网络请求
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启动浏览器进行热加载
var browserSync = require('browser-sync').create();
var Reload = browserSync.reload;
经过合理的配置以后，可以将开发环境下的文件打包成满足生产环境的文件。如下，这是我的测试文件目录，开发完成以后，可以将文件都打包到dist文件夹下，整合完毕即可发布。
│ 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：这里有个要点，使用gulp-asset-rev为项目中的引用文件自动添加版本号时，需要修改gulp-asset-dev的源文件才能实现以下这种效果
<!-- <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;
}
以上就是我目前所采用的前端解决方案，有些地方可能考虑的没有很周全，目前还在不断完善的过程中。但是最终使用起来，用以上方式搭建应用还是非常快的。第一次写文，由于技术有限可能有些方面的观点不是很正确，如果大家看到本文有错误的地方，请及时指出，非常感谢。另，从今天起正式入住简书啦。
