使用Vue快速開發(fā)單頁應用－主體結構

dcr309duan 發(fā)布于2019-08-20 10:29 / 2855人閱讀

摘要：本文以及后面相應文章，主要是相關技術棧來快速的實現(xiàn)單頁應用開發(fā)。原文出處其他使用快速開發(fā)單頁應用主體結構使用快速開發(fā)單頁應用使用快速開發(fā)單頁應用登錄頁面使用快速開發(fā)單頁應用功能組件與路由組件通信

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

單頁應用，即在一個頁面集成系統(tǒng)中所有功能，整個應用只有一個頁面。因為路由的控制在前端，單頁面應用在頁面切換時比傳統(tǒng)頁面更快，從而在前端體驗更好。

將邏輯從后端轉移到前端，提升了性能減少了頁面加載時間，前后邏輯更扁平。但是當頁面復雜度變高時，你會發(fā)現(xiàn)，數據處理，UI交互將變得難以維護，所以應運而生，出現(xiàn)了很多MV框架和類庫。Vue就是其中之一，個人覺得（非喜勿噴）Vue類庫相對于其他MV框架上整體的api更為簡潔，提供的api很平衡，解決了問題的同時，沒有增加復雜度。另外個人覺得vue在大型應用，開發(fā)中使用vue-loader將組件分成template,style,script結構更為清晰。

本文以及后面相應文章，主要是vue相關技術棧來快速的實現(xiàn)單頁應用開發(fā)。系列文章將以一個實際項目進行講解，項目的github地址為：

vue-cnode demo

這是一個以cnodejs.org提供的api來開發(fā)的單頁，主要使用的modules有vue、vue-router、vuex、vue-resource。為了快速開發(fā)，我們還使用了vue-cli腳手架工具，下文會做介紹。

vue-cli

自從node的興起，前端項目中就開始出現(xiàn)各種預處理工具，當我們開始一個新項目時，我們都會先編寫一些預處理文件，和構建項目目錄。

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

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

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

執(zhí)行上面命令后，我們將生成下面的文件結構，并開一個服務，你可以打開http://localhost:8080看看。

具體的使用建議看文檔。

項目結構

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

你可以看到項目根目錄下面有一個html，僅有的一個html。

上圖的結構是我自己琢磨的，主要是結合vue-router、vuex兩使用方法來考慮的。另外對于組件的復用，將一些功能組件和全局組件都放在根部，通過vuex來控制組件屬性實現(xiàn)一些功能。

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

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.vue

App.vue是我們的主組件，所有頁面都是在App.vue下進行切換的。其實你也可以理解為所有的路由也是App.vue的子組件。所以我將router標示為App.vue的子組件。

下面是App.vue的template

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

另外由于APP.vue在所有頁面都有，我們將會在APP.vue上面寫一些初始化全局方法。

router

router 是具體的業(yè)務組件，比如index,login,content等組件都是具體業(yè)務相關的。下面就是再和業(yè)務相關的組件。

全局組件

全局組件是頁面共用的部分，比如header，footer，navbar，你可能在想如果我有一些header是獨特的怎么辦，這種情況下可以通過路由做判斷，渲染不同的html，如果判斷條件不是路由，也可以在vuex寫一個store記錄組件的state。

功能組件

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

通常情況下，功能組件是各個組件都需要的一些組件。在一個頁面里如果有兩個組件，兩個組件都同時引了一個tip組件作為子組件是純在的。為了避免這種情況，我們將功能組件提到App.vue然后通過vuex進行組件交互，從而就講一個功能組件變成了全局方法。

自定義插件

vue還能自己寫插件。對于一些公用的方法和邏輯，我們可以提出來寫在插件里面。

小節(jié)

可以看到，我們項目整體結構非常清晰。入口加載初始化，主組件掛載路由全局控制，然后全局組件、功能組件借助vuex進行數據控制。

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

其他

使用Vue快速開發(fā)單頁應用－主體結構

使用Vue快速開發(fā)單頁應用－vue-router

使用Vue快速開發(fā)單頁應用－登錄頁面

使用Vue快速開發(fā)單頁應用－功能組件與路由組件通信

GPU云服務器云服務器快速應用開發(fā) 快速開發(fā)安卓應用安卓應用快速開發(fā) 快速開發(fā)物聯(lián)網應用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/80174.html

使用Vue快速開發(fā)單頁應用－功能組件與路由組件通信

摘要：展示信息展示時間結束后，執(zhí)行回調函數如果有上面就完成了組件的整套邏輯，最后我們還需要把組件掛在。原文鏈接其他使用快速開發(fā)單頁應用主體結構使用快速開發(fā)單頁應用使用快速開發(fā)單頁應用登錄頁面使用快速開發(fā)單頁應用功能組件與路由組件通信本文所涉及代碼全在vue-cnode showImg(https://segmentfault.com/image?src=http://7fvhwe.com1...

KitorinZero 2019-08-14 14:33 評論0 收藏0
使用Vue快速開發(fā)單頁應用－vue-router

摘要：當前路由對象調用此函數處理切換過程的下一步終止切換重定向到另一個路由由于是路由切換后，只有上面的兩個屬性。原文地址其他使用快速開發(fā)單頁應用主體結構使用快速開發(fā)單頁應用使用快速開發(fā)單頁應用登錄頁面使用快速開發(fā)單頁應用功能組件與路由組件通信本文所涉及代碼全在vue-cnode vue-router主要作用是將路由控制，轉移到前端。我們將會在vue-router里面保存一個路由表，在vue...

mingde 2019-08-20 10:29 評論0 收藏0
使用Vue快速開發(fā)單頁應用－登錄頁面

摘要：首先我們從登錄頁面以及開始，因為后續(xù)很多其它的頁面都需要登錄信息。大家還是看看我這做個指引，具體還是看代碼原文地址其他使用快速開發(fā)單頁應用主體結構使用快速開發(fā)單頁應用使用快速開發(fā)單頁應用登錄頁面使用快速開發(fā)單頁應用功能組件與路由組件通信本文所涉及代碼全在vue-cnode 前面兩篇都是介紹組織結構和vue-router，從本文開始我們將講一些如何優(yōu)雅的用vue編寫單頁應用。首先我們從...

yeyan1996 2019-08-20 10:29 評論0 收藏0
一套Vue的單頁模板：N3-admin

摘要：趁著周末偷來一點閑，總結近期的工作和學習，想著該花點心思把這套基于的單頁應用模板簡單的給介紹一下。同時也是一套可擴展的單頁應用開發(fā)模板。趁著周末偷來一點閑，總結近期的工作和學習，想著該花點心思把N3-admin這套基于N3-components的單頁應用模板簡單的給介紹一下。首發(fā)于個人博客；blog.lxstart.net項目路徑: https://github.com/N3-co...

CloudDeveloper 2019-08-02 15:57 評論0 收藏0
一套Vue的單頁模板：N3-admin

摘要：趁著周末偷來一點閑，總結近期的工作和學習，想著該花點心思把這套基于的單頁應用模板簡單的給介紹一下。同時也是一套可擴展的單頁應用開發(fā)模板。趁著周末偷來一點閑，總結近期的工作和學習，想著該花點心思把N3-admin這套基于N3-components的單頁應用模板簡單的給介紹一下。首發(fā)于個人博客；blog.lxstart.net項目路徑: https://github.com/N3-co...

weizx 2019-08-21 11:54 評論0 收藏0