update router

chaoliuchn · Apr 7, 2017 · 4679e49 · 4679e49
1 parent a5ea387
commit 4679e49
Show file tree

Hide file tree

Showing 15 changed files with 331 additions and 0 deletions.
diff --git a/router/.babelrc b/router/.babelrc
@@ -0,0 +1,5 @@
+{
+    "presets": ["es2015"],
+    "plugins": ["transform-runtime"],
+    "comments": false
+}
diff --git a/router/app.vue b/router/app.vue
@@ -0,0 +1,10 @@
+<template>
+    <div>
+        <router-view></router-view>
+    </div>
+</template>
+<script>
+    export default {
+        
+    }
+</script>
diff --git a/router/button.vue b/router/button.vue
@@ -0,0 +1,40 @@
+<template>
+    <button @click="handleClick" :style="styles">
+        <slot></slot>
+    </button>
+</template>
+<script>
+    export default {
+        props: {
+            color: {
+                type: String,
+                default: '#00cc66'
+            }
+        },
+        computed: {
+            styles () {
+                return {
+                    background: this.color
+                }
+            }
+        },
+        methods: {
+            handleClick (e) {
+                this.$emit('click', e);
+            }
+        }
+    }
+</script>
+<style scoped>
+    button{
+        border: 0;
+        outline: none;
+        color: #fff;
+        padding: 4px 8px;
+    }
+    button:active{
+        position: relative;
+        top: 1px;
+        left: 1px;
+    }
+</style>
diff --git a/router/images/image.png b/router/images/image.png
diff --git a/router/index.ejs b/router/index.ejs
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <title>Webpack App</title>
+    <link rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[0] %>">
+</head>
+<body>
+    <div id="app"></div>
+    <script type="text/javascript" src="<%= htmlWebpackPlugin.files.js[0] %>"></script>
+</body>
+</html> 
diff --git a/router/index.html b/router/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Webpack App</title>
+    <link rel="stylesheet" type="text/css" href="/dist/main.css">
+</head>
+<body>
+    <div id="app">
+
+    </div>
+    <script type="text/javascript" src="/dist/main.js"></script>
+</body>
+</html>
diff --git a/router/main.js b/router/main.js
@@ -0,0 +1,57 @@
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import App from './app.vue';
+
+Vue.use(VueRouter);
+
+// 路由配置
+const Routers = [
+    {
+        path: '/index',
+        meta: {
+            title: '首页'
+        },
+        component: (resolve) => require(['./views/index.vue'], resolve)
+    },
+    {
+        path: '/about',
+        meta: {
+            title: '关于'
+        },
+        component: (resolve) => require(['./views/about.vue'], resolve)
+    },
+    {
+        path: '/user/:id',
+        meta: {
+            title: '个人主页'
+        },
+        component: (resolve) => require(['./views/user.vue'], resolve)
+    },
+    {
+        path: '*',
+        redirect: '/index'
+    }
+];
+const RouterConfig = {
+    // 使用 HTML5 的 History 路由模式
+    mode: 'history',
+    routes: Routers
+};
+const router = new VueRouter(RouterConfig);
+
+router.beforeEach((to, from, next) => {
+    window.document.title = to.meta.title;
+    next();
+});
+
+router.afterEach((to, from, next) => {
+    window.scrollTo(0, 0);
+});
+
+new Vue({
+    el: '#app',
+    router: router,
+    render: h => {
+        return h(App)
+    }
+});
diff --git a/router/package.json b/router/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "demo",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "webpack-dev-server --open --history-api-fallback --config webpack.config.js",
+    "build": "webpack --progress --hide-modules --config webpack.prod.config.js"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "babel": "^6.23.0",
+    "babel-core": "^6.24.0",
+    "babel-loader": "^6.4.1",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-preset-es2015": "^6.24.0",
+    "babel-runtime": "^6.23.0",
+    "css-loader": "^0.27.3",
+    "extract-text-webpack-plugin": "^2.1.0",
+    "file-loader": "^0.10.1",
+    "html-webpack-plugin": "^2.28.0",
+    "style-loader": "^0.16.1",
+    "url-loader": "^0.5.8",
+    "vue-hot-reload-api": "^2.0.11",
+    "vue-loader": "^11.3.4",
+    "vue-style-loader": "^2.0.5",
+    "vue-template-compiler": "^2.2.6",
+    "webpack": "^2.3.2",
+    "webpack-dev-server": "^2.4.2",
+    "webpack-merge": "^4.1.0"
+  },
+  "dependencies": {
+    "vue": "^2.2.6",
+    "vue-router": "^2.3.1"
+  }
+}
diff --git a/router/style.css b/router/style.css
@@ -0,0 +1,5 @@
+/* style.css */
+#app{
+    font-size: 24px;
+    color: #f50;
+}
diff --git a/router/title.vue b/router/title.vue
@@ -0,0 +1,20 @@
+<template>
+    <h1>
+        <a :href="'#' + title">{{ title }}</a>
+    </h1>
+</template>
+<script>
+    export default {
+        props: {
+            title: {
+                type: String
+            }
+        }
+    }
+</script>
+<style scoped>
+    h1 a{
+        color: #3399ff;
+        font-size: 24px;
+    }
+</style>
diff --git a/router/views/about.vue b/router/views/about.vue
@@ -0,0 +1,15 @@
+<template>
+    <div>
+        <h1>介绍页</h1>
+        <button @click="handleRouter">跳转到 user</button>
+    </div>
+</template>
+<script>
+    export default {
+        methods: {
+            handleRouter () {
+                this.$router.push('/user/123');
+            }
+        }
+    }
+</script>
diff --git a/router/views/index.vue b/router/views/index.vue
@@ -0,0 +1,11 @@
+<template>
+    <div>
+        <h1>首页</h1>
+        <router-link to="/about">跳转到 about</router-link>
+    </div>
+</template>
+<script>
+    export default {
+
+    }
+</script>
diff --git a/router/views/user.vue b/router/views/user.vue
@@ -0,0 +1,10 @@
+<template>
+    <div>{{ $route.params.id }}</div>
+</template>
+<script>
+    export default {
+        mounted () {
+            console.log(this.$route);
+        }
+    }
+</script>
diff --git a/router/webpack.config.js b/router/webpack.config.js
@@ -0,0 +1,53 @@
+var path = require('path');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+var config = {
+    entry: {
+        main: './main'
+    },
+    output: {
+        path: path.join(__dirname, './dist'),
+        publicPath: '/dist/',
+        filename: 'main.js'
+    },
+    module: {
+        rules: [
+            {
+                test: /\.vue$/,
+                loader: 'vue-loader',
+                options: {
+                    loaders: {
+                        css: ExtractTextPlugin.extract({
+                            use: 'css-loader',
+                            fallback: 'vue-style-loader'
+                        })
+                    }
+                }
+            },
+            {
+                test: /\.js$/,
+                loader: 'babel-loader',
+                exclude: /node_modules/
+            },
+            {
+                test: /\.css$/,
+                use: ExtractTextPlugin.extract({
+                    use: 'css-loader',
+                    fallback: 'style-loader'
+                })
+            },
+            {
+                test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
+                loader: 'url-loader?limit=1024'
+            }
+        ]
+    },
+    plugins: [
+        new ExtractTextPlugin({
+            filename: '[name].css',
+            allChunks: true
+        })
+    ]
+};
+
+module.exports = config;
diff --git a/router/webpack.prod.config.js b/router/webpack.prod.config.js
@@ -0,0 +1,41 @@
+var webpack = require('webpack');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var merge = require('webpack-merge');
+var webpackBaseConfig = require('./webpack.config.js');
+
+// 清空基本配置的插件列表
+webpackBaseConfig.plugins = [];
+
+module.exports = merge(webpackBaseConfig, {
+    output: {
+        publicPath: '/dist/',
+        // 将入口文件重命名为带有 20 位 hash 值的唯一文件
+        filename: '[name].[hash].js'
+    },
+    plugins: [
+        new ExtractTextPlugin({
+            // 提取 css，并重命名为带有 20 位 hash 值的唯一文件
+            filename: '[name].[hash].css',
+            allChunks: true
+        }),
+        // 定义当前 node 环境为生产环境
+        new webpack.DefinePlugin({
+            'process.env': {
+                NODE_ENV: '"production"'
+            }
+        }),
+        // 压缩 js
+        new webpack.optimize.UglifyJsPlugin({
+            compress: {
+                warnings: false
+            }
+        }),
+        // 提取模板，并保存入口 html 文件
+        new HtmlWebpackPlugin({
+            filename: '../index_prod.html',
+            template: './index.ejs',
+            inject: false
+        })
+    ]
+});