forked from jingchenxu/vueback
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
134 lines (129 loc) · 4.33 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue demo</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="app">
<div class="leftMenu">
<!--<my-menu v-bind:menu="menu" v-for="menu in menuList"></my-menu>-->
<my-menulist></my-menulist>
</div>
<div class="rightContent">
<my-navigator v-bind:user="user"></my-navigator>
<my-tabbar></my-tabbar>
<div class="main">
<router-view></router-view>
</div>
</div>
</div>
</body>
<!--<script src="js/vue.min.js"></script>-->
<!--外部引入框架js-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="//cdn.bootcss.com/require.js/2.2.0/require.min.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<!--全局配置文件-->
<script src="config/AlertInfo.js"></script>
<script src="config/BaseComponents.js"></script>
<script src="config/IndexConfig.js"></script>
<!--工具类-->
<script src="utils/MyPlugin.js"></script>
<!--全局通用组件-->
<script src="components/BaseComponent.js"></script>
<script src="components/Demo.js"></script>
<script src="components/MyComponent.js"></script>
<script src="components/Navigator.js"></script>
<script src="components/TabBar.js"></script>
<script src="components/Menu.js"></script>
<script src="components/ListPage.js"></script>
<script src="components/ListPage.js"></script>
<script src="components/EmptyPanel.js"></script>
<script src="components/MenuList.js"></script>
<!--页面-->
<script src="views/Foo.js"></script>
<script src="views/Bar.js"></script>
<script src="views/Radio.js"></script>
<script src="views/OrderDetail.js"></script>
<script src="views/DemoPage.js"></script>
<script src="views/OrderList.js"></script>
<script src="views/TestVuex.js"></script>
<script src="views/TestDraw.js"></script>
<script src="views/LifeCycle.js"></script>
<script src="views/TestForm.js"></script>
<!--store相关-->
<script src="store/testvue.js"></script>
<script src="store/testapps.js"></script>
<script>
// 组件应该先注册方能使用,同时创建与注册组件
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{todo.text}}</li>'
});
Vue.component('vuedemo', {
template: '<div>show message</div>'
});
//注入工具方法
Vue.use(MyPlugin);
//注册全局组件
Vue.component('my-component', MyComponent);
Vue.component('my-navigator', Navigator);
Vue.component('my-tabbar', TabBar);
Vue.component('my-menu', Menu);
Vue.component('my-menulist', MenuList);
//下面的是页面相关
var routes = [
{ path: '/foo', component: Foo},
{ path: '/bar', component: Bar},
{ path: '/radio', component: Radio},
{ path: '/listpage', component: ListPage},
{ path: '/orderdetail/:orderid', component: OrderDetail},
{ path: '/demopage', component: Demopage},
{ path: '/orderlist', component: OrderList},
{ path: '/testvuex', component: TestVuex},
{ path: '/testdraw', component: TestDraw},
{ path: '/lifecycle', component: LifeCycle},
{ path: '/testform', component: TestForm}
];
var router = new VueRouter({
routes: routes
});
var store = new Vuex.Store({
modules: {
testvue: testvue,
testapps: testapps
}
});
var app = new Vue({
el: '#app',
router: router,
store: store,
data: {
message: 'Hello Vue!',
groceryList: [
{id: 0, text: '蔬菜'},
{id: 1, text: '奶酪'},
{id: 2, text: '随便'}
],
user: {
username: 'jingchenxu',
age: 26
},
menuList: [
{id: '01', text: '第一个菜单'},
{id: '02', text: '第二个菜单'},
{id: '03', text: '第三个菜单'},
{id: '04', text: '第四个菜单'},
{id: '05', text: '第五个菜单'}
]
}
});
</script>
</html>