思路：从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界面效果如下：
网友评论