Skip to content

Commit bccba20

Browse files
sonicoder86sonicoder86
committed
feat(layout): elements with layout html
1 parent 1586cdf commit bccba20

File tree

10 files changed

+107
-82
lines changed

10 files changed

+107
-82
lines changed

‎package-lock.json

+6-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@
99
},
1010
"dependencies": {
1111
"core-js": "^2.6.5",
12+
"todomvc-app-css": "^2.2.0",
13+
"uuid": "^3.3.3",
1214
"vue": "^2.6.10"
1315
},
1416
"devDependencies": {

‎public/index.html

+4-5
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7-
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8-
<title>todoapp-vue</title>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<meta name="description" content="TodoApp built with Vue and Vuex"/>
7+
<title>TodoApp built with Vue and Vuex</title>
98
</head>
109
<body>
1110
<noscript>

‎src/App.vue

+14-15
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,27 @@
11
<template>
22
<div id="app">
3-
<img alt="Vue logo" src="./assets/logo.png">
4-
<HelloWorld msg="Welcome to Your Vue.js App"/>
3+
<section class="todoapp">
4+
<Header />
5+
<List />
6+
<Footer />
7+
</section>
8+
<footer class="info">
9+
<p>Double-click to edit a todo</p>
10+
<p>Created by <a href="http://github.com/blacksonic/">blacksonic</a></p>
11+
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
12+
</footer>
513
</div>
614
</template>
715

816
<script>
9-
import HelloWorld from './components/HelloWorld.vue'
17+
import Header from './components/Header.vue';
18+
import List from './components/List.vue';
19+
import Footer from './components/Footer.vue';
1020
1121
export default {
1222
name: 'app',
1323
components: {
14-
HelloWorld
24+
Header, List, Footer
1525
}
1626
}
1727
</script>
18-
19-
<style>
20-
#app {
21-
font-family: 'Avenir', Helvetica, Arial, sans-serif;
22-
-webkit-font-smoothing: antialiased;
23-
-moz-osx-font-smoothing: grayscale;
24-
text-align: center;
25-
color: #2c3e50;
26-
margin-top: 60px;
27-
}
28-
</style>

‎src/components/Footer.vue

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<footer class="footer">
3+
<span class="todo-count"><strong>2</strong><span> items left</span></span>
4+
<ul class="filters">
5+
<li>
6+
<a href="#" class="selected">
7+
All
8+
</a>
9+
<a href="#" class="">
10+
Active
11+
</a><a href="#" class="">
12+
Completed
13+
</a>
14+
</li>
15+
</ul>
16+
<button class="clear-completed">Clear completed</button>
17+
</footer>
18+
</template>
19+
20+
<script>
21+
export default {
22+
name: 'Footer'
23+
};
24+
</script>

‎src/components/Header.vue

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<template>
2+
<header class="header">
3+
<h1>todos</h1>
4+
<input
5+
class="new-todo"
6+
placeholder="What needs to be done?"
7+
/>
8+
</header>
9+
</template>
10+
11+
<script>
12+
export default {
13+
name: 'Header'
14+
};
15+
</script>

‎src/components/HelloWorld.vue

-58
This file was deleted.

‎src/components/Item.vue

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<template>
2+
<li>
3+
<div class="view">
4+
<input
5+
class="toggle"
6+
type="checkbox"
7+
/>
8+
<label>Do it now</label>
9+
<button class="destroy" />
10+
</div>
11+
<!--<input class="edit" value="" />-->
12+
</li>
13+
</template>
14+
<script>
15+
export default {
16+
name: 'Item'
17+
};
18+
</script>

‎src/components/List.vue

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
<section class="main">
3+
<input id="toggle-all" class="toggle-all" type="checkbox" />
4+
<label htmlFor="toggle-all"></label>
5+
6+
<ul class="todo-list">
7+
<Item />
8+
</ul>
9+
</section>
10+
</template>
11+
12+
<script>
13+
import Item from './Item.vue';
14+
15+
export default {
16+
name: 'List',
17+
components: {
18+
Item
19+
}
20+
};
21+
</script>

‎src/main.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import Vue from 'vue'
2-
import App from './App.vue'
1+
import Vue from 'vue';
2+
import App from './App.vue';
3+
import 'todomvc-app-css/index.css';
34

45
Vue.config.productionTip = false
56

0 commit comments

Comments
 (0)