美文网首页
script引入Vue的单页配置

script引入Vue的单页配置

作者: 怪怪牛 | 来源:发表于2019-11-04 09:54 被阅读0次

公司项目太老不想重构又想能使用vue的spa与时俱进.

-单页应用
-使用数据状态管理store
-组件化

通过require.js来异步加载js进行单页应用
reuire-css.js异步加载css
require-text.js加载html文件来配置vue所需要的template
vue-router根据路由加载不同的js
vue-store

首次加载的html

<!DOCTYPE html>
<html>
<head>
    <title> </title>
  <!-- jQuery 3 -->
  <script src="/static/lib/jquery.js"></script>
    <!-- XXXX一些需要全局加入的css和js文件 -->
</head>
<body >
  <div class="wrapper" id="app"></div><!--vue加载区域-->
</body>
<script type="text/javascript" data-main="/src/app" src="/static/lib/require.js"></script>
<!--加载src下的ass.js文件-->
</html>
新建src页面
QQ截图20190916100534.png

app.js异步加载所需的vue 等插件和配置require（require.js相关配置自己可以去查查）

(function (require, define) {
  require.config({
    baseUrl: "/",
    map: {
      '*': {
        'css': 'static/lib/require-css'
      }
    },
    paths: {
      vue: "static/lib/vue",
      vueRouter: "static/lib/vue-router",
      axios: "static/lib/axios",
      text: "static/lib/require-text",
      src: "src",
      component: "src/components",
      page: "src/page",
    },
    urlArgs: "bust=" + (new Date()).getTime()
  })
  require(["vue", "src/router", "text!src/layout.html", 'component/Header/index', 'component/Footer/index', 'component/Menu/index', ], function (Vue, router, template, CHeader, CFooter, CMenu) {
    const app = new Vue({
      el: '#app',
      router: router,
      template: template,
      components: {
        CHeader,
        CFooter,
        CMenu
      }
    });
  });
})(require, define);

router.js路由配置 store也差不多的配置

(function (define) {
  define(["vue", "vueRouter"], function (Vue, vueRouter) {
    Vue.use(vueRouter);
    var router = new vueRouter({
      routes: [{
        path: '/pageA',
        component: function (resolve) {
          require(['page/pageA/index'], (comp) => resolve(comp));
        }
      }, {
        path: '/pageB',
        component: function (resolve) {
          require(['page/pageB/index'], (comp) => resolve(comp));
        }
      }]
    })
    return router
  });
})(define);

layout.html

<div class="wrapper">
  <c-header></c-header>
  <c-menu></c-menu>
  <div class="content-wrapper">
    <router-view></router-view>
  </div>
  <c-footer></c-footer>
</div>

assets 静态文件夹
components：组件化文件夹 （每个组件下必须有index.js可有index.css，index.html）

例如Menu组件

/*index.css*/
.bg {
  color: #ff0000
}

<!--index.html/vue的temaplate的模板  -->
<aside class="main-sidebar bg">

  <section class="sidebar">
    <ul class="sidebar-menu" data-widget="tree">
      <li>
        <router-link to="/pageA"><i class="fa fa-circle-o"></i> 字典管理</router-link>
      </li>
      <li>
        <router-link to="/pageB"><i class="fa fa-circle-o"></i> 用户</router-link>
      </li>
    </ul>
  </section>
  <!-- /.sidebar -->
</aside>

//index.js 
(function (define) {
  define(["text!./index.html", "css!./index.css"], function (template) {
    return {
      template: template
    }
  });
})(define);

page文件下的是页面 跟components差不多。
pageA/index.js

//其实index.js里面return写法就是返回的vue的写法
(function (define) {
  define(["css!./index.css"], function (require, exports, module) {
    return {
      data() {
        return {
          data: "我是秃头"
        }
      },
      template: '<span>{{data}}</span>',
    }
  });
})(define);

如果需要使用es6语法支持低浏览器版本
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel" src="XXXX"></script>

效果如(因为我是基于二级页面开发的)：
11.gif

相关文章