一开始接触这个vue+webpack的时候，实在是摸不着头脑，根本无从下手。
但是经过这两天的研究，其实你会发现vue其实并不难，难度都在webpack你对webpack的理解。
webpack顾名思义就是专为web前端打造的打包工具。
一般基本情况下，它会根据你提供的js入口文件，按照里面import（或者require）的内容,生成一个打包好的一个js文件，跟着它会按照你提供的模板生成一个html文件（主要是帮你引入打包好的那个js文件）。
接着你想要用vue来开发，你就尽管在入口文件import vue的库就可以了。
配置好通用的webpack.config后,我们来了解下在webpack项目下怎么使用vue吧：
官方vue上的例子都是正常的html写法：
<script src="vue.js"></script>
而到了webpack项目，我们引入库的方式就是在入口js文件中引入了：
一般vue项目，至少用到vue、vue-router、vue-resource(现在官方推荐用axios)
import Vue from 'vue';
import Router from 'vue-router';
import VueResource from 'vue-resource';
当然我们得先安装好这些前端库：
npm i vue vue-resource vue-router --save //前端要到框架都存在dependencies上
一般来说，我们入口文件不会做过多的开发,所以这里就只创建一个Vue实例，然后把根组件引入渲染：
// 入口js文件
import Vue from 'vue';
import Router from 'vue-router';
import VueResource from 'vue-resource' ;
//组件
import App from '@/views/App';
import login from '@/components/login'; //这里正常来说其实是路由的范畴，不应该在这里引入 //Vue.use时在Vue对象注册要使用的全局组件
Vue.use(Router);
Vue.use(VueResource); //创建Vue实例
new Vue({
el: '#app', //模板html文件里面写一个div#app来放这个vue实例
router: new Router({
routes: [{path:'/',name:'login',component:login},{...},{...}]
}), //路由建议另外开一个文件来写，之后会另开博文介绍
template: '<app />',
components: {App}
});
App.vue:
<template>
<div id="app">
<router-view to="/"></router-view>
</div>
</template> <script>
export default {
name: 'App',
methods:{ }
}
</script> <style> </style>
我们给模板html的div#app插入了这个App组件，这个就是我们整个vue项目的根组件了，里面只放了一个router-view （路由插口），是我们上面写的router一对一控制的东西
根据路由配置，每一个url对应着一个组件，然后就会渲染到这个router-view上面。