Skip to content

Commit 0cb8e24

Browse files
author
jfusco
committed
Add initial code
1 parent 1e917fb commit 0cb8e24

25 files changed

+606
-1
lines changed

‎.babelrc

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"presets": [
3+
"es2015",
4+
"stage-2"
5+
],
6+
"plugins": [
7+
"transform-function-bind",
8+
"transform-runtime"
9+
]
10+
}

‎.editorconfig

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# This file is for unifying the coding style for different editors and IDEs.
2+
3+
# No .editorconfig files above the root directory
4+
root = true
5+
6+
# All files unicode
7+
[*]
8+
charset = utf-8
9+
10+
# Main styles for our files
11+
[{src/**/*.{js,scss,html,vue},package.json,gulpfile.babel.js,.babelrc,.scsslint.yml,webpack.config.babel.js}]
12+
indent_style = tab
13+
end_of_line = lf
14+
trim_trailing_whitespace = true
15+
insert_final_newline = true

‎.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/node_modules/
2+
/.idea/
3+
/build/
4+
.DS_Store

‎README.md

Lines changed: 50 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,51 @@
11
# vue-router-vuex-example
2-
vue + vue-router + vuex example
2+
3+
![npm][npm-version-image]
4+
[![Dependency Status][dep-image]][dep-url]
5+
[![devDependency Status][dev-dep-image]][dev-dep-url]
6+
7+
> Vue + vue-router + vuex + webpack starter project
8+
9+
This repository was created to demonstrate a simple application that uses vue and vue-router-sync to pass data throughout the application using the state management pattern.
10+
11+
## Requirements
12+
The following tools are required to get this running.
13+
14+
### Dev tools
15+
* [Node](https://nodejs.org/en/) `~6.2.2` *~NPM will install automatically*
16+
* NPM `~3.9.5`
17+
* [Webpack](https://webpack.github.io/) `~2.2.0`
18+
19+
## Installation
20+
### Install Node
21+
Visit [here](https://nodejs.org/en/) - download and install the latest, stable version.
22+
This will install `npm` automatically.
23+
24+
### Install Webpack globally
25+
```sh
26+
sudo npm install -g webpack
27+
```
28+
29+
### Install dependencies
30+
`cd` into the root of the project and run this command
31+
```sh
32+
$ npm install
33+
```
34+
35+
### Compile
36+
from the root:
37+
```sh
38+
$ npm build
39+
```
40+
41+
### Run project
42+
```sh
43+
$ npm start
44+
```
45+
**Your primary browser will automatically open at localhost:8080**
46+
47+
[npm-version-image]: https://img.shields.io/npm/v/npm.svg?maxAge=2592000
48+
[dev-dep-image]: https://david-dm.org/JFusco/vue-router-vuex-example/dev-status.svg
49+
[dev-dep-url]: https://david-dm.org/JFusco/vue-router-vuex-example#info=devDependencies
50+
[dep-image]: https://img.shields.io/david/JFusco/vue-router-vuex-example.svg
51+
[dep-url]: https://david-dm.org/JFusco/vue-router-vuex-example

‎index.html

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Vue example</title>
6+
7+
<style>
8+
body, html {
9+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
10+
}
11+
nav ul {
12+
list-style: none;
13+
padding: 0;
14+
margin: 0;
15+
}
16+
nav ul li {
17+
display: inline-block;
18+
}
19+
nav ul li a {
20+
display: block;
21+
padding: 5px;
22+
}
23+
nav a.active, #users-page li a.active {
24+
color: black;
25+
pointer-events: none;
26+
cursor: default;
27+
}
28+
a {
29+
font-family: inherit;
30+
text-decoration: none;
31+
color: gray;
32+
}
33+
a:hover {
34+
color: black;
35+
}
36+
#users-page {
37+
position: relative;
38+
}
39+
#users-page ul {
40+
list-style: none;
41+
padding: 0;
42+
margin: 0;
43+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
44+
font-size: 14px;
45+
width: 300px;
46+
}
47+
#users-page ul li {
48+
border-bottom: 1px dashed lightgray;
49+
padding: 10px 5px;
50+
display: flex;
51+
justify-content: space-between;
52+
}
53+
#users-page .fetching {
54+
position: absolute;
55+
font-weight: bold;
56+
}
57+
.editing {
58+
display: flex;
59+
}
60+
#edit-page {
61+
margin-top: 30px;
62+
}
63+
</style>
64+
</head>
65+
<body>
66+
<div id="app"></div>
67+
68+
<script src="/build/bundles/vendor.bundle.js"></script>
69+
<script src="/build/bundles/main.bundle.js"></script>
70+
</body>
71+
</html>

‎package.json

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "vue-vuex-example",
3+
"version": "1.0.0",
4+
"description": "",
5+
"scripts": {
6+
"start": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",
7+
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
8+
},
9+
"dependencies": {
10+
"vue": "^2.1.10",
11+
"vue-resource": "^1.2.0",
12+
"vue-router": "^2.2.0",
13+
"vuex": "^2.1.1",
14+
"vuex-router-sync": "^4.1.2"
15+
},
16+
"devDependencies": {
17+
"babel-core": "^6.0.0",
18+
"babel-loader": "^6.0.0",
19+
"babel-plugin-transform-class-properties": "^6.19.0",
20+
"babel-plugin-transform-function-bind": "^6.8.0",
21+
"babel-plugin-transform-object-rest-spread": "^6.20.2",
22+
"babel-plugin-transform-runtime": "^6.22.0",
23+
"babel-preset-es2015": "^6.0.0",
24+
"babel-preset-stage-2": "^6.22.0",
25+
"babel-register": "^6.18.0",
26+
"cross-env": "^3.0.0",
27+
"css-loader": "^0.25.0",
28+
"file-loader": "^0.9.0",
29+
"vue-loader": "^10.0.0",
30+
"vue-template-compiler": "^2.1.0",
31+
"webpack": "^2.2.0",
32+
"webpack-dev-server": "^2.2.0"
33+
}
34+
}

‎src/components/Header.vue

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<template>
2+
<div>
3+
Hello: Joe Fusco
4+
</div>
5+
</template>
6+
7+
<script type="text/babel">
8+
import Vue from 'vue'
9+
10+
export default Vue.component('app-header', {
11+
props: {
12+
13+
}
14+
})
15+
</script>

‎src/components/Loader.vue

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template>
2+
<div>
3+
<div v-if="show">{{message}}</div>
4+
<div v-if="!show">Done loading</div>
5+
</div>
6+
</template>
7+
8+
<script type="text/babel">
9+
import Vue from 'vue'
10+
11+
export default Vue.component('loader', {
12+
props: {
13+
message: {
14+
type: String,
15+
required: true
16+
},
17+
show: {
18+
type: Boolean,
19+
required: true
20+
}
21+
}
22+
})
23+
</script>

‎src/components/Nav.vue

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
<nav>
3+
<ul role="menu">
4+
<li role="presentation">
5+
<router-link to="/" exact>home</router-link>
6+
</li>
7+
<li role="presentation">
8+
<router-link to="/users">users</router-link>
9+
</li>
10+
<li role="presentation">
11+
<router-link to="/user/edit">edit user</router-link>
12+
</li>
13+
</ul>
14+
</nav>
15+
</template>
16+
17+
<script type="text/babel">
18+
import Vue from 'vue'
19+
20+
Vue.component('app-nav')
21+
</script>

‎src/components/User.vue

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<template>
2+
<span>
3+
{{data.name.title}} {{data.name.first}} {{data.name.last}} - {{data.gender}}
4+
</span>
5+
</template>
6+
7+
<script type="text/babel">
8+
import Vue from 'vue'
9+
10+
export default Vue.component('user', {
11+
props: {
12+
data: {
13+
type: Object,
14+
required: true
15+
}
16+
}
17+
})
18+
</script>

‎src/main.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
'use strict';
2+
3+
import Vue from 'vue'
4+
import router from './router/index'
5+
import store from './store/index';
6+
import { sync } from 'vuex-router-sync'
7+
import App from './pages/App.vue'
8+
9+
sync(store, router)
10+
11+
new Vue({
12+
el: '#app',
13+
store,
14+
router,
15+
render: h => h(App)
16+
})

‎src/pages/App.vue

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<template>
2+
<div>
3+
<!-- Header -->
4+
<app-header></app-header>
5+
6+
<!-- Navigation -->
7+
<app-nav></app-nav>
8+
9+
<!-- Main content -->
10+
<div role="main">
11+
<router-view></router-view>
12+
</div>
13+
</div>
14+
</template>
15+
16+
<script type="text/babel">
17+
import appHeader from '../components/Header.vue'
18+
import appNav from '../components/Nav.vue'
19+
20+
export default {
21+
components: {
22+
appHeader,
23+
appNav
24+
}
25+
}
26+
</script>

‎src/pages/EditUser.vue

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<template>
2+
<div>
3+
<h2>Edit user</h2>
4+
</div>
5+
</template>
6+
7+
<script type="text/babel">
8+
import Vue from 'vue'
9+
</script>

‎src/pages/Home.vue

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template>
2+
<div>
3+
<h2>Home</h2>
4+
</div>
5+
</template>

‎src/pages/Users.vue

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<template>
2+
<div id="users-page">
3+
<h2>Users</h2>
4+
5+
<loader :show="loader.show" :message="loader.message"></loader>
6+
7+
<ul>
8+
<li v-for="user in users.data">
9+
<user :data="user"></user>
10+
</li>
11+
</ul>
12+
</div>
13+
</template>
14+
15+
<script type="text/babel">
16+
import Vue from 'vue'
17+
import { mapActions, mapState } from 'vuex'
18+
import loader from '../components/Loader.vue'
19+
import user from '../components/User.vue'
20+
21+
export default {
22+
components: {
23+
loader,
24+
user
25+
},
26+
methods: {
27+
...mapActions([
28+
'getUsers'
29+
])
30+
},
31+
mounted(){
32+
this.getUsers(10);
33+
},
34+
computed: mapState([
35+
'users',
36+
'loader'
37+
])
38+
}
39+
</script>

0 commit comments

Comments
 (0)