Skip to content

Commit 5052c43

Browse files
vikseriqvikseriq
committed
Demo project
1 parent 82dfb9e commit 5052c43

File tree

7 files changed

+160
-1
lines changed

7 files changed

+160
-1
lines changed

‎README.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ To install with [Bower](http://bower.io/):
2020

2121
### Manual Download
2222

23-
Download the [latest version](https://raw.github.com/vikseriq/requirejs-vue/latest/requirejs-vue.js).
23+
Download the [latest version](https://raw.githubusercontent.com/vikseriq/requirejs-vue/master/requirejs-vue.js).
2424

2525
## Usage <a name="usage"></a>
2626

@@ -70,6 +70,8 @@ define(['Vue'], function(vue){
7070
</script>
7171
```
7272

73+
For advanced usage see [demo project](/demo/).
74+
7375
## License
7476

7577
MIT

‎demo/README.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# requirejs-vue Sample
2+
3+
This sample demonstrates ways to load Vue components with RequireJS
4+
5+
## Prepare
6+
7+
Run ```bower install```
8+
9+
## Run
10+
11+
Due to browser's XMLHttpRequest CSRF limitations
12+
use a local server to serve files, for example with Python installed:
13+
14+
```bash
15+
python -m SimpleHTTPServer
16+
```

‎demo/bower.json‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"name": "demo",
3+
"authors": ["vikseriq"],
4+
"description": "",
5+
"main": "",
6+
"license": "MIT",
7+
"homepage": "",
8+
"private": true,
9+
"ignore": [
10+
"**/.*",
11+
"bower_components"
12+
],
13+
"dependencies": {
14+
"vue": "^2.2.6",
15+
"requirejs": "^2.3.3"
16+
}
17+
}

‎demo/index.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Vue SFC Loader Demo</title>
5+
<script data-main="lib/main" src="bower_components/requirejs/require.js"></script>
6+
</head>
7+
<body>
8+
<div id="app">
9+
<v-head level="1" text="Prima"></v-head>
10+
<v-head level="2" text="Doua"></v-head>
11+
<v-head level="3" text="Treia"></v-head>
12+
<v-head level="4" text="Patra"></v-head>
13+
</div>
14+
</body>
15+
</html>

‎demo/lib/clock.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!-- clock sample on vue -->
2+
<script>
3+
define(['Vue'], function(Vue){
4+
return new Vue({
5+
template: template,
6+
filters: {
7+
digits: function(value){
8+
return +(value) < 10 ? '0' + value : value;
9+
}
10+
},
11+
data: {
12+
now: new Date()
13+
},
14+
mounted: function(){
15+
var self = this;
16+
window.setInterval(function(){
17+
self.now = new Date()
18+
}, 1000)
19+
},
20+
computed: {
21+
hour: function(){
22+
return this.now.getHours();
23+
},
24+
minute: function(){
25+
return this.now.getMinutes();
26+
},
27+
second: function(){
28+
return this.now.getSeconds()
29+
}
30+
}
31+
})
32+
});
33+
</script>
34+
<style>
35+
body {
36+
background: darkslategray;
37+
}
38+
.clock {
39+
font-size: 200%;
40+
color: white;
41+
text-align: center;
42+
}
43+
</style>
44+
<template>
45+
<div class="clock">
46+
<span>{{hour | digits}}</span>:<span>{{minute | digits}}</span>:<span>{{second | digits}}</span>
47+
</div>
48+
</template>

‎demo/lib/component-head.vue‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!-- Component without template -->
2+
<style>
3+
h1, h2, h3, h4 {
4+
font-weight: normal;
5+
}
6+
h1 {
7+
color: cyan;
8+
}
9+
h2 {
10+
color: maroon;
11+
}
12+
h3 {
13+
color: yellow;
14+
}
15+
h4 {
16+
color: black;
17+
}
18+
/* comment will stripped */
19+
</style>
20+
<!-- Comment will stripped -->
21+
<script>
22+
define(['Vue'], function(Vue){
23+
Vue.component('v-head', {
24+
//template: template, // yup, there are no template
25+
props: {
26+
level: {
27+
type: String
28+
},
29+
text: {
30+
type: String
31+
}
32+
},
33+
render: function(){
34+
return this.$createElement('h' + this.level, this.text);
35+
}
36+
});
37+
});
38+
</script>

‎demo/lib/main.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/**
2+
* A sample usage of requirejs-vue
3+
*/
4+
require(
5+
{
6+
paths: {
7+
'Vue': '../bower_components/vue/dist/vue',
8+
'vue': '../../requirejs-vue'
9+
}
10+
},
11+
['Vue', 'vue!clock.html', 'vue!component-head.vue'],
12+
function(Vue, clock){
13+
// init whole vue app
14+
// component-head placed automatically because of component's pre-registered tag names will found in app template
15+
var app = new Vue({
16+
el: '#app'
17+
});
18+
// create DOM node for clock
19+
clock.$mount();
20+
// dynamically insert
21+
app.$el.appendChild(clock.$el);
22+
}
23+
);

0 commit comments

Comments
 (0)