创建Vue时遇到的坑

# 全局安装 vue-cli$npm
install --global vue-cli

# 创建一个基于 webpack 模板的新项目

$vue
init webpack my-project

# 安装依赖，走你

$cd
my-project

$npm
install(如果失败添加--force)

$npm
run dev

继续命令

npm
install iview
--save

添加vuex

npm install --save vuex

import Vue from 'vue'import App from './App'import router from './router'import iView from 'iview' // 使用 iViewimport 'iview/dist/styles/iview.css' // 使用 iViewimport '../src/css/public.css'import store from '../src/store/store.js'//Vuex
Vue.config.productionTip = falseVue.use(iView)Vue.use(store)/* eslint-disable no-new */new Vue({ el: '#app', router, store, template: '<App/>', components: { App }})
新建文件（非必要，但是推荐）stores.js

import Vue
from 'vue';
import Vuex
from 'vuex';
Vue.use(Vuex);

export default
new Vuex.Store({

state:{
count:1000
}
,
mutations:{

add(state){

state.count+=1;

},
reduce(state){
state.count-=1;
}
,
mutationName(state) {
//在这里改变state中的数据
alert('+-+-+-++');
}
}
});

其他页面调用

<template>

<div>
<h2>{{msg}}</h2>
<hr/>
<div>
<button @click="handleClick()"> +
</button>
<button @click="$store.commit('reduce')">-</button>
</div>
<h3>{{$store.state.count}}</h3>

</div>
</template>

<script>
import store
from "../store/store";
export default {
data() {
return {
msg: "Hello Vuex"
};
},
computed: {
count() {
return this.$store.state.count;
}
},
methods: {
handleClick() {

this.$store.commit("mutationName");
}
}
};
</script>