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

最新推荐文章于 2024-04-27 08:39:59 发布

CGod丶

最新推荐文章于 2024-04-27 08:39:59 发布

阅读量757

点赞数 1

分类专栏： vue-js 异步文章标签： vue2 异步前端开发框架

本文链接：https://blog.csdn.net/a564167971/article/details/78902735

版权

vue-js 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

异步

1 篇文章 0 订阅

订阅专栏

原因

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
            };
        }
    };
});

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

CGod丶

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue2不使用webapck等打包工具异步加载

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

扫一扫

专栏目录