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上面。

秒客网

vue+webpack开发（一）

相关文章