Vue2.0 + vue-router + Vuex 实战（导入并使用外部API）

首先发个项目GitHub地址： https://github.com/RobbieXie/...

有兴趣的可以clone项目下来学习下，先说说项目吧，导师让做一个陈年老项目WebGIS的重构，前端我们选择了没接触过的Vue，听说很不错，特地试一试，我们抛开业务不谈，在项目中我们使用了Vue2.0+VueRouter来控制页面显示和路由，通过Vuex来管理一些全局信息，比如用户Session信息等。

我们的界面由四个子组件构成，分别为左侧的navigation栏，右侧上部的header栏、右侧中部的mainpage栏，和右侧下部的footer栏。子组件之间可以共享用户的session信息、session信息通过vuex来统一进行管理。最终，通过Vue-router进行页面之间的切换，最终实现了单页面应用的功能。

代码目录结构如下：

我们参考了vuex官方教程中给出的项目结构，store用于存储全局信息、component用于用户自定义组件、views目录下放着所有的界面文件、router中配置页面路由信息、整个项目的入口在main.js、并配置App页面进行显示。App页面是包括四个子页面的父页面。

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  store,
  components: {
    App
  }
})

App.vue

<template>

<div id="app-wrapper">

    <router-view name="navigation"></router-view>

    <div id="page-wrapper" class="gray-bg">
        <router-view name="header"></router-view>
        <router-view name="mainPage"></router-view>
        <router-view name="footer"></router-view>
    </div>
</div>
</template>

<script>
export default {
  name: 'app'
}
</script>

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Footer from '@/views/footBar'
import Header from '@/views/headBar'
import Navigation from '@/views/navBar'
import mapPage from '@/views/baidu'
import Index from '@/views/Index'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/index'
    },
    {
      path: '/index',
      name: 'index',
      components: {
        navigation: Navigation,
        header: Header,
        mainPage: Index,
        footer: Footer
      }
    },
    {
      path: '/baidu',
      name: 'mapPage',
      components: {
        navigation: Navigation,
        header: Header,
        mainPage: mapPage,
        footer: Footer
      }
    },
    {
      path: '*',
      name: 'others',
      redirect: '/index'
    }
  ]
})

store我们不在列出，可以自行下载代码研究，vuex的官方文档地址：http://vuex.vuejs.org/zh-cn/

除了vue的基本功能、本项目还使用了百度地图的API，希望知道vue如何引用外部API的同学也可以参照本项目配置；引入外部API步骤：

1.修改webpack的配置文件，加入externals标签；

2.在index.html中加入百度api的链接<!-- Baidu API -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yourak"></script>

3.在使用百度地图API的地方便可直接调用，需要注意的是，所执行的有关外部API的操作需要在vue的mounted()函数内执行，mounted代表页面已经加载完成在执行，否则可能执行API时还没有完成对其的加载、会报错。
<template>
  <div class="wrapper wrapper-content animated fadeInRight">
      <p>baidu map</p>
      <div class="ibox-content" id="map" style="position: relative; height: 820px"></div>
  </div>
</template>

<script>
export default {
  name: 'mapPage' ,
  mounted(){
      console.log(999)
      //百度地图加载完成会调用这里，这里就可以正常初始化了
      var map = new BMap.Map('map')   // 创建Map实例
      map.centerAndZoom(new BMap.Point(121.76, 31.05), 11)  // 初始化地图,设置中心点坐标和地图级别
      map.addControl(new BMap.MapTypeControl())   // 添加地图类型控件
      //    map.setCurrentCity("上海");          // 设置地图显示的城市 此项是必须设置的
      map.enableScrollWheelZoom(true)    // 开启鼠标滚轮缩放
  }
}

</script>