Hooke / demo-vue-vuex

Go to a project
Toggle navigation Toggle navigation pinning
Hooke
f5677ae4 1 parent fb1d4d0b

模块化

Inline Side-by-side
Showing 9 changed files with 168 additions and 44 deletions
1 +{
2 + "presets": [
3 + ["es2015", { "modules": false }]
4 + ]
5 +}
1 -const store = new Vuex.Store({
2 - state: {
3 - count: 0
4 - },
5 - mutations: {
6 - increment: state => state.count++,
7 - decrement: state => state.count--
8 - }
9 -})
10 -
11 -const Counter = {
12 - template: `<div>{{ count }}</div>`,
13 - computed: {
14 - count () {
15 - return this.$store.state.count
16 - }
17 - }
18 -}
19 -
20 -Vue.component('counter',Counter)
21 -
22 -const app = new Vue({
23 - el: '#app',
24 - store,
25 - methods: {
26 - increment() {
27 - store.commit('increment')
28 - },
29 - decrement() {
30 - store.commit('decrement')
31 - }
32 - }
33 -})
...@@ -7,15 +7,7 @@ ...@@ -7,15 +7,7 @@
7 7
8 </head> 8 </head>
9 <body> 9 <body>
10 - <div id="app"> 10 + <div id="app"></div>
11 - <counter></counter> 11 + <script src="/dist/build.js"></script>
12 - <p>
13 - <button @click="increment">+</button>
14 - <button @click="decrement">-</button>
15 - </p>
16 - </div>
17 - <script src="./node_modules/vue/dist/vue.js" charset="utf-8"></script>
18 - <script src="./node_modules/vuex/dist/vuex.js" charset="utf-8"></script>
19 - <script src="./app.js" charset="utf-8"></script>
20 </body> 12 </body>
21 </html> 13 </html>
......
...@@ -4,7 +4,8 @@ ...@@ -4,7 +4,8 @@
4 "description": "", 4 "description": "",
5 "main": "index.js", 5 "main": "index.js",
6 "scripts": { 6 "scripts": {
7 - "test": "echo \"Error: no test specified\" && exit 1" 7 + "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",
8 + "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
8 }, 9 },
9 "repository": { 10 "repository": {
10 "type": "git", 11 "type": "git",
...@@ -15,5 +16,16 @@ ...@@ -15,5 +16,16 @@
15 "dependencies": { 16 "dependencies": {
16 "vue": "^2.0.3", 17 "vue": "^2.0.3",
17 "vuex": "^2.0.0" 18 "vuex": "^2.0.0"
19 + },
20 + "devDependencies": {
21 + "babel-core": "^6.0.0",
22 + "babel-loader": "^6.0.0",
23 + "babel-preset-es2015": "^6.0.0",
24 + "cross-env": "^3.0.0",
25 + "css-loader": "^0.25.0",
26 + "file-loader": "^0.9.0",
27 + "vue-loader": "^9.7.0",
28 + "webpack": "^2.1.0-beta.25",
29 + "webpack-dev-server": "^2.1.0-beta.0"
18 } 30 }
19 } 31 }
......
1 +<template>
2 + <div id="app">
3 + <counter></counter>
4 + <p>
5 + <button @click="increment">+</button>
6 + <button @click="decrement">-</button>
7 + </p>
8 + </div>
9 +</template>
10 +
11 +<script>
12 +import counter from './components/counter.vue'
13 +import {store} from './main.js'
14 +
15 +export default {
16 + name: 'app',
17 + data () {
18 + return {
19 +
20 + }
21 + },
22 + computed: {
23 + count () {
24 + return store.state.count
25 + }
26 + },
27 + methods: {
28 + increment () {
29 + store.commit('increment')
30 + },
31 + decrement () {
32 + store.commit('decrement')
33 + }
34 + },
35 + components: {
36 + counter
37 + }
38 +}
39 +</script>
1 +<template lang="html">
2 + <div>{{ count }}</div>
3 +</template>
4 +
5 +<script>
6 +export default {
7 + data () {
8 + return {}
9 + },
10 + computed: {
11 + count () {
12 + return this.$store.state.count
13 + }
14 + },
15 + mounted () {},
16 + methods: {},
17 + components: {}
18 +}
19 +</script>
20 +
21 +<style lang="css">
22 +</style>
1 +import Vue from 'vue'
2 +import Vuex from 'vuex'
3 +import App from './App.vue'
4 +
5 +Vue.use(Vuex)
6 +
7 +const store = new Vuex.Store({
8 + state: {
9 + count: 0
10 + },
11 + mutations: {
12 + increment: state => state.count++,
13 + decrement: state => state.count--
14 + }
15 +})
16 +
17 +new Vue({
18 + el: '#app',
19 + store,
20 + render: h => h(App)
21 +})
22 +
23 +export { store }
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 + module: {
12 + rules: [
13 + {
14 + test: /\.vue$/,
15 + loader: 'vue',
16 + options: {
17 + // vue-loader options go here
18 + }
19 + },
20 + {
21 + test: /\.js$/,
22 + loader: 'babel',
23 + exclude: /node_modules/
24 + },
25 + {
26 + test: /\.(png|jpg|gif|svg)$/,
27 + loader: 'file',
28 + options: {
29 + name: '[name].[ext]?[hash]'
30 + }
31 + }
32 + ]
33 + },
34 + resolve: {
35 + alias: {
36 + 'vue$': 'vue/dist/vue'
37 + }
38 + },
39 + devServer: {
40 + historyApiFallback: true,
41 + noInfo: true
42 + },
43 + devtool: '#eval-source-map'
44 +}
45 +
46 +if (process.env.NODE_ENV === 'production') {
47 + module.exports.devtool = '#source-map'
48 + // http://vue-loader.vuejs.org/en/workflow/production.html
49 + module.exports.plugins = (module.exports.plugins || []).concat([
50 + new webpack.DefinePlugin({
51 + 'process.env': {
52 + NODE_ENV: '"production"'
53 + }
54 + }),
55 + new webpack.optimize.UglifyJsPlugin({
56 + compress: {
57 + warnings: false
58 + }
59 + }),
60 + new webpack.LoaderOptionsPlugin({
61 + minimize: true
62 + })
63 + ])
64 +}