1、路径布局大致就是这样，完全模拟小程序，主要是靠require来做到的
2、首先index.html是这样的（配置js和css没有用requireJs主要是方便而且载入什么组件比较清晰）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
<title></title>
<link rel="stylesheet" href="common/css/cssreset.css"/>
<link rel="stylesheet" href="common/css/swiper-3.4.2.min.css"/>
<script src="common/js/vue.min.js"></script>
<script src="common/js/vueRouter.js"></script>
<script src="common/js/iscroll.js"></script>
<script src="common/js/swiper-3.4.2.min.js"></script>
<script src="common/js/require.js" defer async="true" data-main="common/js/main"></script>
<style></style>
</head>
<body>
<div id="app">
<router-view name="body"></router-view>
<router-view name="foot"></router-view>
</div>
</body>
</html>
2、主要的配置main.js
/**
* Created by zcwl123 on 2017/5/23.
*/
//require配置
require.config({
baseUrl: "page",
paths: {
"foot":"foot/foot", //载入模块
"index":"index/index",
"order":"order/order"
},
map: {
'*': {
'text':'../common/js/text',//载入require-text
'css': '../common/js/css' //载入require-css
}
}
});
//导入依赖
var arr=['foot','index','order'];
define(arr, function(){
//路由主键
const routes = [
{ path: '/index', components: {
body:index,foot:foot
}
},
{ path: '/order', components: {
body:order,foot:foot
}
}
];
//创建导航
const router = new VueRouter({
routes: routes
});
//导航依赖
const app = new Vue({
router:router
}).$mount('#app');
});
3、模块当中index.js文件这样布局
var index;
var arr=['text!index.html'];//载入html文件
define(arr, function(html){
index = {
//html
template:html,
//数据
data:function(){
return {
test:3
}
},
//方法
methods:{
},
//vue钩子
mounted: function () {
//切换到每一个页面，切换不同的css
require(['text!index.css'], function (css) {
document.getElementsByTagName("style")[0].innerHTML=css;
});
}
};
});
4、因为是使用最初级的vue组件的方法，所以组件一定要有一个大标签包围。模块index.html文件
<div id="index">
空白
</div>
5、css文件正常即可，然后就可以像小程序一样了，也是像小程序一样每次新建页面都要先导入依赖