Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 131d389

Browse files
init
0 parents commit 131d389

File tree

20 files changed

+700
-0
lines changed

20 files changed

+700
-0
lines changed

‎.babelrc

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"presets": [
3+
"es2015"
4+
],
5+
"plugins": [
6+
"transform-object-rest-spread"
7+
]
8+
}

‎.bootstraprc

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
---
2+
# Output debugging info
3+
# loglevel: debug
4+
5+
# Major version of Bootstrap: 3 or 4
6+
bootstrapVersion: 4
7+
8+
# If Bootstrap version 4 is used - turn on/off flexbox model
9+
useFlexbox: true
10+
11+
# Webpack loaders, order matters
12+
styleLoaders:
13+
- style
14+
- css
15+
- postcss
16+
- sass
17+
18+
# Extract styles to stand-alone css file
19+
# Different settings for different environments can be used,
20+
# It depends on value of NODE_ENV environment variable
21+
# This param can also be set in webpack config:
22+
# entry: 'bootstrap-loader/extractStyles'
23+
extractStyles: false
24+
# env:
25+
# development:
26+
# extractStyles: false
27+
# production:
28+
# extractStyles: true
29+
30+
31+
# Customize Bootstrap variables that get imported before the original Bootstrap variables.
32+
# Thus, derived Bootstrap variables can depend on values from here.
33+
# See the Bootstrap _variables.scss file for examples of derived Bootstrap variables.
34+
#
35+
# preBootstrapCustomizations: ./path/to/bootstrap/pre-customizations.scss
36+
37+
38+
# This gets loaded after bootstrap/variables is loaded
39+
# Thus, you may customize Bootstrap variables
40+
# based on the values established in the Bootstrap _variables.scss file
41+
#
42+
# bootstrapCustomizations: ./path/to/bootstrap/customizations.scss
43+
44+
45+
# Import your custom styles here
46+
# Usually this endpoint-file contains list of @imports of your application styles
47+
#
48+
# appStyles: ./path/to/your/app/styles/endpoint.scss
49+
50+
51+
### Bootstrap styles
52+
styles:
53+
54+
# Mixins
55+
mixins: true
56+
57+
# Reset and dependencies
58+
normalize: true
59+
print: true
60+
61+
# Core CSS
62+
reboot: true
63+
type: true
64+
images: true
65+
code: true
66+
grid: true
67+
tables: true
68+
forms: true
69+
buttons: true
70+
71+
# Components
72+
transitions: true
73+
dropdown: true
74+
button-group: true
75+
input-group: true
76+
custom-forms: true
77+
nav: true
78+
navbar: true
79+
card: true
80+
breadcrumb: true
81+
pagination: true
82+
jumbotron: true
83+
alert: true
84+
progress: true
85+
media: true
86+
list-group: true
87+
responsive-embed: true
88+
close: true
89+
badge: true
90+
91+
# Components w/ JavaScript
92+
modal: true
93+
tooltip: true
94+
popover: true
95+
carousel: true
96+
97+
# Utility classes
98+
utilities: true
99+
100+
### Bootstrap scripts
101+
scripts:
102+
alert: true
103+
button: true
104+
carousel: true
105+
collapse: true
106+
dropdown: true
107+
modal: true
108+
popover: true
109+
scrollspy: true
110+
tab: true
111+
tooltip: true
112+
util: true

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/node_modules
2+
/dist

‎README.md

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
#Setting-up exercises
2+
3+
4+
Webpack 2
5+
6+
Webpack 2 Dev Server
7+
8+
Vue 2
9+
10+
Vuex
11+
12+
Vue Router
13+
14+
Bootstrap 4
15+
16+
**Will be add Typescript support**
17+
18+
**Will be add HMR support**
19+
20+
##Usage
21+
22+
####for development
23+
24+
npm run dev
25+
26+
####for production
27+
28+
npm run prod

‎package.json

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
{
2+
"name": "todo-spa",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"dev": "npm i && webpack-dev-server",
8+
"prod": "npm run clean && npm i && set mode=prod&& webpack -p",
9+
"clean": "rimraf ./dist/*"
10+
},
11+
"author": "",
12+
"license": "MIT",
13+
"devDependencies": {
14+
"autoprefixer": "^6.7.7",
15+
"babel-cli": "^6.24.0",
16+
"babel-core": "^6.24.0",
17+
"babel-loader": "^6.4.1",
18+
"babel-plugin-transform-object-rest-spread": "^6.23.0",
19+
"babel-preset-es2015": "^6.24.0",
20+
"bootstrap-loader": "^2.0.0",
21+
"css-loader": "^0.27.3",
22+
"exports-loader": "^0.6.4",
23+
"extract-text-webpack-plugin": "^2.1.0",
24+
"html-webpack-plugin": "^2.28.0",
25+
"imports-loader": "^0.7.1",
26+
"node-sass": "^4.5.1",
27+
"postcss-loader": "^1.3.3",
28+
"resolve-url-loader": "^2.0.2",
29+
"rimraf": "^2.6.1",
30+
"sass-loader": "^6.0.3",
31+
"style-loader": "^0.16.0",
32+
"url-loader": "^0.5.8",
33+
"vue-loader": "^11.3.1",
34+
"vue-template-compiler": "^2.2.4",
35+
"webpack": "^2.3.1",
36+
"webpack-dev-server": "^2.4.2"
37+
},
38+
"dependencies": {
39+
"babel-polyfill": "^6.23.0",
40+
"bootstrap": "^4.0.0-alpha.6",
41+
"jquery": "^3.2.1",
42+
"uuid": "^3.0.1",
43+
"vue": "^2.2.4",
44+
"vue-router": "^2.3.0",
45+
"vuex": "^2.2.1",
46+
"vuex-router-sync": "^4.1.2"
47+
}
48+
}

‎src/app.js

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
/**
2+
* Setup
3+
*/
4+
import 'babel-polyfill'
5+
import Vue from 'vue';
6+
import VueRouter from 'vue-router';
7+
import {sync} from 'vuex-router-sync'
8+
Vue.use(VueRouter);
9+
10+
/**
11+
* Stores
12+
*/
13+
import {store} from './stores/';
14+
15+
/**
16+
* Components
17+
*/
18+
import App from './components/App.vue';
19+
import ListTodo from './components/todos/list.vue';
20+
import NewTodo from './components/todos/new.vue';
21+
import EditTodo from './components/todos/edit.vue';
22+
23+
/**
24+
* Routes
25+
*/
26+
const routes = [
27+
{path: '/', name: 'home', component: ListTodo},
28+
{path: '/new', name: 'new-todo', component: NewTodo},
29+
{path: '/edit/:todoId', name: 'edit-todo', component: EditTodo}
30+
];
31+
32+
/**
33+
* Router instance
34+
*/
35+
const router = new VueRouter({
36+
routes,
37+
mode: 'history',
38+
linkActiveClass: 'active'
39+
});
40+
41+
sync(store, router);
42+
/**
43+
* Initialize
44+
*/
45+
const app = new Vue({
46+
store,
47+
router,
48+
render: h => h(App)
49+
});
50+
app.$mount('#app');

‎src/components/App.vue

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<style>
2+
body {
3+
padding: 5rem;
4+
}
5+
</style>
6+
7+
<template>
8+
<div>
9+
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">
10+
<button class="navbar-toggler navbar-toggler-right"
11+
type="button"
12+
data-toggle="collapse"
13+
data-target="#navbarsExampleDefault"
14+
aria-controls="navbarsExampleDefault"
15+
aria-expanded="false"
16+
aria-label="Toggle navigation">
17+
<span class="navbar-toggler-icon"></span>
18+
</button>
19+
<router-link :to="{ name: 'home' }" class="navbar-brand">Todo App</router-link>
20+
21+
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
22+
<ul class="navbar-nav mr-auto">
23+
<router-link :to="{ name: 'home' }" class="nav-item" tag="li" exact>
24+
<a class="nav-link">Todo Lists</a>
25+
</router-link>
26+
27+
</ul>
28+
</div>
29+
<div class="form-inline mt-2 mt-md-0">
30+
<router-link :to="{ name: 'new-todo' }" class="btn btn-success btn-sm btn-white-color">
31+
<a class="nav-link">New</a>
32+
</router-link>
33+
</div>
34+
</nav>
35+
36+
<div class="container">
37+
<router-view></router-view>
38+
</div><!-- /.container -->
39+
</div>
40+
</template>
41+
42+
<script>
43+
export default {
44+
name: 'TodoApp'
45+
}
46+
</script>

‎src/components/todos/edit.vue

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<template>
2+
<div>
3+
<form class="form-signin" @submit.prevent="updateTodo">
4+
<h1 class="display-1 text-center">Edit Todo</h1>
5+
<hr>
6+
<div class="form-group row">
7+
<label for="title" class="col-sm-2 col-form-label">Title</label>
8+
<div class="col-sm-10">
9+
<input type="text" class="form-control" id="title" placeholder="Just Do It." :value="todo.title" required>
10+
</div>
11+
</div>
12+
<div class="form-group row">
13+
<label for="description" class="col-sm-2 col-form-label">Description</label>
14+
<div class="col-sm-10">
15+
<textarea class="form-control" id="description" placeholder="Description" cols="10"
16+
required>{{todo.description}}</textarea>
17+
</div>
18+
</div>
19+
<div class="form-group row">
20+
<div class="col-sm-12">
21+
<button class="btn btn-lg btn-primary btn-block" type="submit">Save</button>
22+
</div>
23+
</div>
24+
<div class="form-group row">
25+
<div class="col-sm-12">
26+
<router-link :to="{ name: 'home' }" class="btn btn-lg btn-danger btn-block">Cancel</router-link>
27+
</div>
28+
</div>
29+
</form>
30+
</div>
31+
</template>
32+
33+
<script>
34+
import {mapState} from "vuex";
35+
export default {
36+
name: 'edit-todo',
37+
data(){
38+
return {}
39+
},
40+
methods: {
41+
updateTodo(){
42+
this.$store.commit('editTodo', {
43+
todo: this.todo,
44+
newValue: {
45+
title: this.$el.querySelector('#title').value,
46+
description: this.$el.querySelector('#description').value
47+
}
48+
});
49+
this.$router.push({name: 'home'});
50+
}
51+
},
52+
computed: {
53+
...mapState({
54+
todo: state => state.todos.filter(todo => todo.id === state.route.params.todoId)[0],
55+
})
56+
}
57+
}
58+
</script>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /