vue+cesiumjs+requirejs+iview 整合

思路：从csdn上下载所需引用的js库文件，使用requirjs的配置管理所有的js库文件，从而方便调用，vue中的模板采用html形式，以AMD规范的js作为加载脚本。

项目的目录结构：

大致的js库文件如下：

相关的js库文件可以自行百度下载

在index.html的入口文件中，引入require.js，以及config.js

config.js文件如下 （require.js的配置不明白可以自行百度）

require.config({

    baseUrl : "./src",        //基目录

    paths :{                  //js库路径

        jquery: "./lib/jquery.min",

        vue: "./lib/vue",

        vueResource: "./lib/vue-resource.min",

        vueX: "./lib/vuex",

        vueRouter: "./lib/vue-router",

        api: "./api/index",

        lodash: "./lib/lodash.min",

        text: "./text",

        axios: './lib/axios.min',

        Cesium: './assets/js/Cesium/Cesium',

        Zlib: './assets/js/Cesium/Workers/zlib.min',

        ChangeablePrimitive: './assets/js/Tools-04ChangeablePrimitive',

        TooltipDiv: './assets/js/Tools-02Tooltip-div',

        Less: './lib/less.min',

        iview: './lib/iview.min'

      /* bootstrap : "./assets/js/bootstrap/js/bootstrap.min",

        ripples : "./assets/js/bootstrap-material-design/js/ripples.min",

        material:"./assets/js/bootstrap-material-design/js/material.min"*/

    },

    shim : { 

        //不是AMD规范的js库在此导出

        /*bootstrap : ['jquery'],

        ripples:['jquery'],

        material:['jquery'],*/

        Cesium: {

            exports: 'Cesium'

        },

        Zlib: {

            exports: 'Zlib'

        },

        iview: {

            deps: ['vue'],

            exports: 'iview'

        },

        TooltipDiv: {

            exports: 'TooltipDiv'

        },

        ChangeablePrimitive: {

            deps: ['Cesium','TooltipDiv'],

            exports: 'ChangeablePrimitive'

        }

    },

    packages: [

        {

            name: 'components',

            location: 'component',

            main: 'components'

        },

        {

            name : "vuex",

            location :"vuex",

            main : "vuex"

        }

    ]

})

require(["./main"])      //程序的入口js文件

在main文件中，new 一个vue的实例

define(['vue','jquery','axios','iview','vuex/store','./Router/index','./api','ChangeablePrimitive','Less'],function(Vue,$,axios,iview,Store,Router,API){

    //var ChangeablePrimitiveTool = require("ChangeablePrimitive");

    Vue.use(iview);

    Vue.prototype.$axios = axios;

    Vue.prototype.$API = API;

    Vue.config.debug = true;

    Vue.config.devtools = true;

    new Vue({

        el : "#app",

        router: Router,

        store: Store

    });

});

接下来就是vue中的路由配置和组件的编写

***与vue工程唯一的区别就是vue中的.vue文件全部由html文件和js文件代替，html相当于模板，js相当于逻辑，样式可以用.css或.less文件编写，在index.html中引入即可

html文件 js文件

其他的都和vue工程一样

项目demo界面效果如下：