vue假全家桶升级方式，形成类似于小程序的路径管理（新增require-css与require-text）

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文件正常即可，然后就可以像小程序一样了，也是像小程序一样每次新建页面都要先导入依赖