使用Vue快速開發單頁應用-主體結構

本文所涉及代碼全在vue-cnodehtml

單頁應用,即在一個頁面集成系統中全部功能,整個應用只有一個頁面。由於路由的控制在前端,單頁面應用在頁面切換時比傳統頁面更快,從而在前端體驗更好。前端

將邏輯從後端轉移到前端,提高了性能減小了頁面加載時間,先後邏輯更扁平。可是當頁面複雜度變高時,你會發現,數據處理,UI交互將變得難以維護,因此應運而生,出現了不少MV框架和類庫。Vue就是其中之一,我的以爲(非喜勿噴)Vue類庫相對於其餘MV框架上總體的api更爲簡潔,提供的api很平衡,解決了問題的同時,沒有增長複雜度。另外我的以爲vue在大型應用,開發中使用vue-loader將組件分紅template,style,script結構更爲清晰。vue

本文以及後面相應文章,主要是vue相關技術棧來快速的實現單頁應用開發。系列文章將以一個實際項目進行講解,項目的github地址爲:node

vue-cnode demowebpack

這是一個以cnodejs.org提供的api來開發的單頁,主要使用的modules有vue、vue-router、vuex、vue-resource。爲了快速開發,咱們還使用了vue-cli腳手架工具,下文會作介紹。git

vue-cli

自從node的興起,前端項目中就開始出現各類預處理工具,當咱們開始一個新項目時,咱們都會先編寫一些預處理文件,和構建項目目錄。github

而vue-cli就是爲了作這方面工做的,生成一套提早定義好的構建文件,和相應的文件。web

vue-cli有5個對應的項目結構。咱們使用的是vue-webpack-boilerplateajax

$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

執行上面命令後,咱們將生成下面的文件結構,並開一個服務,你能夠打開http://localhost:8080看看。vue-router

文件結構

具體的使用建議看文檔

項目結構

若是你以前就瞭解vue和vue-router,能夠先看這部分。若是你瞭解vue不瞭解vue-router,能夠先看這篇文章vue-router。若是你連vue都不是很理解我建議,抽5個小時左右把文檔教程過一遍。

你能夠看到項目根目錄下面有一個html,僅有的一個html。

項目結構

上圖的結構是我本身琢磨的,主要是結合vue-router、vuex兩使用方法來考慮的。另外對於組件的複用,將一些功能組件和全局組件都放在根部,經過vuex來控制組件屬性實現一些功能。

下面我就結構由上至下的介紹。

main.js

main.js 是咱們的入口文件,主要做用是初始化vue實例並使用須要的插件。

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import filter from './filter'
import store from './vuex/store'
import { sync } from 'vuex-router-sync'
import { configRouter } from './config_router'
import resourceGlobalSet from './resource_set'

Vue.use(VueResource)
Vue.use(VueRouter)
// 初始化自定義過濾器
Vue.use(filter)

const router = new VueRouter({
  history: true,
  saveScrollPosition: true
})
configRouter(router)
Vue.http.options.emulateJSON = true
Vue.http.interceptors.push(resourceGlobalSet) // ajax 攔截

sync(store, router)
router.start(App, 'app')

就如同上面所示,主要是使用和配置相應插件,並初始化一個vue,上面的初始化在router.start(App, 'app'),是以App.vue爲組要組件,並以html中的<app></app>爲掛載替換點。

APP.vue

App.vue是咱們的主組件,全部頁面都是在App.vue下進行切換的。其實你也能夠理解爲全部的路由也是App.vue的子組件。因此我將router標示爲App.vue的子組件。

下面是App.vue的template

<template>
  <div id="app">
    <cn-header></cn-header>
    <sidebar></sidebar>
    <router-view></router-view>
    <tip></tip>
    <loading></loading>
  </div>
</template>

你能夠看到route-view和其它全局功能組件,全局組件在一個層級。

另外因爲APP.vue在全部頁面都有,咱們將會在APP.vue上面寫一些初始化全局方法。

router

router 是具體的業務組件,好比index,login,content等組件都是具體業務相關的。下面就是再和業務相關的組件。

全局組件

全局組件是頁面共用的部分,好比header,footer,navbar,你可能在想若是我有一些header是獨特的怎麼辦,這種狀況下能夠經過路由作判斷,渲染不一樣的html,若是判斷條件不是路由,也能夠在vuex寫一個store記錄組件的state。

功能組件

功能組件是好比dialog,tip等組件,是用來與用戶交互的。

一般狀況下,功能組件是各個組件都須要的一些組件。在一個頁面裏若是有兩個組件,兩個組件都同時引了一個tip組件做爲子組件是純在的。爲了不這種狀況,咱們將功能組件提到App.vue而後經過vuex進行組件交互,從而就講一個功能組件變成了全局方法。

自定義插件

vue還能本身寫插件。對於一些公用的方法和邏輯,咱們能夠提出來寫在插件裏面。

小節

能夠看到,咱們項目總體結構很是清晰。入口加載初始化,主組件掛載路由全局控制,而後全局組件、功能組件藉助vuex進行數據控制。

原文出處: http://hiluluke.cn/2016/08/04...

其餘

相關文章
相關標籤/搜索