使用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

測試是很是重要的一環。要想之後不出亂子，必定要儘早寫好測試。

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

Code

我仍是決定不在文章裏寫代碼了。

多端

vue創做的應用不只能夠跑在瀏覽器裏，還能夠經過electron以客戶端的形式跑起來！

是否是吊吊的。

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

將來

將來js的前途確定是不錯的！加油～