VUE全家桶

注意:這里只講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'
                })
            }
        })
    }
  }
}

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容