Skip to content

Commit 41f143a

Browse files
keepfoolkeepfool
committed
Vue.js browserify-simple template tutorial
1 parent 7228e48 commit 41f143a

File tree

10 files changed

+272
-0
lines changed

10 files changed

+272
-0
lines changed

‎05.OfficialTemplates/my-browserify-simple-demo/.babelrc

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"presets": ["es2015", "stage-2"],
3+
"plugins": ["transform-runtime"]
4+
}

‎05.OfficialTemplates/my-browserify-simple-demo/.gitignore

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

‎05.OfficialTemplates/my-browserify-simple-demo/README.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# my-browserify-simple-demo
2+
3+
> A Vue.js project
4+
5+
## Build Setup
6+
7+
``` bash
8+
# install dependencies
9+
npm install
10+
11+
# serve with hot reload at localhost:8080
12+
npm run dev
13+
14+
# build for production with minification
15+
npm run build
16+
```
17+
18+
For more information see the [docs for vueify](https://github.com/vuejs/vueify).

‎05.OfficialTemplates/my-browserify-simple-demo/dist/.gitkeep

Whitespace-only changes.

‎05.OfficialTemplates/my-browserify-simple-demo/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>my-browserify-simple-demo</title>
6+
<link rel="stylesheet" href="src/assets/app.css"/>
7+
</head>
8+
<body>
9+
<app></app>
10+
<script src="dist/build.js"></script>
11+
</body>
12+
</html>

‎05.OfficialTemplates/my-browserify-simple-demo/package.json

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"name": "my-browserify-simple-demo",
3+
"description": "A Vue.js project",
4+
"author": "keepfool <[email protected]>",
5+
"private": true,
6+
"scripts": {
7+
"watchify": "watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js",
8+
"serve": "http-server -c 1 -a localhost",
9+
"dev": "npm-run-all --parallel watchify serve",
10+
"build": "cross-env NODE_ENV=production browserify src/main.js | uglifyjs -c warnings=false -m > dist/build.js"
11+
},
12+
"dependencies": {
13+
"vue": "^1.0.0"
14+
},
15+
"devDependencies": {
16+
"babel-core": "^6.0.0",
17+
"babel-plugin-transform-runtime": "^6.0.0",
18+
"babel-preset-es2015": "^6.0.0",
19+
"babel-preset-stage-2": "^6.0.0",
20+
"babel-runtime": "^6.0.0",
21+
"cross-env": "^1.0.6",
22+
"babelify": "^7.2.0",
23+
"browserify": "^12.0.1",
24+
"browserify-hmr": "^0.3.1",
25+
"http-server": "^0.9.0",
26+
"npm-run-all": "^1.6.0",
27+
"uglify-js": "^2.5.0",
28+
"vueify": "^8.5.2",
29+
"watchify": "^3.4.0"
30+
},
31+
"browserify": {
32+
"transform": [
33+
"vueify",
34+
"babelify"
35+
]
36+
}
37+
}

‎05.OfficialTemplates/my-browserify-simple-demo/src/App.vue

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<template>
2+
<div id="app">
3+
<h2>This is a grid component built with vue cli browserify-simple scaffolding!</h1>
4+
<div id="searchBar">
5+
Search <input type="text" v-model="searchQuery" />
6+
</div>
7+
<simple-grid :data="gridData" :columns="gridColumns" :filter-key="searchQuery" :sort-order="sortOrder">
8+
</simple-grid>
9+
</div>
10+
</template>
11+
12+
<script>
13+
import simpleGrid from './components/SimpleGrid.vue'
14+
15+
export default {
16+
data() {
17+
return {
18+
searchQuery: '',
19+
// order > 0：正序，order < 0：倒序
20+
sortOrder: {
21+
column: 'name',
22+
order: 1
23+
},
24+
gridColumns: ['name', 'power'],
25+
gridData: [{
26+
name: 'Chuck Norris',
27+
power: Infinity
28+
}, {
29+
name: 'Bruce Lee',
30+
power: 9000
31+
}, {
32+
name: 'Jackie Chan',
33+
power: 7000
34+
}, {
35+
name: 'Jet Li',
36+
power: 8000
37+
}]
38+
}
39+
}, components: {
40+
simpleGrid
41+
}
42+
}
43+
</script>
44+
<style>
45+
body {
46+
font-family: Helvetica, sans-serif;
47+
color: #333;
48+
}
49+
</style>

‎05.OfficialTemplates/my-browserify-simple-demo/src/assets/app.css

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
html {
8+
font-size: 12px;
9+
font-family: Ubuntu, simHei, sans-serif;
10+
font-weight: 400;
11+
}
12+
13+
body{
14+
font-size: 1rem;
15+
}
16+
17+
table,
18+
th,
19+
td {
20+
border-collapse: collapse;
21+
border-spacing: 0;
22+
}
23+
24+
table {
25+
width: 100%;
26+
}
27+
28+
th,
29+
td {
30+
border: 1px solid #BCBCBC;
31+
padding: 5px 10px;
32+
}
33+
34+
th {
35+
background: #42B983;
36+
font-size: 1.2rem;
37+
font-weight: normal;
38+
color: #FFFFFF;
39+
cursor: pointer;
40+
}
41+
42+
tr:nth-of-type(odd) {
43+
background: #fff;
44+
}
45+
46+
tr:nth-of-type(even) {
47+
background: #eee;
48+
}
49+
50+
input{
51+
outline: none;
52+
}
53+
54+
input[type=text]{
55+
border: 1px solid #ccc;
56+
padding: .5rem .3rem;
57+
width: 80%;
58+
}
59+
60+
input[type=text]:focus{
61+
border-color: #42B983;
62+
}
63+
64+
#app {
65+
margin: 20px auto;
66+
max-width: 640px;
67+
}
68+
69+
#searchBar{
70+
margin: 10px;
71+
}
72+
73+
.arrow {
74+
display: inline-block;
75+
vertical-align: middle;
76+
width: 0;
77+
height: 0;
78+
margin-left: 5px;
79+
opacity: 0.66;
80+
}
81+
82+
.arrow.asc {
83+
border-left: 4px solid transparent;
84+
border-right: 4px solid transparent;
85+
border-bottom: 4px solid #fff;
86+
}
87+
88+
.arrow.dsc {
89+
border-left: 4px solid transparent;
90+
border-right: 4px solid transparent;
91+
border-top: 4px solid #fff;
92+
}

‎05.OfficialTemplates/my-browserify-simple-demo/src/components/SimpleGrid.vue

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
2+
<template>
3+
<table>
4+
<thead>
5+
<tr>
6+
<th v-for="col in columns" v-on:click="sortBy(col)">
7+
{{ col | capitalize}}
8+
<span class="arrow" v-show="sortKey === col" v-bind:class="sortOrders[sortKey] > 0 ? 'asc' : 'dsc' "></span>
9+
</th>
10+
</tr>
11+
</thead>
12+
<tbody>
13+
<tr v-for="entry in data | filterBy filterKey | orderBy sortKey sortOrders[sortKey]">
14+
<td v-for="col in columns">
15+
{{entry[col]}}
16+
</td>
17+
</tr>
18+
</tbody>
19+
</table>
20+
</template>
21+
22+
<script>
23+
export default {
24+
props: {
25+
data: Array,
26+
columns: Array,
27+
sortOrder: Object,
28+
filterKey: String
29+
},
30+
methods: {
31+
sortBy: function(col) {
32+
this.sortKey = col;
33+
this.sortOrders[col] *= -1
34+
}
35+
},
36+
data() {
37+
var sortOrders = {}
38+
this.columns.forEach(function(col) {
39+
sortOrders[col] = 1
40+
})
41+
return {
42+
sortKey: '',
43+
sortOrders: sortOrders
44+
}
45+
}
46+
}
47+
</script>
48+
49+

‎05.OfficialTemplates/my-browserify-simple-demo/src/main.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import Vue from 'vue'
2+
import App from './App.vue'
3+
4+
new Vue({
5+
el: 'body',
6+
components: { App }
7+
})

0 commit comments

Comments
 (0)