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

前段时间vue3推出了bata版本，但是离正式版还有段时间，今天给搭建提供一个由# vue-cli4 + vue2.6 + vuex + vue-router + axios + element-ui搭建的框架，让大家能快速开发，跳过复杂的项目创建与配置过程。 项目已经封装好了请求和工具，指令和常用函数： 配置 项目截图： web端 移动端 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中。 框架下载地址：地址 线上访问地址：地址 个人博客：地址 学习如逆水行舟，不进则退，前端技术飞速发展，如果每天不坚持学习，就会跟不上，我会陪着大家，每天坚持推送博文，跟大家一同进步，希望大家能关注我，第一时间收到最新文章。 公众号： 公众号

本文章由javascript技术分享原创和收集