一个简单的假vue全家桶(vue+vue-router+require)

首先说明我觉得这是一个比较好理解的vue全家桶（虽然是假的），模块化也是用require来做的，而且如果后期有必要压缩我也会用gulp来做

1、依赖个个本地模块，require只是用来载入page，这样比较清晰

<script src="common/vue.js"></script>　　//载入vue.js
<script src="common/vueRouter.js"></script>　　//载入vueRouter
<script src="common/iscroll.js"></script>　　//载入iscorll5(一个滑动插件)
<script src="common/require.js" defer async="true" data-main="common/main"></script>　　//require载入模板

2、html主要关注就是router方面

    <div id="app">
        <h1>Hello App!</h1>
        <p>
            <!-- 使用 router-link 组件来导航. -->
            <!-- 通过传入 `to` 属性指定链接. -->
            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
            <router-link to="/foo">Go to Foo</router-link>
            <router-link to="/bar">Go to Bar</router-link>
        </p>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>

3、再看main.js也就是配置文件，主要结合有router和require在同一个js进行配置

//require配置
require.config({
    baseUrl: "page",
    paths: {
        "foo": "foo",
        "index":"index"
    }
});
//导入依赖
var arr=['foo','index'];

define(arr, function(){
    // 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)

    // 1. 定义（路由）组件。
    // 可以从其他文件 import 进来

    const Bar = { template: '<div>bar</div>' };
    // 2. 定义路由
    // 每个路由应该映射一个组件。 其中"component" 可以是
    // 通过 Vue.extend() 创建的组件构造器，
    // 或者，只是一个组件配置对象。
    // 我们晚点再讨论嵌套路由。
    const routes = [
        { path: '/',    component:index},
        { path: '/foo', component: Foo },
        { path: '/bar', component: Bar }
    ];

    // 3. 创建 router 实例，然后传 `routes` 配置
    // 你还可以传别的配置参数, 不过先这么简单着吧。
    const router = new VueRouter({
        routes: routes // （缩写）相当于 routes: routes
    });

    // 4. 创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由，
    // 从而让整个应用都有路由功能
    const app = new Vue({
        router:router
    }).$mount('#app');

    // 现在，应用已经启动了！
});

4、剩下的就是page模块问题

const index = {
    //html
    template: `
    <div>
        {{test}}
    </div>
    `,
    //数据
    data:function(){
        return {
            test:3
        }
    },
    //方法
    methods:{

    },
    //vue钩子
    mounted: function () {

    }
};

后话：因为不想vue的单页面组件那样能在单页写css样式，其他都还好说，目前的话单页应用我也只是在index.html写下全部的css