公司项目太老不想重构又想能使用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
