Skip to content

Commit 6507c60

Browse files
icarusionicarusion
committed
update
1 parent 4679e49 commit 6507c60

File tree

15 files changed

+407
-0
lines changed

15 files changed

+407
-0
lines changed

‎vuex/.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+
}

‎vuex/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>

‎vuex/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>

‎vuex/images/image.png

1.07 MB
Loading

‎vuex/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>

‎vuex/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>

‎vuex/main.js

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import Vue from 'vue';
2+
import VueRouter from 'vue-router';
3+
import Vuex from 'vuex';
4+
import App from './app.vue';
5+
6+
Vue.use(VueRouter);
7+
Vue.use(Vuex);
8+
9+
// 路由配置
10+
const Routers = [
11+
{
12+
path: '/index',
13+
meta: {
14+
title: '首页'
15+
},
16+
component: (resolve) => require(['./views/index.vue'], resolve)
17+
},
18+
{
19+
path: '/about',
20+
meta: {
21+
title: '关于'
22+
},
23+
component: (resolve) => require(['./views/about.vue'], resolve)
24+
},
25+
{
26+
path: '/user/:id',
27+
meta: {
28+
title: '个人主页'
29+
},
30+
component: (resolve) => require(['./views/user.vue'], resolve)
31+
},
32+
{
33+
path: '*',
34+
redirect: '/index'
35+
}
36+
];
37+
const RouterConfig = {
38+
// 使用 HTML5 的 History 路由模式
39+
mode: 'history',
40+
routes: Routers
41+
};
42+
const router = new VueRouter(RouterConfig);
43+
44+
router.beforeEach((to, from, next) => {
45+
window.document.title = to.meta.title;
46+
next();
47+
});
48+
49+
router.afterEach((to, from, next) => {
50+
window.scrollTo(0, 0);
51+
});
52+
53+
const store = new Vuex.Store({
54+
state: {
55+
count: 0,
56+
list: [1, 5, 8, 10, 30, 50]
57+
},
58+
getters: {
59+
filteredList: state => {
60+
return state.list.filter(item => item < 10);
61+
},
62+
listCount: (state, getters) => {
63+
return getters.filteredList.length;
64+
}
65+
},
66+
mutations: {
67+
increment (state, n = 1) {
68+
state.count += n;
69+
},
70+
decrease (state) {
71+
state.count --;
72+
}
73+
},
74+
actions: {
75+
increment (context) {
76+
context.commit('increment');
77+
},
78+
asyncIncrement (context) {
79+
return new Promise(resolve => {
80+
setTimeout(() => {
81+
context.commit('increment');
82+
resolve();
83+
}, 1000)
84+
});
85+
}
86+
}
87+
});
88+
89+
new Vue({
90+
el: '#app',
91+
router: router,
92+
store: store,
93+
render: h => {
94+
return h(App)
95+
}
96+
});

‎vuex/package.json

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
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+
"vuex": "^2.2.1"
38+
}
39+
}

‎vuex/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+
}

‎vuex/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>

‎vuex/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>

‎vuex/views/index.vue

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<template>
2+
<div>
3+
<h1>首页</h1>
4+
{{ count }}
5+
<button @click="handleIncrement">+1</button>
6+
<button @click="handleDecrease">-1</button>
7+
<button @click="handleIncrementMore">+5</button>
8+
<div>{{ list }}</div>
9+
<div>{{ listCount }}</div>
10+
<button @click="handleActionIncrement">action +1</button>
11+
<button @click="handleAsyncIncrement">async +1</button>
12+
</div>
13+
</template>
14+
<script>
15+
export default {
16+
computed: {
17+
count () {
18+
return this.$store.state.count;
19+
},
20+
list () {
21+
return this.$store.getters.filteredList;
22+
},
23+
listCount () {
24+
return this.$store.getters.listCount;
25+
}
26+
},
27+
methods: {
28+
handleIncrement () {
29+
this.$store.commit('increment');
30+
},
31+
handleDecrease () {
32+
this.$store.commit('decrease');
33+
},
34+
handleIncrementMore () {
35+
this.$store.commit('increment', 5);
36+
},
37+
handleActionIncrement () {
38+
this.$store.dispatch('increment')
39+
},
40+
handleAsyncIncrement () {
41+
this.$store.dispatch('asyncIncrement').then(() => {
42+
console.log(this.$store.state.count);
43+
});
44+
}
45+
}
46+
}
47+
</script>

‎vuex/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>

‎vuex/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;

0 commit comments

Comments
 (0)