Vue2不使用webapck等打包工具异步加载

原因

vue2的学习成本低,如果团队的技术能力不是特别强的话用vue还是可以很快上手的,现在前端各种webapck/gulp/cli等等的工具看着挺懵逼的,因为不是专业的纯前端开发,搞这些玩意儿会很费劲,就是用上了还得考虑一下团队成员是否能搞定,最近有个小项目因为是要放在java项目中去的,去集成webpack就呵呵呵了

我简单的搞了一个vue2的框架,没有全家桶,还有requirejs用的不多,用的不对该吐槽的吐槽

目录结构

大概就是这个样子的

+ pages
    + foo
        + foo.html
        + foo.js
        + foo.css
    + bar
        + bar.html
        + bar.js
        + bar.css
+ index.html
+ main.js
+ router.js
index.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue</title>
</head>

<body>
    <div id="app">
        <h1>Hello</h1>
        <div>
            <router-link to="/foo">Go to Foo</router-link>
            <router-link to="/bar">Go to Bar</router-link>
        </div>
        <router-view></router-view>
    </div>
    <!-- vue -->
    <script src="https://cdn.bootcss.com/vue/2.5.9/vue.js"></script>
    <!-- ui -->
    <script src="https://cdn.bootcss.com/mint-ui/2.2.13/index.js"></script>
    <!-- 路由 -->
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
    <!-- ajax -->
    <script src="https://cdn.bootcss.com/axios/0.17.1/axios.js"></script>
    <!-- 注意这个我是放在后面的,如果放在前面就要去配置了,具体怎么玩儿我就不知道了 -->
    <script src="https://cdn.bootcss.com/require.js/2.3.5/require.min.js" data-main="main.js"></script>
</body>

</html>
main.js
(function () {
    require.config({
        paths: {
            // 加载模板
            text: 'https://cdn.bootcss.com/require-text/2.0.12/text',
            // 加载样式
            'require-css': 'https://cdn.bootcss.com/require-css/0.1.10'
        },
        map: {
            '*': {
                'css': 'require-css/css.min' // or whatever the path to require-css is
            }
        }
    });

    require(['./router'], function (router) {
        window.app = new Vue({
            el: '#app',
            router: router
        });
    });
})();
router.js
define(function () {
    var routerConfig = [{
        path: '/foo',
        templateUrl: './pages/foo/foo.html',
        script: './pages/foo/foo',
        style: './pages/foo/foo.css'
    }, {
        path: '/bar',
        templateUrl: './pages/bar/bar.html',
        script: './pages/bar/bar.js',
        style: './pages/bar/bar.css'
    }];

    var routes = [];

    routerConfig.forEach(function (params) {
        parseRouter(params);
        if (params.children && params.children instanceof Array) {
            params.children.forEach(function (child) {
                parseRouter(child);
            });
        }
        routes.push(params);
    });

    function parseRouter(params) {
        var reqArr = [];

        if (!params.template && !params.templateUrl) {
            return params;
        }

        reqArr.push(params.templateUrl ? 'text!' + params.templateUrl : '');
        reqArr.push(params.script || '');
        reqArr.push(params.style ? 'css!' + params.style : '');

        params.component = function (resolve, reject) {
            require(reqArr, function (template, script) {
                script = script || {};
                script.template = template || params.template;
                resolve(script);
            });
        };
    };

    var router = new VueRouter({
        routes: routes
    });
    return router;
});
foo.html

注意:vue模板根节点只能有一个

<div>
    <h1>foo</h1>
</div>
foo.js
define(function () {
    return {
        data: function () {
            return {
                foo: 1
            };
        }
    };
});

大概就是这个样子吧,有什么不对随便吐槽

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值