vue+webpack开发（一）

一开始接触这个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上面。