注意：這里只講VUE腳手架搭建的項目
首先安裝開發環境，vue-cli 一鍵搭建vue項目是基于 Node.js 所以先要安裝node
如何安裝node在這里不做說明，請自行百度，哈哈哈哈哈哈~~~~

然后我們使用 npm 來管理
npm是隨同NodeJS一起安裝的包管理工具，能解決NodeJS代碼部署上的很多問題,由于新版的nodejs已經集成了npm，所以之前npm也一并安裝好了。同樣可以通過輸入 "npm -v" 來測試是否成功安裝;如果沒有安裝，可以輸入下面命令進行安裝：

 npm install npm -g

安裝完npm之后再安裝webpack打包工具：

npm install webpack -g

最后全局安裝vue-cli 腳手架：

npm install vue-cli -g

好啦！環境初步建成，可以開始新建項目啦~~~~

打開終端，進入需要建立項目的文件夾下；
使用下面命令搭建項目：

vue init webpack your_project_name

然后就一路回車下去，（注意有一個地方不能回車）如下：

image.png

注意：綠色框框內是設置是否按嚴格標準檢驗代碼，如果你選擇yes，那就有得你受的了哦~~~
好啦，現在項目成功建立，再進入項目中

cd your_project_name

啟動項目：

npm run dev

image.png

好啦！現在我們vue項目已經成功搭建起來了，接下來就是安裝vue其他組件！

Vue Router
Vue Router 是vue.js官方的路由管理器。因為vue是單頁面程序，在實現路由跳轉的時候并不是傳統的使用a鏈接進行頁面跳轉，我們需要安裝vue-router；

安裝：

npm install vue-router -s

安裝之后再配置路由，在router文件夾下的index.js中

    import Vue from 'vue'
    import Router from 'vue-router'
    import home from '@/components/home/home.vue'
    Vue.use(Router)
    export default new Router({
       routes: [
          {path: '/',name: '首頁',component: home},
        ]
     })

main.js中：

import Vue from 'vue'
import App from './App'
import router from './router'

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

組件中：

<router-link to="/" >首頁</router-link>

vue-router就介紹到這里了~~~~~

下面開始介紹vue另一核心組件
Vuex

安裝:

npm install vuex -s

store文件夾下index.js中：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
export default new Vuex.Store({
state:{
    user:{},//用戶信息
},
//獲取倉庫值
getters:{
    getUser(state){
        return  state.user
    }
},
//修改倉庫值
mutations:{
    changeUser(state,data){
        state.user = data;
    }
},
//異步修改倉庫值
actions:{
    toUser(store,data){
        $.post(
              host + "/user-server/login/userLogin",
        {
          userName: username,
          password: password,
        },
        function(sdata) {
            store.commit('changeUser',sdata)
        }）
    }
}
})

main.js中：

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

new Vue({
  el: '#app',
  router,
  store
  components: { App },
  template: '<App/>'
})

組件中：

    computed:{
        username(){
            return this.$store.getters.getUser.name
        }
     },
    methods:{
        tologin(){
            let me = this;
            Login(this.loginForm.name,this.loginForm.password).then(function(res){
                if(res.data.apistatus == 200){
                   me.$store.dispatch("toUser")//調用action里面的方法
                   me.$store.commit('changeUser',res.data.result.user)
                   me.$router.push('/')
                }else {
                  me.$message({
                    message: res.data.msg,
                    type: 'error'
                })
            }
         })
    }
}

數據在getters里面獲取，外部使用this.$store.getters.getUser獲取,需要實時更新數據的話就要在組件中使用計算屬性computed

修改數據在mutations里面修改，第一個默認參數為state，外部提交使用this.$store.

至于vue-resource由于尤大神說過不再對vue-resource進行更新了，所以我這里介紹的是axios的用法；

安裝：

npm install axios -s
npm install qs -s //這是用于payload方式轉換成formdata方式

單獨新建一個js用于存放請求

import axios from "axios"
import qs from "qs"

const host = "http://xx.xx.xx.xx:8888"

export function Login(username,password){
   return axios.post(host + '/user-server/login/userLogin',qs.stringify({
       'userName':username,
      'password':password
   }))
 }

組件中使用：

import {Login} from '../../api/login'
  export default {
     data() {
        return {}
      },
    methods:{
    tologin(){
        let me = this;
        Login(this.loginForm.name,this.loginForm.password).then(function(res){
            if(res.data.apistatus == 200){
                me.$store.commit('changeUser',res.data.result.user)
                me.$router.push('/')
            }else {
                me.$message({
                    message: res.data.msg,
                    type: 'error'
                })
            }
        })
    }
  }
}

完美~~~~有什么不對的地方歡迎指導！！