基于vue的开发流程

vue.js webpack vue-router vuex vue-resource

项目初始化(vue-cli)

Vue.js 提供一个官方命令行工具vue-cli，可用于快速搭建大型单页应用在此之上,官方基于webpack提供了两种项目模板，分别是vue-webpack-simple模板和vue-webpack模板。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：

// 全局安装 vue-cli
  npm install --global vue-cli
// 创建一个基于 webpack 模板的新项目
  vue init webpack my-project 
//这个地方还可以 vue init webpack-simple my-project 建议大家先建立简单模板了解结构,再渐进增强.
// 安装依赖，走你
  cd my-project
  npm install
  npm run dev

ps:npm比较慢,大家可以安装淘宝 NPM 镜像,或用yarn取代

路由部分(vue-router)

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。

示例

以一个简单的单页面应用开启vue-router之旅，这个单页面应用有两个路径：/home和/about，与这两个路径对应的是两个组件Home和About。

1.创建组件

首先引入vue.js和vue-router.js

<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>

然后创建两个组件构造器Home和About：

var Home = Vue.extend({
    template: '<div><h1>Home</h1><p>{{msg}}</p></div>',
    data: function() {
        return {
            msg: 'Hello, vue router!'
        }
    }
})

var About = Vue.extend({
    template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'
})

2. 创建Router

var router = new VueRouter()

调用构造器VueRouter，创建一个路由器实例router。

3.映射路由

var router = new VueRouter({
  routes: [
    { path: '/home', component: home },
    { path: '/About', component: About }
  ]
})

调用router的map方法映射路由，每条路由以key-value的形式存在，key是路径，value是组件。
例如：'/home'是一条路由的key，它表示路径；{component: Home}则表示该条路由映射的组件。

4.使用v-link指令

<div class="list-group">
    <router-link to="/Home">Home</router-link>
    <router-link to="/about">About</router-link>
</div>

在a使用router-link指令跳转到指定路径。

5. 使用标签

<router-view></router-view>

在页面上使用<router-view></router-view>标签，它用于渲染匹配的组件。

6.启动路由

new Vue({
  el: '#app',
  router: router,
  template: '<router-view></router-view>'
})

路由器的运行需要一个根组件，会创建一个App实例，并且挂载到#app元素即可

上面的6个步骤，可以说是创建一个单页面应用的基本步骤：

VUEX

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。以下是一个表示“单向数据流”理念的极简示意：
这个状态自管理应用包含以下几个部分：

• state，驱动应用的数据源；
• view，以声明方式将state映射到视图；
• actions，响应在view上的用户输入导致的状态变化

但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

• 多个视图依赖于同一状态。
• 来自不同视图的行为需要变更同一状态。

因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！这就是引入vuex的原因!
vuex作用区域

什么情况下使用 Vuex?

虽然 Vuex 可以帮助我们管理共享状态，但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是，如果您需要构建是一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

异步请求(vue-resource)

Vue.js是数据驱动的，这使得我们并不需要直接操作DOM，如果我们不需要使用jQuery的DOM选择器，就没有必要引入jQuery。vue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说，$.ajax能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁.

vue-resource特点

vue-resource插件具有以下特点：

1. 体积小

vue-resource非常小巧，在压缩以后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQuery的体积要小得多。

2.支持主流的浏览器

和Vue.js一样，vue-resource除了不支持IE 9以下的浏览器，其他主流的浏览器都支持。

3.支持Promise API和URI Templates

Promise是ES6的特性，Promise的中文含义为“先知”，Promise对象用于异步计算。
URI Templates表示URI模板，有些类似于ASP.NET MVC的路由模板。

4.支持拦截器

拦截器是全局的，拦截器可以在请求发送前和发送请求后做一些处理。
拦截器在一些场景下会非常有用，比如请求发送前在headers中设置access_token，或者在请求失败时，提供共通的处理方式。

基本语法
引入vue-resource后，可以基于全局的Vue对象使用http，也可以基于某个Vue实例使用http。

// 基于全局Vue对象使用http
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

// 在一个Vue实例内使用$http
    this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

在发送请求后，使用then方法来处理响应结果，then方法有两个参数，第一个参数是响应成功时的回调函数，第二个参数是响应失败时的回调函数。

then方法的回调函数也有两种写法，第一种是传统的函数写法，第二种是更为简洁的ES 6的Lambda写法：

// 传统写法
this.$http.get('/someUrl', [options]).then(function(response){
    // 响应成功回调
}, function(response){
    // 响应错误回调
});


// Lambda写法
this.$http.get('/someUrl', [options]).then((response) => {
    // 响应成功回调
}, (response) => {
    // 响应错误回调
});

总结下,vue-resource是一个非常轻量的用于处理HTTP请求的插件，它提供了两种方式来处理HTTP请求：

• 使用Vue.http或this.$http

• 使用Vue.resource或this.$resource

这两种方式本质上没有什么区别，阅读vue-resource的源码，你可以发现第2种方式是基于第1种方式实现的。

inteceptor可以在请求前和请求后附加一些行为，这意味着除了请求处理的过程，请求的其他环节都可以由我们来控制。

打包工具(webpack)

这个内容比较多,webpack2中文官方文档,内容比较详细.比较重要的二个概览是他的装载机和插件.

vue-loader

webpack 提供了强大的 loader 机制和 plugin 机制，loader 机制支持载入各种各样的静态资源，不只是 js 脚本、连 html, css, images 等各种资源都有相应的 loader 来做依赖管理和打包；而 plugin 则可以对整个 webpack 的流程进行一定的控制。

比如在安装并配置了 css-loader 和 style-loader 之后，就可以通过 require('./bootstrap.css') 这样的方式给网页载入一份样式表。非常方便。

webpack 背后的原理其实就是把所有的非 js 资源都转换成 js (如把一个 css 文件转换成“创建一个 style 标签并把它插入 document ”的脚本、把图片转换成一个图片地址的 js 变量或 base64 编码等)，然后用 CommonJS 的机制管理起来。一开始对于这种技术形态我个人还是不太喜欢的，不过随着不断的实践和体验，也逐渐习惯并认同了。

最后，对于之前提到的 Vue.js，作者也提供了一个叫做 vue-loader 的 npm 包 ，可以把 *.vue 文件转换成 webpack 包，和整个打包过程融合起来。所以有了 Vue.js、webpack 和 vue-loader，我们自然就可以把它们组合在一起试试看！