Vue.js webpack-simple template tutorial

webhj · Jul 17, 2016 · c06dd7b · c06dd7b
1 parent 47aea44
commit c06dd7b
Show file tree

Hide file tree

Showing 11 changed files with 331 additions and 1 deletion.
diff --git a/05.OfficialTemplates/my-browserify-simple-demo/src/App.vue b/05.OfficialTemplates/my-browserify-simple-demo/src/App.vue
@@ -1,6 +1,6 @@
 <template>
 	<div id="app">
-		<h2>This is a grid component built with vue cli browserify-simple scaffolding!</h1>
+		<h2>This is a grid component built with vue-browserify-simple scaffolding!</h2>
 		<div id="searchBar">
 			Search <input type="text" v-model="searchQuery" />
 		</div>

diff --git a/05.OfficialTemplates/my-webpack-simple-demo/.babelrc b/05.OfficialTemplates/my-webpack-simple-demo/.babelrc
@@ -0,0 +1,5 @@
+{
+  "presets": ["es2015", "stage-2"],
+  "plugins": ["transform-runtime"],
+  "comments": false
+}
diff --git a/05.OfficialTemplates/my-webpack-simple-demo/.gitignore b/05.OfficialTemplates/my-webpack-simple-demo/.gitignore
@@ -0,0 +1,4 @@
+.DS_Store
+node_modules/
+dist/
+npm-debug.log
diff --git a/05.OfficialTemplates/my-webpack-simple-demo/README.md b/05.OfficialTemplates/my-webpack-simple-demo/README.md
@@ -0,0 +1,18 @@
+# my-webpack-simple-demo
+
+> A Vue.js project
+
+## Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run dev
+
+# build for production with minification
+npm run build
+```
+
+For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
diff --git a/05.OfficialTemplates/my-webpack-simple-demo/index.html b/05.OfficialTemplates/my-webpack-simple-demo/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>my-webpack-simple-demo</title>
+  </head>
+  <body>
+    <app></app>
+    <script src="dist/build.js"></script>
+  </body>
+</html>
diff --git a/05.OfficialTemplates/my-webpack-simple-demo/package.json b/05.OfficialTemplates/my-webpack-simple-demo/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "my-webpack-simple-demo",
+  "description": "A Vue.js project",
+  "author": "keepfool <[email protected]>",
+  "private": true,
+  "scripts": {
+    "dev": "webpack-dev-server --inline --hot",
+    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
+  },
+  "dependencies": {
+    "vue": "^1.0.0",
+    "babel-runtime": "^6.0.0"
+  },
+  "devDependencies": {
+    "babel-core": "^6.0.0",
+    "babel-loader": "^6.0.0",
+    "babel-plugin-transform-runtime": "^6.0.0",
+    "babel-preset-es2015": "^6.0.0",
+    "babel-preset-stage-2": "^6.0.0",
+    "cross-env": "^1.0.6",
+    "css-loader": "^0.23.0",
+    "file-loader": "^0.8.4",
+    "json-loader": "^0.5.4",
+    "url-loader": "^0.5.7",
+    "vue-hot-reload-api": "^1.2.0",
+    "vue-html-loader": "^1.0.0",
+    "vue-loader": "^8.2.1",
+    "vue-style-loader": "^1.0.0",
+    "webpack": "^1.12.2",
+    "webpack-dev-server": "^1.12.0"
+  }
+}
diff --git a/05.OfficialTemplates/my-webpack-simple-demo/src/App.vue b/05.OfficialTemplates/my-webpack-simple-demo/src/App.vue
@@ -0,0 +1,46 @@
+<template>
+	<div id="app">
+		<h2>This is a grid component built with vue-webpack-simple scaffolding!</h2>
+		<div id="searchBar">
+			Search <input type="text" v-model="searchQuery" />
+		</div>
+		<simple-grid :data="gridData" :columns="gridColumns" :filter-key="searchQuery" :sort-order="sortOrder">
+		</simple-grid>
+	</div>
+</template>
+
+<script>
+	import simpleGrid from './components/SimpleGrid.vue'
+
+	export default {
+		data() {
+			return {
+				searchQuery: '',
+				// order > 0：正序，order < 0：倒序
+				sortOrder: {
+					column: 'name',
+					order: 1
+				},
+				gridColumns: ['name', 'power'],
+				gridData: [{
+					name: 'Chuck Norris',
+					power: Infinity
+				}, {
+					name: 'Bruce Lee',
+					power: 9000
+				}, {
+					name: 'Jackie Chan',
+					power: 7000
+				}, {
+					name: 'Jet Li',
+					power: 8000
+				}]
+			}
+		}, components: {
+			simpleGrid
+		}
+	}
+</script>
+<style>
+	@import url("./assets/app.css");
+</style>
diff --git a/05.OfficialTemplates/my-webpack-simple-demo/src/assets/app.css b/05.OfficialTemplates/my-webpack-simple-demo/src/assets/app.css
@@ -0,0 +1,92 @@
+	* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+html {
+	font-size: 12px;
+	font-family: Ubuntu, simHei, sans-serif;
+	font-weight: 400;
+}
+
+body{
+	font-size: 1rem;
+}
+
+table,
+th,
+td {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+table {
+	width: 100%;
+}
+
+th,
+td {
+	border: 1px solid #BCBCBC;
+	padding: 5px 10px;
+}
+
+th {
+	background: #42B983;
+	font-size: 1.2rem;
+	font-weight: normal;
+	color: #FFFFFF;
+	cursor: pointer;
+}
+
+tr:nth-of-type(odd) {
+	background: #fff;
+}
+
+tr:nth-of-type(even) {
+	background: #eee;
+}
+
+input{
+	outline: none;
+}
+
+input[type=text]{
+	border: 1px solid #ccc;
+	padding: .5rem .3rem;
+	width: 80%;
+}
+
+input[type=text]:focus{
+	border-color: #42B983;
+}
+
+#app {
+	margin: 20px auto;
+	max-width: 640px;
+}
+
+#searchBar{
+	margin: 10px;
+}
+
+.arrow {
+	display: inline-block;
+	vertical-align: middle;
+	width: 0;
+	height: 0;
+	margin-left: 5px;
+	opacity: 0.66;
+}
+
+.arrow.asc {
+	border-left: 4px solid transparent;
+	border-right: 4px solid transparent;
+	border-bottom: 4px solid #fff;
+}
+
+.arrow.dsc {
+	border-left: 4px solid transparent;
+	border-right: 4px solid transparent;
+	border-top: 4px solid #fff;
+}
diff --git a/05.OfficialTemplates/my-webpack-simple-demo/src/components/SimpleGrid.vue b/05.OfficialTemplates/my-webpack-simple-demo/src/components/SimpleGrid.vue
@@ -0,0 +1,49 @@
+
+<template>
+	<table>
+		<thead>
+			<tr>
+				<th v-for="col in columns" v-on:click="sortBy(col)">
+					{{ col | capitalize}}
+					<span class="arrow" v-show="sortKey === col" v-bind:class="sortOrders[sortKey] > 0 ? 'asc' : 'dsc' "></span>
+				</th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr v-for="entry in data | filterBy filterKey | orderBy sortKey sortOrders[sortKey]">
+				<td v-for="col in columns">
+					{{entry[col]}}
+				</td>
+			</tr>
+		</tbody>
+	</table>
+</template>
+
+<script>
+	export default {
+		props: {
+			data: Array,
+			columns: Array,
+			sortOrder: Object,
+			filterKey: String
+		},
+		methods: {
+			sortBy: function(col) {
+				this.sortKey = col;
+				this.sortOrders[col] *= -1
+			}
+		},
+		data() {
+			var sortOrders = {}
+			this.columns.forEach(function(col) {
+				sortOrders[col] = 1
+			})
+			return {
+				sortKey: '',
+				sortOrders: sortOrders
+			}
+		}
+	}
+</script>
+
+
diff --git a/05.OfficialTemplates/my-webpack-simple-demo/src/main.js b/05.OfficialTemplates/my-webpack-simple-demo/src/main.js
@@ -0,0 +1,7 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+new Vue({
+  el: 'body',
+  components: { App }
+})
diff --git a/05.OfficialTemplates/my-webpack-simple-demo/webpack.config.js b/05.OfficialTemplates/my-webpack-simple-demo/webpack.config.js
@@ -0,0 +1,66 @@
+var path = require('path')
+var webpack = require('webpack')
+
+module.exports = {
+  entry: './src/main.js',
+  output: {
+    path: path.resolve(__dirname, './dist'),
+    publicPath: '/dist/',
+    filename: 'build.js'
+  },
+  resolveLoader: {
+    root: path.join(__dirname, 'node_modules'),
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.vue$/,
+        loader: 'vue'
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel',
+        exclude: /node_modules/
+      },
+      {
+        test: /\.json$/,
+        loader: 'json'
+      },
+      {
+        test: /\.html$/,
+        loader: 'vue-html'
+      },
+      {
+        test: /\.(png|jpg|gif|svg)$/,
+        loader: 'url',
+        query: {
+          limit: 10000,
+          name: '[name].[ext]?[hash]'
+        }
+      }
+    ]
+  },
+  devServer: {
+    historyApiFallback: true,
+    noInfo: true
+  },
+  devtool: '#eval-source-map'
+}
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports.devtool = '#source-map'
+  // http://vue-loader.vuejs.org/en/workflow/production.html
+  module.exports.plugins = (module.exports.plugins || []).concat([
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: '"production"'
+      }
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false
+      }
+    }),
+    new webpack.optimize.OccurenceOrderPlugin()
+  ])
+}