前言
之前用angularjs写单页应用可以无需node处理，再加上酱油君是个后台开发，不想搞两套项目，于是开始了伤心的折腾之旅。
above all,惯性致死徒增伤亡。
系列文章目录
1、vuejs 无node单页应用方案一（vue标签component ，is实现）
2、vuejs 无node单页应用方案二（babel-standalone or traceur，vue-router实现）
单页切换原理
1、通过以下标签动态切换组件
<component v-bind:is="currentView"><!-- 组件在 vm.currentview 变化时改变！ --></component>
2、组件通过loadComponent(自定义方法)动态加载
function loadComponent(name,url){
var result = null;
console.log(new Date());
$.ajax({
type: "GET",
url: url,
async:false,
dataType:'text',
success(data) {
var arr = [];
arr = data.split('/*###*/');
var template = arr[0];
result = arr[1];
result = result.replace('<script>','').replace('<\/script>','');
result = eval(result);
result.template = template;
},error(){}
});
return result;
}
NOTICE：这里有些优化点
a、组件如何按需加载
b、判断组件是否已创建
c、如何使用实现AMD、Commonjs标准的模块加载器
3、完整代码
topicZone.vue
说明：此处.vue文件和官网标准格式略有不同，但解析.vue文件生成component的算法完全自定义，所以完全可以使用和官网一样的格式
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
/*###*/
<script>
(function(){
return {
data() {
return {
tableData: [{
date: '2016-05-02',
name: 'IT小君',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
},
mounted:function(){
console.log('12222');
}
};
})();
</script>
index.html
<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
<title>IFace</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
<link rel="stylesheet" type="text/css" href="/style/bootstrap-3.3.7/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="/style/css/font-awesome-4.7.0/css/font-awesome.min.css" />
<script src="/style/js/jquery.min.js" type="text/javascript"></script>
<script src="/style/js/common.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
<el-row>
<el-col :span="4"><div class="grid-content bg-purple">IFace后台</div></el-col>
<el-col :span="20">
<el-menu theme="dark" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">处理中心</el-menu-item>
<el-submenu index="2">
<template slot="title">我的工作台</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
</el-submenu>
<el-menu-item index="3"><a href="#" target="_blank">订单管理</a></el-menu-item>
</el-menu>
</el-col>
</el-row>
<el-row>
<el-col :span="4">
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>导航一</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2"><i class="el-icon-menu"></i>导航二</el-menu-item>
<el-menu-item index="3"><i class="el-icon-setting"></i>导航三</el-menu-item>
</el-menu>
</el-col>
<el-col :span="20">
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>活动管理</el-breadcrumb-item>
<el-breadcrumb-item>活动列表</el-breadcrumb-item>
<el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>
<component v-bind:is="currentView"><!-- 组件在 vm.currentview 变化时改变！ --></component>
</el-col>
</el-row>
</div>
</body>
<link rel="stylesheet" type="text/css" href="/style/css/font-awesome-4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="/style/js/jquery.min.js" type="text/javascript"></script>
<style>
body{margin:0px}
</style>
<script>
var vueApp = new Vue({
el: '#app',
data: {
activeIndex: '1',
activeIndex2: '1',
currentView: 'home'
},components: {
home: loadComponent('home','backend/components/layout.vue'),
posts: loadComponent('posts','backend/components/topicZone.vue'),
archive: { /* ... */ }
}, methods: {
handleSelect:function(key, keyPath) {
console.log(key, keyPath);
},handleOpen:function(key, keyPath) {
console.log(key, keyPath);
},handleClose:function(key, keyPath) {
console.log(key, keyPath);
}
}
});
function loadComponent(name,url){
var result = null;
console.log(new Date());
$.ajax({
type: "GET",
url: url,
async:false,
dataType:'text',
success(data) {
var arr = [];
arr = data.split('/*###*/');
var template = arr[0];
result = arr[1];
result = result.replace('<script>','').replace('<\/script>','');
result = eval(result);
result.template = template;
},error(){}
});
return result;
}
</script>
</html>
献祭结束，请尽情享用
交流加群：391053981
支付宝打赏
微信打赏