创建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' // 使用 iView
  
  
  
  

   
   import 
   
   'iview/dist/styles/iview.css'    
   
   // 使用 iView
  
  
  
  

   
   import 
   
   '../src/css/public.css'
  
  
  
  

   
   import 
   
   store 
   
   from 
   
   '../src/store/store.js'//Vuex
  
  

  
  

   
   Vue.
   
   config.
   
   productionTip = 
   
   false
  
  
  
  

   
   Vue.
   
   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>