原因
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
};
}
};
});
大概就是这个样子吧,有什么不对随便吐槽