一个vue全家桶搭建的SPA应用框架

319 阅读5分钟

前段时间vue3推出了bata版本,但是离正式版还有段时间,今天给搭建提供一个由# vue-cli4 + vue2.6 + vuex + vue-router + axios + element-ui搭建的框架,让大家能快速开发,跳过复杂的项目创建与配置过程。 项目已经封装好了请求和工具,指令和常用函数: 配置 项目截图: web端 移动端

vue-cli 脚手架

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是, Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。 另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

安装

在已经安装了nodenpm的前提下,只需要一行命令就能安装。

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 端不会转换。

框架本身

主要功能:

  1. 采用了 vue-cli4 搭建
  2. 使用了 vue-router 来实现路由,实现单页面应用
  3. 使用 vuex 做状态管理工具
  4. axios 做请求工具
  5. element-ui 做 ui 框架。
  6. 项目实现了动态路由,跨域配置,请求拦截,路由拦截,状态本地存储等。
  7. 项目加入了px2rem,lib-flexible实现的移动端适配方案

本人写的大部分源码都在github中。

框架下载地址:地址

线上访问地址:地址

个人博客:地址

学习如逆水行舟,不进则退,前端技术飞速发展,如果每天不坚持学习,就会跟不上,我会陪着大家,每天坚持推送博文,跟大家一同进步,希望大家能关注我,第一时间收到最新文章。

公众号: 公众号