使用vue構建中(大)型應用

想做SPA就快上車！

init

首先要起一個項目，推薦用vue-cli安裝

$ npm install -g vue-cli
$ vue init webpack demo
$ cd demo
$ npm install

demo是這個示例項目的名字

現在看到目錄結構如下

下面來稍微介紹下

build目錄是一些webpack的文件，配置參數什么的，一般不用動

src源碼文件夾，基本上文件都應該放在這里。

static生成好的文件會放在這個目錄下。

test測試文件夾，測試都寫在這里

.babelrc babel編譯參數，vue開發需要babel編譯

.editorconfig 看名字是編輯器配置文件，不曉得是哪款編輯器，沒有使用過。

.eslintrc.js eslint配置文件，用以規范團隊開發編碼規范，大中型項目很有用

.gitignore 用來過濾一些版本控制的文件，比如node_modules文件夾

index.html 主頁

package.json 項目文件，記載着一些命令和依賴還有簡要的項目描述信息

README.md 介紹自己這個項目的，想怎么寫怎么寫。不會寫就參照github上star多的項目，看人家怎么寫的

下面我針對自己的需要修改一些配置。你可以根據自己的需要進行修改。

首先去寫.eslintrc.js。在rules中加入"indent": [1, 4, { "SwitchCase": 1 }]

因為我更喜歡4個空格表一個縮進，報警程度調整成1是因為build文件夾里有很多行是2個空格，草草的。

然后在index.html中的<app></app>改成<div id="root"></div>

這個文件沒有寫入任何加載css和js的link，而依舊可以正常運行的秘訣在於webpack會在編譯的時候重新調整這個文件，注入依賴，所以不用太擔心。

好了，差不多了。進行下一步

添加依賴

我個人習慣寫stylus，所以要加上預處理器，如果喜歡sass可以自行添加。

vue-router做前端路由管理，一個中大型項目必須要做路由管理！

vuex做數據管理，類似於flux的存在，沒有vuex，中大型應用中的狀態會把開發者搞死，絕對。

$ npm install --save vue-router vuex
$ npm install --save-dev stylus-loader babel-runtime

好了，到這里，依賴也加好了。剩下的就是寫代碼了？

不急，我先說下兩個vue插件的介紹

vue-router 簡明API

vue-router用起來非常的簡單

入口文件(src/main.js)：

'use strict'
import Vue from 'vue' // 引入vue
import Router from 'vue-router' // 引入vue-router

import App from './App' // 引入根組件
import routerMap from './router' // 引入路由表

Vue.use(Router) // 聲明使用vue-router
const router = new Router() // 創建路由
routerMap(router) // 路由表引入

router.start(App, '#root') // 開啟應用

看到缺了一個./router.js文件，來，創建。

// src/router.js
'use strict'

export default function (router) {
    router.map({
        '/': {
            name: 'index',
            component: require('./components/contents/hello.vue')
        },
        '/hi': {
            name: 'hi',
            // 按需加載
            component: function (resolve) {
                require(['./components/contents/hi.vue'], resolve)
            }
        }
    })
}

好了，路由創建成功了，順便還搞了個按需加載。

那么在模板文件中如何使用？

很簡單的，就像這樣就可以了。

<!-- src/components/contents/hello.vue -->
<a class="link" v-link="{name: 'hi'}">跳轉到hi</a>

還有，告訴應用哪里需要路由轉換

<!-- src/App.vue -->
<div class="container">
    <router-view></router-view>
</div>

vuex 簡明API

這里簡要介紹一下狀態管理的vuex

在src下創建一個文件夾叫做vuex。里面定義三個文件。

mutation-types.js 定義類型的

actions.js 操作，可以分解成多個文件

store.js 入口文件，在根組件調用，然后所有子組件可以共享數據。

modules/headers.js 只是例子用的，一個headers的操作，需要定義數據的狀態和mutation。action.js只是分發操作。

這一塊還是看源碼比較容易懂。

// src/vuex/mutation-types.js
export const SET_HEADER_TITLE = 'SET_HEADER_TITLE'
// src/vuex/store.js
import Vue from 'vue'
import Vuex from 'vuex'
import headers from './modules/headers'
import createLogger from 'vuex/logger'
Vue.use(Vuex)

Vue.config.debug = true

const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
    modules: {
        headers
    },
    strict: debug,
    moddlewares: debug ? [createLogger()] : []
})
// src/vuex/actions.js
import {
    SET_HEADER_TITLE
} from './mutation-types'

export const setTitle = makeAction(SET_HEADER_TITLE)

function makeAction (type) {
    return ({ dispatch }, ...args) => dispatch(type, ...args)
}
// src/vuex/modules/headers.js
import {
    SET_HEADER_TITLE
} from '../mutation-types'

const state = {
    title: 'default'
}

const mutations = {
    [SET_HEADER_TITLE](state, newTitle) {
        state.title = newTitle
    }
}

export default {
    state,
    mutations
}

我再說兩個，一個掛載store，一個獲取數據，觸發操作。

掛載store

// src/App.vue
import store from './vuex/store'
import HeaderComponent from './components/header'
import FooterComponent from './components/footer'
export default {
    store,
    components: {
        HeaderComponent,
        FooterComponent
    }
}

獲取數據及操作

// src/components/header.vue
// 從vuex拿數據，然后渲染到頁面上
// 如果需要修改可以調用setTitle
import { setTitle } from '../vuex/actions'
export default {
    vuex: {
        getters: {
            title: state => state.headers.title
        },
        actions: {
            setTitle
        }
    }
}

fetch

單頁應用少不了服務端交互，別老用ajax了，換fetch吧，少年！

$ npm install --save isomorphic-fetch es6-promise
// src/vuex/actions.js
require('es6-promise').polyfill()
require('isomorphic-fetch')

我在示例代碼中並沒有寫。

fetch用起來根本不會回憶ajax時代的。

stylus

在之前的文章中安利過很多次stylus了，各種方便，這里一筆帶過，喜歡的同學自然會去找文檔

test

測試是非常重要的一環。要想以后不出亂子，一定要盡早寫好測試。

示例代碼中有少量測試，推薦看一下

多端

vue創作的應用不僅可以跑在瀏覽器里，還可以通過electron以客戶端的形式跑起來！

是不是吊吊的。

至於移動端，聽聞阿里內部有在開發Weex，類vue的api。