vue2入坑隨記（一）

都說Vue2簡單，上手容易，但小馬過河，自己試了才曉得，除了ES6語法和webpack的配置讓你感到陌生，重要的是思路的變換，以前隨便拿全局變數和修改dom的鎚子不能用了，變換到關注數據本身。vue的官方文檔還是不錯的，由淺到深，但是當你用vue-cli構建一個工程的時候，發現官方文檔還是不夠用，得參考git上開源的項目並去學習es6。而且vue的全家桶(vue-cli,vue-router,vue-resource,vuex)還是都要上的。

這個構建工具大大降低了webpack的使用難度，支持熱更新，有webpack-dev-server的支持，相當於啟動了一個請求伺服器，給你搭建了一個測試環境，你只關注開發就好。

# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創建一個基於 webpack 模板的新項目
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm install
$ npm run dev

熱更新的機制是檢測文件的變化並用websocket通知客戶端做出相應的更新。詳細的可以移步：【webpack】-- 模塊熱替換

vue的路由還是很方便的，比ag1的時候要方便很多。這種方便體現在三個方面：

1個是路由和頁面(組件)對應：

import Vue from "vue"
import Router from "vue-router"
import Home from "@/components/Home"
import Chat from "@/components/Chat"
import Firends from "@/components/Firends"
import Logon from "@/components/Logon"

Vue.use(Router)
let router=new Router({
routes: [
{
path: "/home",
name: "Home",
component: Home
},
{ path: "/", redirect: "/home" },//重定向
{
path: "/chat",
name: "Chat",
component: Chat
},
{
path: "/firends",
name: "Firends",
component: Firends
},
{
path: "/logon",
name: "Logon",
component: Logon
}
]
});

常人的思路就是這樣，而ag1中還需要帶上控制器(vue中沒有這個概念,取而代之的是關注組件就行)，這樣用起來更簡單。MVC模式中，需要指到controller下的action，如果導航分類多，對應策略是嵌套路由。

2個是可以具體到元素了：

首頁

這個to後面的home(忽略大小寫)就是上面定義的路由名稱。這樣就很方便了。類似於Asp.net MVC 的路由可以用名稱來渲染出路徑，而不用什麼時候都要輸入路徑。

3個是事件攔截：

如果我們要做驗證，最好不過的就是在用戶到達頁面之前進行驗證：

router.beforeEach((to, from, next) => {
//todo 以後增加不需要驗證的地址判斷
if(to.path!=="/logon"&&!store.state.userInfo.Account){
next({ path: "/logon" })
return;
}else{
next;
}
})

比如在beforeEach中進行處理。它還有很多功能，就不一一枚舉了，官方文檔：http://router.vuejs.org/zh-cn/

看了幾個移動UI庫，一開始奇怪怎麼沒有footer組件，現在明白，路由都這麼方便了，第三方ui沒必要封裝了footer，也不方便封裝(因為依賴路由)。於是導航可能是你需要自己來寫的第一個組件。

比如定義了個Footer.vue

name: "VFooter"

}

只在App.Vue中就需要引入

import VFooter from "./VFooter"

export default {
name: "app",
data {
return {
msg: "this is home"
}
},
components:{VFooter}
}

然後在App.Vue中就可以使用了

如果是要註冊到全局 就用先在main.js中引入

import Footer from "./components/VFooter"
//
Vue.component("VFooter", Footer)//寫在構造函數之前

到了這一步就可以愉快的組裝自己的頁面了。如果需要給頁面加上滑動效果，可以加一個transition(位於app.vue):

.slide-out-enter-active,
.slide-out-leave-active,
.slide-in-enter-active,
.slide-in-leave-active {
will-change: transform;
transition: all 400ms;
position: absolute;
}
.slide-out-enter {
opacity: 0;
transform: translateX(-100%);

}
.slide-out-leave-active {
opacity: 0;
transform: translateX(100%);

}
.slide-in-enter {
opacity: 0;
transform: translateX(100%);

}
.slide-in-leave-active {
opacity: 0;
transform: translateX(-100%);

如何做到左右切換呢?

頁面敲好了，得能發請求。https://github.com/pagekit/vue-resource而前端如果不是自己寫的介面首先關心的還是怎麼設置代理，這個位於config/index.js下面的proxyTable。

proxyTable: {
"/api":
{
target: "http://11.111.249.12:11",
changeOrigin: true,
pathRewrite:
{
"^/api": ""
}
},

跨域的設置不能少了changeOrigin。另外需要注意最後的這個"^/api": ""。 要注意你選擇的"/api"是不是原路徑中的一部分，不然容易出錯。

然後還有一部分就是設置請求頭(main.js)：

import VueResource from "vue-resource"
Vue.use(VueResource);
Vue.http.interceptors.push(function(request, next) {// modify method
//request.method = "POST";

// modify headers

request.headers.set("token",「token」);// continue to next interceptor
next;
});

5.vuex

全家桶裡面一開始最讓我懵逼的就是這個vuex。這是個什麼鬼，為什麼需要這個。沒有玩過React，不知道什麼是狀態管理。當你想用一個全局變數的時候，你發現之前的招都不靈了。比如設置一個登錄狀態

let login=(name,pwd,success,fail)=>{
Vue.http.post(loginUrl,{account:name,password:pwd}).then(res=>{
//.... window.hasLogin=true;

},res=>{ fire(fail,"請求失敗"); }) }

然後再首頁顯示出來：

data {
return {
hasLogin:window.hasLogin
}
},
methods:{
toggle{
window.hasLogin=!window.hasLogin;
console.log("clicked",window.hasLogin)
}
},

你發現你登錄之後確實顯示了true，但怎麼點擊也不會切換false或true。

需要再賦值一次：

this.hasLogin=window.hasLogin;

為什麼呢？因為你自己定義的變數，根本不屬於vue的model。也就是沒有處理過geter和seter,雖然變數的值是變化了，但仍然無法改變界面上的狀態。所以你需要一個狀態管理，按照一定的機制把你的變數變換成vue內部的模型。這個東西就是vuex。因為約定比較多，略顯複雜點，但是耐心看一下還是很容易接受的。它主要分四個部分，state,getters,mutations,actions。先定義一個user.js如下：

state就是我們放共享變數的地方。比如下面的userInfo.

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

const userStore=new Vuex.Store({
state:{
userInfo:{
userName:""
}
},
getters:{
getUserInfo(state){
return state.userInfo;
}
},
mutations:{
setUserInfo(state,userInfo){
state.userInfo=userInfo;
}
},
actions:{
setUserInfo({commit}){
commit("setUserInfo");
}
}

})

export default userStore;

而getters顧名思義就是獲取介面，mutations(突變)這個詞有點唬人，其實就是setters嘛。裡面的方法自帶state參數。而actions就是mutations的非同步方法。然後再main.js中引用一下：

import store from "./store/user";
//...
new Vue({
el: "#app",
router,
store,
template: "",
components: { App }
})

然後我們在設置或獲取的時候就可以使用指定的方法：

import store from "@/store/user";
//...
store.commit("setUserInfo",user)

可以直接通過store.state獲取變數，也可以通過getters介面：

computed:{
...mapGetters({username:"getUserName"})
},

這三個點是es6中的擴展運算符。將一個數組轉為用逗號分隔的參數序列。

當然這些狀態刷新之後就沒有了，如果想要暫存下來，可以放到sessionStorage中：

if (window.sessionStorage.user) {
var json=JSON.parse(window.sessionStorage.user);
store.commit("setSessionUser",json)
}

當然要在muations中放進去

//個人信息
setUserInfo(state,user)
{ state.userInfo=user; window.sessionStorage.user=JSON.stringify(state.userInfo); },

小結：到這兒基本五臟俱全了，可以愉快的玩耍了。還有一個是對生命周期的理解。組件實例每次載入都會執行一遍，所以在生命周期的方法中做請求和綁定的時候要清楚這一點。

其他:

Demo

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！