init
首先要起一個項目，推薦用vue-cli安裝
$ npm install -g vue-cli
$ vue init webpack demo
$ cd demo
$ npm installdemo 是這個示例項目的名字
現在看到目錄結構如下
下面來稍微介紹下
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 以客戶端的形式跑起來！