一個vue全家桶搭建的SPA應用框架

前段時間vue3推出了bata版本，但是離正式版還有段時間，今天給搭建提供一個由# vue-cli4 + vue2.6 + vuex + vue-router + axios + element-ui搭建的框架，讓大家能快速開發，跳過複雜的項目創建與配置過程。
項目已經封裝好了請求和工具，指令和常用函數：

項目截圖：

vue-cli 腳手架

Vue 是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是， Vue 被設計爲可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠爲複雜的單頁應用提供驅動。

安裝

在已經安裝了node和npm的前提下，只需要一行命令就能安裝。

npm install -g @vue/cli

創建項目：

vue create project-name
# (project-name是你的項目名字)

默認情況下，會安裝vue-router,vuex,axios,eslint,typescript,babel等常用工具的，也可以手動選擇性的安裝。這裏不做贅述，因爲我們的框架已經搭建好了，該框架是基於 vue-cli4 來搭建的，相對前面的 vue-cli2,和 vue-cli3 上都有了大量的優化。

vue-router 路由工具

vue-router 是 Vue.js 官方的路由插件，它和 vue.js 是深度集成的，適合用於構建單頁面應用。vue 的單頁面應用是基於路由和組件的，路由用於設定訪問路徑，並將路徑和組件映射起來。傳統的頁面應用，是用一些超鏈接來實現頁面切換和跳轉的。在 vue-router 單頁面應用中，則是路徑之間的切換，也就是組件的切換。路由模塊的本質就是建立起 url 和頁面之間的映射關係。
本框架中已經實現了路由攔截，動態路由等配置。

路由攔截：

//路由攔截
router.beforeEach((to, from, next) => {              //路由跳轉時，添加進度條
  //處理頁面位置
	if(to.fullPath === '/'){
		router.push('/baseStudy')
	}
  // if(to.name != 'login' && !commonUtil.getCookie('login')){
  //   // Vue.showAlert('未登錄，已經調整到首頁')
  //   router.push('/login')
  //   return
  // }
  NProgress.start();    //頂部進度條
  next()
});

路由配置與動態路由

const baseRoute = [
	{
		name: 'layout',
		path: '/',
		component: layout,
		// 子路由
		children: arr
	}
]
//利用vue-router2.2.0新增特性addRoutes實現路由動態加載，菜單動態加載，運用於後臺管理系統，路由數據取自數據庫
router.addRoutes(baseRoute)
export default router

vuex 狀態管理

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 的目的是爲了管理共享狀態，爲了達到這個目的，它制定了一系列的規則，比如修改數據源 state、觸發 actions 等等，都需要遵循它的規則，以此來達到讓項目結構更加清晰且易於維護的目的。每一個 Vuex 應用的核心就是 store（倉庫）。store 基本上就是一個容器，它包含着你的應用中大部分的狀態 (state)。大型項目中，vuex 是必不可少的。

定義 state 和 mutations

const state = {
	isLoading: false,
	menuPosition: '1-0',
	isMobile: false,
	isShowMenu: false
}
const mutations = {
	setShowLoading(state, val) {
	state.isLoading = val;
},

引入 vuex 和 VuexPersistence 來緩存狀態

import VuexPersistence from 'vuex-persist'
import {state,mutations} from './mutations.js'

//這個插件是爲了讓vuex和localStorage結合，正常情況下，刷新頁面，vuex的狀態都會被情況，結合插件後，狀態不會被清空
const vuexLocal = new VuexPersistence({
  storage: window.localStorage,
  reducer: state => ({
    menuPosition: state.menuPosition    //這裏把菜單位置加入緩存，防止用戶刷新瀏覽器後，菜單指向不對
  }),
  filter: (mutations) => (
    mutations.type === 'setMenuPosition' ||
    mutations.type === 'setArbitration'
  )
})
Vue.use(Vuex)
export default new Vuex.Store({
    state,
    mutations,
    plugins: [vuexLocal.plugin]
})

引入 axios，請求工具

首先要明白的是axios 是什麼：axios 是基於 promise（諾言）用於瀏覽器和 node.js 是 http 客戶端。其特點是：支持瀏覽器和 node.js，支持 promise，能攔截請求和響應，能轉換請求和響應數據，能取消請求，自動轉換 JSON 數據，瀏覽器支持防止 CSRF（跨站請求僞造）。任何一個非靜態項目都離不開請求工具。

axios 引入與配置

import axios from 'axios'
axios.defaults.baseURL = baseURL

axios 請求攔截

// 添加請求攔截器
axios.interceptors.request.use(function (config) {
	// 請求之前的攔截
  //請求之前獲取cookie，查看是否登錄
  // if(config.url.indexOf('/login') < 0 && !commonUtil.getCookie('login')){
  //   // Vue.showAlert('未登錄，已經跳轉到首頁')
  //   router.push('/login')
  //   return
  // }
	store.commit('setShowLoading',true)
  if (config.method === 'post') {   //post請求進行添加分頁參數
    if (!config.data) {
      config.data = {}
    }
    let params = {
      PageNo:baseConfig.pageNo,
      PageSize:baseConfig.pageSize
    }
    config.data  = Object.assign(params, config.data);
  }
  // 在發送請求之前做些什麼
  return config;
}, function (error) {
	store.commit('setShowLoading',false)
  // 對請求錯誤做些什麼
  return Promise.reject(error);
});

axios.interceptors.response.use((response) => {
	// 返回數據的攔截
	store.commit('setShowLoading',false)
  return response
},(err)=>{
	store.commit('setShowLoading',false)
  return Promise.reject(err)
});

axios requestFul 請求封裝

 //patch請求
Vue.prototype.$patch = function (url, parmas, successCallBack, errorCallBack) {
    this.$axios.patch(url, parmas).then(res => {
        successCallBack(res.data)
    }).catch(err => {
        (errorCallBack && errorCallBack()) || this.showAlert('error', err)
    })
}
//delete請求
Vue.prototype.$del = function (url, parmas, successCallBack, errorCallBack) {
    console.log(parmas, 'params')
    this.$axios.delete(url, {data: parmas}).then(res => {
        successCallBack(res.data)
    }).catch(err => {
        (errorCallBack && errorCallBack()) || this.showAlert('error', err)
    })
}
//put請求
Vue.prototype.$put = function (url, parmas, successCallBack, errorCallBack) {
    this.$axios.put(url, parmas).then(res => {
        successCallBack(res.data)
    }).catch(err => {
        (errorCallBack && errorCallBack()) || this.showAlert('error', err)
    })
}
//post請求
Vue.prototype.$post = function (url, parmas, successCallBack, errorCallBack) {
    this.$axios.post(url, parmas).then(res => {
        successCallBack(res.data)
    }).catch(err => {
        (errorCallBack && errorCallBack()) || this.showAlert('error', err)
    })
}

//get請求
Vue.prototype.$get = function (url, parmas, successCallBack, errorCallBack) {
    parmas = Object.assign(defaultParams,parmas)
    this.$axios.get(url, parmas).then(res => {
        successCallBack(res.data)
    }).catch(err => {
        (errorCallBack && errorCallBack()) || this.showAlert('error', err)
    })
}

element-ui ui 庫

本框架採用element-ui作爲組件庫，該框架由餓了麼公司提供開源框架，其組件豐富，同時還有reace,angular版本，其被廣泛用於 web 端項目中。

移動端適配

該框架採用px2rem,lib-flexible的適配方案來做移動端適配，原理是基於 rem 來實現的，能自動將樣式中寫的px轉換爲rem。並且在 web 端不會轉換。

框架本身

主要功能：

採用了 vue-cli4 搭建
使用了 vue-router 來實現路由，實現單頁面應用
使用 vuex 做狀態管理工具
axios 做請求工具
element-ui 做 ui 框架。
項目實現了動態路由，跨域配置，請求攔截，路由攔截，狀態本地存儲等。
項目加入了px2rem,lib-flexible實現的移動端適配方案

本人寫的大部分源碼都在github中。

框架下載地址：地址

線上訪問地址：地址

個人博客：地址

學習如逆水行舟，不進則退，前端技術飛速發展，如果每天不堅持學習，就會跟不上，我會陪着大家，每天堅持推送博文，跟大家一同進步，希望大家能關注我，第一時間收到最新文章。

公衆號：

一個vue全家桶搭建的SPA應用框架

vue-cli 腳手架

安裝

vue-router 路由工具

路由攔截：

路由配置與動態路由

vuex 狀態管理

定義 state 和 mutations

引入 vuex 和 VuexPersistence 來緩存狀態

引入 axios，請求工具

axios 引入與配置

axios 請求攔截

axios requestFul 請求封裝

element-ui ui 庫

移動端適配

框架本身

DAPPER 事務 TRANSACTION

promise講解

vue實現多個下拉去重

electron打包你的h5應用成桌面應用

vue的keep-alive講解

一文看懂websocket

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結