8000 update router · onesimplecoder/vue-book@4679e49 · GitHub
[go: up one dir, main page]
Skip to content

Commit 4679e49

Browse files
icarusionicarusion
committed
update router
1 parent a5ea387 commit 4679e49

File tree

15 files changed

+331
-0
lines changed

15 files changed

+331
-0
lines changed

‎router/.babelrc

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

‎router/app.vue

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<template>
2+
<div>
3+
<router-view></router-view>
4+
</div>
5+
</template>
6+
<script>
7+
export default {
8+
9+
}
10+
</script>

‎router/button.vue

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<template>
2+
<button @click="handleClick" :style="styles">
3+
<slot></slot>
4+
</button>
5+
</template>
6+
<script>
7+
export default {
8+
props: {
9+
color: {
10+
type: String,
11+
default: '#00cc66'
12+
}
13+
},
14+
computed: {
15+
styles () {
16+
return {
17+
background: this.color
18+
}
19+
}
20+
},
21+
methods: {
22+
handleClick (e) {
23+
this.$emit('click', e);
24+
}
25+
}
26+
}
27+
</script>
28+
<style scoped>
29+
button{
30+
border: 0;
31+
outline: none;
32+
color: #fff;
33+
padding: 4px 8px;
34+
}
35+
button:active{
36+
position: relative;
37+
top: 1px;
38+
left: 1px;
39+
}
40+
</style>

‎router/images/image.png

1.07 MB
Loading

‎router/index.ejs

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-CN">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Webpack App</title>
6+
<link rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[0] %>">
7+
</head>
8+
<body>
9+
<div id="app"></div>
10+
<script type="text/javascript" src="<%= htmlWebpackPlugin.files.js[0] %>"></script>
11+
</body>
12+
</html>

‎router/index.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Webpack App</title>
6+
<link rel="stylesheet" type="text/css" href="/dist/main.css">
7+
</head>
8+
<body>
9+
<div id="app">
10+
11+
</div>
12+
<script type="text/javascript" src="/dist/main.js"></script>
13+
</body>
14+
</html>

‎router/main.js

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import Vue from 'vue';
2+
import VueRouter from 'vue-router';
3+
import App from './app.vue';
4+
5+
Vue.use(VueRouter);
6+
7+
// 路由配置
8+
const Routers = [
9+
{
10+
path: '/index',
11+
meta: {
12+
title: '首页'
13+
},
14+
component: (resolve) => require(['./views/index.vue'], resolve)
15+
},
16+
{
17+
path: '/about',
18+
meta: {
19+
title: '关于'
20+
},
21+
component: (resolve) => require(['./views/about.vue'], resolve)
22+
},
23+
{
24+
path: '/user/:id',
25+
meta: {
26+
title: '个人主页'
27+
},
28+
component: (resolve) => require(['./views/user.vue'], resolve)
29+
},
30+
{
31+
path: '*',
32+
redirect: '/index'
33+
}
34+
];
35+
const RouterConfig = {
36+
// 使用 HTML5 的 History 路由模式
37+
mode: 'history',
38+
routes: Routers
39+
};
40+
const router = new VueRouter(RouterConfig);
41+
42+
router.beforeEach((to, from, next) => {
43+
window.document.title = to.meta.title;
44+
next();
45+
});
46+
47+
router.afterEach((to, from, next) => {
48+
window.scrollTo(0, 0);
49+
});
50+
51+
new Vue({
52+
el: '#app',
53+
router: router,
54+
render: h => {
55+
return h(App)
56+
}
57+
});

‎router/package.json

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "demo",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1",
8+
"dev": "webpack-dev-server --open --history-api-fallback --config webpack.config.js",
9+
"build": "webpack --progress --hide-modules --config webpack.prod.config.js"
10+
},
11+
"author": "",
12+
"license": "ISC",
13+
"devDependencies": {
14+
"babel": "^6.23.0",
15+
"babel-core": "^6.24.0",
16+
"babel-loader": "^6.4.1",
17+
"babel-plugin-transform-runtime": "^6.23.0",
18+
"babel-preset-es2015": "^6.24.0",
19+
"babel-runtime": "^6.23.0",
20+
"css-loader": "^0.27.3",
21+
"extract-text-webpack-plugin": "^2.1.0",
22+
"file-loader": "^0.10.1",
23+
"html-webpack-plugin": "^2.28.0",
24+
"style-loader": "^0.16.1",
25+
"url-loader": "^0.5.8",
26+
"vue-hot-reload-api": "^2.0.11",
27+
"vue-loader": "^11.3.4",
28+
"vue-style-loader": "^2.0.5",
29+
"vue-template-compiler": "^2.2.6",
30+
"webpack": "^2.3.2",
31+
"webpack-dev-server": "^2.4.2",
32+
"webpack-merge": "^4.1.0"
33+
},
34+
"dependencies": {
35+
"vue": "^2.2.6",
36+
"vue-router": "^2.3.1"
37+
}
38+
}

‎router/style.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/* style.css */
2+
#app{
3+
font-size: 24px;
4+
color: #f50;
5+
}

‎router/title.vue

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<h1>
3+
<a :href="'#' + title">{{ title }}</a>
4+
</h1>
5+
</template>
6+
<script>
7+
export default {
8+
props: {
9+
title: {
10+
type: String
11+
}
12+
}
13+
}
14+
</script>
15+
<style scoped>
16+
h1 a{
17+
color: #3399ff;
18+
font-size: 24px;
19+
}
20+
</style>

‎router/views/about.vue

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<template>
2+
<div>
3+
<h1>介绍页</h1>
4+
<button @click="handleRouter">跳转到 user</button>
5+
</div>
6+
</template>
7+
<script>
8+
export default {
9+
methods: {
10+
handleRouter () {
11+
this.$router.push('/user/123');
12+
}
13+
}
14+
}
15+
</script>

‎router/views/index.vue

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<template>
2+
<div>
3+
<h1>首页</h1>
4+
<router-link to="/about">跳转到 about</router-link>
5+
</div>
6+
</template>
7+
<script>
8+
export default {
9+
10+
}
11+
</script>

‎router/views/user.vue

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<template>
2+
<div>{{ $route.params.id }}</div>
3+
</template>
4+
<script>
5+
export default {
6+
mounted () {
7+
console.log(this.$route);
8+
}
9+
}
10+
</script>

‎router/webpack.config.js

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
var path = require('path');
2+
var ExtractTextPlugin = require('extract-text-webpack-plugin');
3+
4+
var config = {
5+
entry: {
6+
main: './main'
7+
},
8+
output: {
9+
path: path.join(__dirname, './dist'),
10+
publicPath: '/dist/',
11+
filename: 'main.js'
12+
},
13+
module: {
14+
rules: [
15+
{
16+
test: /\.vue$/,
17+
loader: 'vue-loader',
18+
options: {
19+
loaders: {
20+
css: ExtractTextPlugin.extract({
21+
use: 'css-loader',
22+
fallback: 'vue-style-loader'
23+
})
24+
}
25+
}
26+
},
27+
{
28+
test: /\.js$/,
29+
loader: 'babel-loader',
30+
exclude: /node_modules/
31+
},
32+
{
33+
test: /\.css$/,
34+
use: ExtractTextPlugin.extract({
35+
use: 'css-loader',
36+
fallback: 'style-loader'
37+
})
38+
},
39+
{
40+
test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
41+
loader: 'url-loader?limit=1024'
42+
}
43+
]
44+
},
45+
plugins: [
46+
new ExtractTextPlugin({
47+
filename: '[name].css',
48+
allChunks: true
49+
})
50+
]
51+
};
52+
53+
module.exports = config;

‎router/webpack.prod.config.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
var webpack = require('webpack');
2+
var HtmlWebpackPlugin = require('html-webpack-plugin');
3+
var ExtractTextPlugin = require('extract-text-webpack-plugin');
4+
var merge = require('webpack-merge');
5+
var webpackBaseConfig = require('./webpack.config.js');
6+
7+
// 清空基本配置的插件列表
8+
webpackBaseConfig.plugins = [];
9+
10+
module.exports = merge(webpackBaseConfig, {
11+
output: {
12+
publicPath: '/dist/',
13+
// 将入口文件重命名为带有 20 位 hash 值的唯一文件
14+
filename: '[name].[hash].js'
15+
},
16+
plugins: [
17+
new ExtractTextPlugin({
18+
// 提取 css，并重命名为带有 20 位 hash 值的唯一文件
19+
filename: '[name].[hash].css',
20+
allChunks: true
21+
}),
22+
// 定义当前 node 环境为生产环境
23+
new webpack.DefinePlugin({
24+
'process.env': {
25+
NODE_ENV: '"production"'
26+
}
27+
}),
28+
// 压缩 js
29+
new webpack.optimize.UglifyJsPlugin({
30+
compress: {
31+
warnings: false
32+
}
33+
}),
34+
// 提取模板，并保存入口 html 文件
35+
new HtmlWebpackPlugin({
36+
filename: '../index_prod.html',
37+
template: './index.ejs',
38+
inject: false
39+
})
40+
]
41+
});

0 commit comments

Comments
 (0)
0