Vue2 的 SPA 相關功能和組件:
- vue-loader:讓 Webpack 支持 Single File Components 的模塊載入器
- Single File Components:在 SPA 中,可以方便得把 HTML, JS, CSS 都寫在一個文件里面的一種 Component 機制
- vue-router:Vue 的路由層,不需要重新載入頁面就可以加載數據和顯示頁面
- vuex:Vue 的狀態管理器:自己進行簡單的狀態共享和使用 Vuex 進行共享并沒有多大區別,Vuex 最大的優點在于它為你形式化了集中處理數據存儲的過程,并提供了所有功能方法去處理那些數據。
vue-loader
vue-loader 的主要功能包括:
- ES2015 enabled by default;
- Allows using other Webpack loaders for each part of a Vue component, for example SASS for <style> and Jade for <template>;
- Allows custom sections in a .vue file that can have custom loader chains applied to them
- Treat static assets referenced in <style> and <template> as module dependencies and handle them with Webpack loaders;
- Can simulate scoped CSS for each component;
- Supports component hot-reloading during development.
Single File Components
由于 SPA 的時候,頁面中的元素大部分都是動態載入的,所以模塊化是必然的選擇,在一個頁面中同時撰寫 HTML,JS,CSS 也可以讓頁面邏輯解耦的好選擇
vue-router
Vue 的路由系統,SPA 應用是基于路由和組件的,路由用于設定訪問路徑,并將路徑和組件映射起來。傳統的頁面應用,是用一些超鏈接來實現頁面切換和跳轉的。在 vue-router 單頁面應用中,則是路徑之間的切換,也就是組件的切換
vuex
專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態,并以相應的規則保證狀態以一種可預測的方式發生變化
后面會在實際的使用過程中,繼續完善此份文檔~