Skip to content

Commit c06dd7b

Browse files
keepfoolkeepfool
committed
Vue.js webpack-simple template tutorial
1 parent 47aea44 commit c06dd7b

File tree

11 files changed

+331
-1
lines changed

11 files changed

+331
-1
lines changed

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div id="app">
3-
<h2>This is a grid component built with vue cli browserify-simple scaffolding!</h1>
3+
<h2>This is a grid component built with vue-browserify-simple scaffolding!</h2>
44
<div id="searchBar">
55
Search <input type="text" v-model="searchQuery" />
66
</div>

Diff for: ‎05.OfficialTemplates/my-webpack-simple-demo/.babelrc

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"presets": ["es2015", "stage-2"],
3+
"plugins": ["transform-runtime"],
4+
"comments": false
5+
}

Diff for: ‎05.OfficialTemplates/my-webpack-simple-demo/.gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.DS_Store
2+
node_modules/
3+
dist/
4+
npm-debug.log

Diff for: ‎05.OfficialTemplates/my-webpack-simple-demo/README.md

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# my-webpack-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 detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).

Diff for: ‎05.OfficialTemplates/my-webpack-simple-demo/index.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>my-webpack-simple-demo</title>
6+
</head>
7+
<body>
8+
<app></app>
9+
<script src="dist/build.js"></script>
10+
</body>
11+
</html>

Diff for: ‎05.OfficialTemplates/my-webpack-simple-demo/package.json

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "my-webpack-simple-demo",
3+
"description": "A Vue.js project",
4+
"author": "keepfool <[email protected]>",
5+
"private": true,
6+
"scripts": {
7+
"dev": "webpack-dev-server --inline --hot",
8+
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
9+
},
10+
"dependencies": {
11+
"vue": "^1.0.0",
12+
"babel-runtime": "^6.0.0"
13+
},
14+
"devDependencies": {
15+
"babel-core": "^6.0.0",
16+
"babel-loader": "^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+
"cross-env": "^1.0.6",
21+
"css-loader": "^0.23.0",
22+
"file-loader": "^0.8.4",
23+
"json-loader": "^0.5.4",
24+
"url-loader": "^0.5.7",
25+
"vue-hot-reload-api": "^1.2.0",
26+
"vue-html-loader": "^1.0.0",
27+
"vue-loader": "^8.2.1",
28+
"vue-style-loader": "^1.0.0",
29+
"webpack": "^1.12.2",
30+
"webpack-dev-server": "^1.12.0"
31+
}
32+
}

Diff for: ‎05.OfficialTemplates/my-webpack-simple-demo/src/App.vue

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<template>
2+
<div id="app">
3+
<h2>This is a grid component built with vue-webpack-simple scaffolding!</h2>
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+
@import url("./assets/app.css");
46+
</style>

Diff for: ‎05.OfficialTemplates/my-webpack-simple-demo/src/assets/app.css

+92
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+
}

Diff for: ‎05.OfficialTemplates/my-webpack-simple-demo/src/components/SimpleGrid.vue

+49
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+

Diff for: ‎05.OfficialTemplates/my-webpack-simple-demo/src/main.js

+7
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+
})

Diff for: ‎05.OfficialTemplates/my-webpack-simple-demo/webpack.config.js

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
var path = require('path')
2+
var webpack = require('webpack')
3+
4+
module.exports = {
5+
entry: './src/main.js',
6+
output: {
7+
path: path.resolve(__dirname, './dist'),
8+
publicPath: '/dist/',
9+
filename: 'build.js'
10+
},
11+
resolveLoader: {
12+
root: path.join(__dirname, 'node_modules'),
13+
},
14+
module: {
15+
loaders: [
16+
{
17+
test: /\.vue$/,
18+
loader: 'vue'
19+
},
20+
{
21+
test: /\.js$/,
22+
loader: 'babel',
23+
exclude: /node_modules/
24+
},
25+
{
26+
test: /\.json$/,
27+
loader: 'json'
28+
},
29+
{
30+
test: /\.html$/,
31+
loader: 'vue-html'
32+
},
33+
{
34+
test: /\.(png|jpg|gif|svg)$/,
35+
loader: 'url',
36+
query: {
37+
limit: 10000,
38+
name: '[name].[ext]?[hash]'
39+
}
40+
}
41+
]
42+
},
43+
devServer: {
44+
historyApiFallback: true,
45+
noInfo: true
46+
},
47+
devtool: '#eval-source-map'
48+
}
49+
50+
if (process.env.NODE_ENV === 'production') {
51+
module.exports.devtool = '#source-map'
52+
// http://vue-loader.vuejs.org/en/workflow/production.html
53+
module.exports.plugins = (module.exports.plugins || []).concat([
54+
new webpack.DefinePlugin({
55+
'process.env': {
56+
NODE_ENV: '"production"'
57+
}
58+
}),
59+
new webpack.optimize.UglifyJsPlugin({
60+
compress: {
61+
warnings: false
62+
}
63+
}),
64+
new webpack.optimize.OccurenceOrderPlugin()
65+
])
66+
}

0 commit comments

Comments
 (0)