Skip to content

Commit 6ccf238

Browse files
PlortinusPlortinus
committed
add more examples
1 parent 575f740 commit 6ccf238

File tree

8 files changed

+182
-69
lines changed

8 files changed

+182
-69
lines changed

‎README.md‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ npm run dev
3131

3232
[http://localhost:8010/user/index.html](http://localhost:8010/user/index.html)
3333

34+
[http://localhost:8010/customer/index.html](http://localhost:8010/customer/index.html)
35+
3436
## Build
3537

3638
``` bash
@@ -50,12 +52,17 @@ node server.js
5052
│ │ └── img # img
5153
│ ├── components # components
5254
│ └── pages # pages
53-
│ └── user # user part
54-
│ ├── index # index.html
55-
│ │ ├── app.js # entry js
56-
│ │ ├── app.html # html template
57-
│ │ └── app.vue # main vue for login
58-
│ └── login # login.html
55+
│ ├── user # user part
56+
│ │ ├── index # index.html
57+
│ │ │ ├── app.js # entry js
58+
│ │ │ ├── app.html # html template
59+
│ │ │ └── app.vue # main vue for login
60+
│ │ └── login # login.html
61+
│ │ ├── app.js # entry js
62+
│ │ ├── app.html # html template
63+
│ │ └── app.vue # main vue for login
64+
│ └── customer # customer part
65+
│ └── home # home.html
5966
│ ├── app.js # entry js
6067
│ ├── app.html # html template
6168
│ └── app.vue # main vue for login

‎src/pages/customer/home/app.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6+
<meta name="format-detection" content="telephone=no,email=no">
7+
<title>Vue2.0 + ElementUI + Multipages + Webpack2</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
</body>
12+
</html>

‎src/pages/customer/home/app.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Vue from 'vue'
2+
import ElementUI from 'element-ui'
3+
import 'element-ui/lib/theme-default/index.css'
4+
import App from './app.vue'
5+
6+
Vue.use(ElementUI)
7+
8+
new Vue({
9+
el: '#app',
10+
render: h => h(App)
11+
})

‎src/pages/customer/home/app.vue‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<template>
2+
<div id="app">
3+
<div class="dd">
4+
Home
5+
</div>
6+
<img v-bind:src="logoImg">
7+
<h1>{{ msg }}</h1>
8+
<el-button @click.native="startHacking">Let's do it</el-button>
9+
</div>
10+
</template>
11+
12+
<script>
13+
import logo from 'assets/img/logo.png'
14+
export default {
15+
data () {
16+
return {
17+
msg: 'Use Vue 2.0 Today!',
18+
logoImg: logo
19+
}
20+
},
21+
22+
methods: {
23+
startHacking () {
24+
this.$notify({
25+
title: 'It Works',
26+
message: 'We have laid the groundwork for you. Now it\'s your time to build something epic!',
27+
duration: 6000
28+
})
29+
}
30+
}
31+
}
32+
</script>
33+
34+
<style lang="postcss">
35+
body {
36+
background-color: #f5f5f5;
37+
}
38+
:root h1 {
39+
--color: red;
40+
display: flex;
41+
color: var(--color);
42+
}
43+
</style>

‎src/pages/user/index/app.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="utf-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
66
<meta name="format-detection" content="telephone=no,email=no">
7-
<title>Vue2.0 + ElementUI + Multipages + Webpack2</title>
7+
<title>Index</title>
88
</head>
99
<body>
1010
<div id="app"></div>

‎src/pages/user/index/app.vue‎

Lines changed: 41 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,54 @@
11
<template>
22
<div id="app">
3-
<h1>Use PostCSS</h1>
4-
<modal></modal>
5-
<div class="dd">
6-
Index
7-
</div>
8-
<img v-bind:src="logoImg">
9-
<h1>{{ msg }}</h1>
10-
<el-button @click.native="startHacking">Let's do it</el-button>
3+
<el-card class="index-card">
4+
<div slot="header">
5+
My Codes
6+
</div>
7+
<ul>
8+
<li>
9+
<a href="https://github.com/Plortinus/vue-multiple-pages" target="_blank">
10+
Vue Multiple Pages
11+
</a>
12+
</li>
13+
<li>
14+
<a href="https://github.com/Plortinus/element-china-area-data" target="_blank">
15+
Element China Area Data
16+
</a>
17+
</li>
18+
</ul>
19+
<el-button type="primary" @click="gogogo">To Customer Home Page</el-button>
20+
<el-button type="primary" plain @click="tototo">To User Login Page</el-button>
21+
</el-card>
1122
</div>
1223
</template>
1324

1425
<script>
15-
import logo from 'assets/img/logo.png'
16-
import modal from 'components/modal.vue'
17-
export default {
18-
components: {
19-
modal
20-
},
21-
data () {
22-
return {
23-
msg: 'Use Vue 2.0 Today!',
24-
logoImg: logo
25-
}
26-
},
27-
28-
methods: {
29-
startHacking () {
30-
this.$notify({
31-
title: 'It Works',
32-
message: 'We have laid the groundwork for you. Now it\'s your time to build something epic!',
33-
duration: 6000
34-
})
26+
import logo from 'assets/img/logo.png'
27+
import modal from 'components/modal.vue'
28+
export default {
29+
components: {
30+
modal
31+
},
32+
data () {
33+
return {
34+
msg: 'Use Vue 2.0 Today!',
35+
logoImg: logo
36+
}
37+
},
38+
methods: {
39+
gogogo () {
40+
location.assign('../customer/home.html')
41+
},
42+
tototo () {
43+
location.assign('../user/login.html')
44+
}
3545
}
3646
}
37-
}
3847
</script>
3948

4049
<style lang="postcss">
41-
body {
42-
background-color: #f5f5f5;
43-
}
44-
:root h1 {
45-
--color: red;
46-
display: flex;
47-
color: var(--color);
50+
.index-card {
51+
width: 800px;
52+
margin: 100px auto;
4853
}
4954
</style>

‎src/pages/user/login/app.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="utf-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
66
<meta name="format-detection" content="telephone=no,email=no">
7-
<title>Vue2.0 + ElementUI + Multipages + Webpack2</title>
7+
<title>Login</title>
88
</head>
99
<body>
1010
<div id="app"></div>

‎src/pages/user/login/app.vue‎

Lines changed: 60 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,73 @@
11
<template>
2-
<div id="app">
3-
<div>
4-
Login
2+
<el-card class="login-card">
3+
<div slot="header">
4+
<img :src="logo" class="logo-img">
5+
<span class="logo-text">Management System</span>
56
</div>
6-
<img v-bind:src="logoImg">
7-
<h1>{{ msg }}</h1>
8-
<el-button @click.native="startHacking">Let's do it</el-button>
9-
</div>
7+
<el-form class="login" :rules="rules" ref="ruleForm" :model="ruleForm" label-width="100px" >
8+
<el-form-item label="Phone" prop="phone">
9+
<el-input placeholder="Please enter phone number" icon="my-phone" v-model="ruleForm.phone" type="tel" :maxlength="11"></el-input>
10+
</el-form-item>
11+
<el-form-item label="Password" prop="password">
12+
<el-input placeholder="Please enter password" icon="my-password" v-model="ruleForm.password" type="password" @keyup.enter="login"></el-input>
13+
</el-form-item>
14+
<el-form-item>
15+
<el-button type="primary" @click="login">Login</el-button>
16+
</el-form-item>
17+
</el-form>
18+
</el-card>
1019
</template>
1120

1221
<script>
13-
import logo from 'assets/img/logo.png'
14-
export default {
15-
data () {
16-
return {
17-
msg: 'Use Vue 2.0 Today!',
18-
logoImg: logo
19-
}
20-
},
22+
import qs from 'qs'
23+
import logo from 'assets/img/logo.png'
24+
25+
export default {
26+
data () {
27+
return {
28+
logo: logo,
29+
ruleForm: {
30+
phone: '',
31+
password: ''
32+
},
33+
rules: {
34+
phone: [
35+
{ required: true, message: 'Phone required', trigger: 'blur' }
36+
],
37+
password: [
38+
{ required: true, message: 'Password required', trigger: 'blur' }
39+
]
40+
}
41+
}
42+
},
2143
22-
methods: {
23-
startHacking () {
24-
this.$notify({
25-
title: 'It Works',
26-
message: 'We have laid the groundwork for you. Now it\'s your time to build something epic!',
27-
duration: 6000
28-
})
44+
methods: {
45+
login () {
46+
this.$refs.ruleForm.validate((valid) => {
47+
if (!valid) {
48+
return
49+
}
50+
location.assign('../user/index.html')
51+
})
52+
}
2953
}
3054
}
31-
}
3255
</script>
3356

3457
<style>
35-
body {
36-
background-color: #c3c3c3;
58+
.login-card {
59+
width: 800px;
60+
margin: 100px auto;
61+
}
62+
.login {
63+
display: block;
64+
width: 400px;
65+
margin: 100px auto;
66+
}
67+
.logo-img {
68+
width: 90px;
69+
}
70+
.logo-text {
71+
margin-left: 20px;
3772
}
3873
</style>

0 commit comments

Comments
 (0)