非webpack require.js + vue + vueRouter + iView 实现按需加载

最新推荐文章于 2021-01-26 16:09:24 发布

chenmianshi9231

最新推荐文章于 2021-01-26 16:09:24 发布

阅读量233

点赞数

文章标签： webpack ViewUI

原文链接：https://my.oschina.net/woddp/blog/3066332

版权

适合一个人开发的时候，在整个php框架下，又想单页，又可以直接后端assign变量穿透到模板。又不想写接口搞前后分离脚手架一大堆npm 包,

在php模板下引入require.js

<!DOCTYPE html>
<html lang="zh_CN" style="overflow: hidden;">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <meta charset="utf-8">
    <title>{:lang('ADMIN_CENTER')}</title>
    <meta name="description" content="This is page-header (.page-header &gt; h1)">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <link href="__TMPL__/public/assets/themes/{:cmf_get_admin_style()}/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
    <!--<script src="__TMPL__/public/assets/js/lib/require.min.js" data-main="../../js/main.js"></script>-->
</head>
<body>
<div id="app">
    <router-view></router-view>
</div>
<script src="__TMPL__/public/assets/js/require.js" defer async="true" data-main="__TMPL__/public/page/init"  ></script>
</body>
</html>

然后在require.js 中配置

// 全局配置

require.config({
    baseUrl: '/themes/admin_simpleboot3/public/',
    paths: {
        text: 'assets/js/require.text',
        css: 'assets/js/require.css',
        // 引入jQuery
        jquery: 'assets/js/jquery-1.10.2.min',
        vue: 'assets/js/vue',
        vueRouter: 'assets/js/vue-router',
        iview: 'assets/js/iview.min',
        loadComponent: 'assets/js/loadComponent',
        main: 'page/main',
        user: 'page/user',
        userc: 'page/user',

    },
    shim: {
        iview: {
            deps: ['vue'],
            exports: 'iview'
        },
    },
    map: {
    }
})

//全局配置
require(['vue', 'iview', 'vueRouter', 'css!assets/css/common'], function (Vue, iView, VueRouter) {


    //按需加载
    var setComponent = function (name, component) {
        Vue.component(name, function (resolve, rejectreject) {
            require([component],function (params) {
                resolve(params)
            })
        });
    }


    setComponent('w-main', 'main');
    setComponent('w-user','user');



    const routes = [
        {path: '/', component: {template: '<w-main></w-main>'},children:[
                {path: '/user', component: {template: '<w-user></w-user>'}},
                {path: '/bar', component: {template: '<div>bar</div>'}},
                {path: '/foot', component: {template: '<div>foot</div>'}}
         ]},
    ]
    const router = new VueRouter({
        routes // (缩写) 相当于 routes: routes
    })




    Vue.use(iView)
    Vue.use(VueRouter)

    var vue = new Vue({
        el: "#app",
        router,
        data: {
            msg: "1",
        }
    });
})

使用require.text.js 加载页面，使用require.css.js 加载css

require.text.js 直接获取后端

define(['vue','text!/admin/main','css!assets/css/main'],function (Vue,html) {
      return {
          template:html,
          data () {
              return {
                  isCollapsed: false
              }
          },
          computed: {
              rotateIcon () {
                  return [
                      'menu-icon',
                      this.isCollapsed ? 'rotate-icon' : ''
                  ];
              },
              menuitemClasses () {
                  return [
                      'menu-item',
                      this.isCollapsed ? 'collapsed-menu' : ''
                  ]
              }
          },
          methods: {
              collapsedSider () {
                  this.$refs.side1.toggleCollapse();
              }
          }
      }
});

切换路由可以看到user 是按需加载的并没有一次新加载完成

转载于:https://my.oschina.net/woddp/blog/3066332

chenmianshi9231

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
非webpack require.js + vue + vueRouter + iView 实现按需加载

适合一个人开发的时候，在整个php框架下，又想单页，又可以直接后端assign变量穿透到模板。又不想写接口搞前后分离脚手架一大堆npm 包, 在php模板下引入require.js <!DOCTYPE html><html lang="zh_CN" style="o...
复制链接

扫一扫