前段时间vue3推出了bata版，不过距离正式版还有一段时间。今天，我将提供一个通过#vue-cli4+vue2.6+vuex+vue-router+axios+element-ui搭建的框架，让大家快速开发，跳过复杂的项目创建和配置过程。该项目封装了请求和工具、说明和常用功能：项目截图：vue-cli脚手架Vue是一个用于构建用户界面的渐进式框架。与其他大型框架不同，Vue被设计为自下而上逐层应用。Vue的核心库只专注于视图层，不仅易于使用，而且易于与第三方库或现有项目集成。另一方面，当与现代工具链和各种支持库相结合时，Vue也完全有能力为复杂的单页应用程序提供支持。安装在已经安装node和npm的前提下，只需要一行命令即可安装。npminstall-g@vue/cli创建项目：vuecreateproject-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和page的映射关系。该框架实现了路由拦截、动态路由等配置。路由拦截：//路由拦截router.beforeEach((to,from,next)=>{//路由跳转时，添加进度条//处理页面位置if(to.fullPath==='/'){router.push('/baseStudy')}//if(to.name!='login'&&!commonUtil.getCookie('login')){////Vue.showAlert('未登录，已调整为主页')//router.push('/login')//返回//}NProgress.start();//顶部进度条next()});路由配置和动态路由constbaseRoute=[{name:'layout',path:'/',component:layout,//子路由children:arr}]??//利用vue-router2.2.0的新特性addRoutes来实现路由的动态加载，菜单的动态加载，用于后台管理系统，路由数据从数据库中获取它使用集中存储来管理应用程序所有组件的状态，并使用相应的规则来确保状态以可预测的方式变化。Vuex的目的是管理共享状态。为了达到这个目的，它制定了一系列的规则，比如修改数据源状态，触发动作等等，都需要遵循它的规则，从而达到让项目结构更加清晰，更加便于维护的目的。每个Vuex应用程序的核心都是商店。商店基本上是一个容器，可以容纳应用程序的大部分状态。在大型项目中，vuex是必不可少的。定义状态和突变conststate={isLoading:false,menuPosition:'1-0',isMobile:false,isShowMenu:false}constmutations={setShowLoading(state,val){state.isLoading=val;}，引入vuex和VuexPersistence缓存状态importVuexPersistencefrom'vuex-persist'import{state,mutations}from'./mutations.js'//这个插件是结合vuex和localStorage的。一般情况下，刷新页面，vuex的状态会受到影响，结合插件后，状态不会被清除constvuexLocal=newVuexPersistence({storage:window.localStorage,reducer:state=>({menuPosition:state.menuPosition//这里把菜单位置加入缓存，防止用户刷新浏览器，菜单指向错误}),filter:(mutations)=>(mutations.type==='setMenuPosition'||mutations.type==='setArbitration')})Vue.use(Vuex)exportdefaultnewVuex.Store({state,mutations,plugins:[vuexLocal.plugin]})引入axios，首先要了解请求工具是什么axios是：axios是基于对浏览器的promises（承诺）而node.js是一个http客户端。它的特点是：支持浏览器和node.js，支持promise，可以拦截请求和响应，可以转换请求和响应数据，可以取消请求，自动转换JSON数据，浏览器支持防止CSRF（跨站请求伪造）。任何非静态项目都离不开请求工具。axios介绍及配置importaxiosfrom'axios'axios.defaults.baseURL=baseURLaxios请求拦截//添加请求拦截器axios.interceptors.request.use(function(config){//请求前拦截//请求前获取cookie,检查你是否登录//if(config.url.indexOf('/login')<0&&!commonUtil.getCookie('login')){////Vue.showAlert('未登录，已跳转到主页')//router.push('/login')//返回//}store.commit('setShowLoading',true)if(config.method==='post'){//post请求添加分页参数}//在发送请求之前要做的事情returnconfig;},function(error){store.commit('setShowLoading',false)//在请求错误时要做的事情returnPromise.reject(error);});axios.interceptors.response.use((response)=>{//拦截返回数据store.commit('setShowLoading',false)returnresponse},(err)=>{store.commit('setShowLoading',false)返回临mise.reject(err)});axiosrequestFul请请求封装//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)})}//删除请求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)})}//获取请求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-uiui库本框架使用element-ui作为组件库。本框架是饿了么提供的开源框架。组件丰富，有reace和angular版本，广泛应用于web端移动端适配框架采用px2rem，lib-flexible适配方案进行移动端适配。原理是基于rem的，可以自动将style中写的px转换成rem。而且它不会在网络端进行转换。框架本身的主要功能：使用vue-cli4搭建，使用vue-router实现路由，实现单页面应用，使用vuex作为状态管理工具，axios作为请求工具，element-ui作为ui框架。项目实现了动态路由、跨域配置、请求拦截、路由拦截、本地状态存储等，项目新增了px2rem，是lib-flexible实现的移动端适配方案。我写的大部分源代码都在github。框架下载地址：地址在线访问地址：地址个人博客：地址学习如逆水行舟，不进则退。前端技术发展迅速。如果你不每天坚持学习，你将无法跟上。我会陪着大家每天坚持推送博文，和大家一起进步，希望大家可以关注我，第一时间收到最新文章。公众号:
