Vue实现了一个20+页面的复杂单页应用（仿实验楼）

前言初学Vue，搜索Vue项目，几乎都是TODO应用。音乐播放器之类的应用，并没有想象中那么复杂，当然速度也慢。慢慢摸索和体会之后，你也会知道Vue的一些功能，比如v-on，v-bind等绑定，v-for,v-if等逻辑控件。但是写完总觉得意犹未尽。。。所以想实现一个稍微复杂一点的应用。项目的主要部分是前端页面。数据来源于实验楼原址。原站API不支持跨域调用，需要转发。效果展示技术栈vue2+vuex+vue-router+axios+flex知识点总结vue-router懒加载路由懒加载在官方文档中解释为打包应用时的按需加载：最终目的永远是打包发布，所以懒加载肯定是知道的。const__import__=file=>()=>import(`@/pages/${file}.vue`)...{name:'home',component:__import__('home')}路由切换转场动画单页该应用程序可以轻松创建在不同页面之间切换时使用的动画效果，例如在移动APP中左右滑动。这里实现的过渡动画效果是一个缓慢的渐变效果，透明度从0到1。使用Vue的过渡动画组件来这样每次路由切换都会触发0.8秒的渐变效果，透明度从0到1：routenavigationguardroutenavigationguard可以让我们每次做一些功能路由变化时的性调整，比如切换这个页面，如果需要登录，那么我们可以这样做：...{path:'/profile',name:'profile',component:Profile,meta:{login:true}}router.beforeEach((to,from,next)=>{if(to.meta.login){if(!store.state.loginState.isLogin){next({name:'login'})}}else{next()}}})上面的守卫意识到如果当前页面需要登录但没有登录，会跳转到登录页面，这样就不用在每个页面都设置勾选了。另外，前面的navigationguard一定要记得调用next，不然就没有组件加载。每次切换路由页面的时候，我们大概都需要一个后置导航卫士来帮我们把页面滚动到顶部。router.afterEach((to,from)=>{window.scrollTo(0,0)})不同于之前设置的守卫，接下来不需要调用post守卫。vuexvuex用于状态管理。这是一个全球数据仓库。数据下载、转换、存储都放在里面。当然Vue组件也可以下载保存数据，也可以传输不同的组件，但是往往随着业务的增加变得相当麻烦。如果不使用vuex状态管理，一般会这样写：数据由父组件下载并保存并传递给子组件：...data:function(){return{dataOne:{}}},created:asyncfunction(){letres=awaitget('http://www.ceshi.com')this.dataOne=res.data}有子组件中的触发器，填充后启动页面被修改，但是子组件不能直接修改父组件传过来的数据，所以需要发送一个信号让父组件接受，然后父组件才会修改：子组件props:{data:{type:Object,require:true}},methods:{change:fucntion(data){this.$emit('change',data)}}父组件...methods:{change:asyncfunction(data){awaitget(...)}}别说写一个额外的change方法，你还需要不要忘记注册子组件的事件。将其视为两个组件之间的通信。随着组件的增加，原来只需要一个方法的东西，会需要两三个，事件注册也越来越多，就看嵌套了多少子组件了。如果不注意忘记注册哪个事件，调试起来会耗费很长时间。时间。如果用vuex会简单很多，因为它是全局状态管理。父组件只需要负责下载触发数据即可。...created:asyncfunction(){awaitthis.$store.dispatch('dataStore/getData')}子组件中的数据会跟着变化，父组件不需要当数据被修改时得到通知dataStore/getData',data)}}这种全局状态管理不会因为嵌套子组件而增加复杂度，可读性好。如何在store中操作和修改数据，只需要在组件中触发即可。API跨域配置实验楼原站也是用Vue写的，前后端分离，使用API??通信。我们可以获取API并使用它。当然，我已经掌握了实验楼的API后台。实验楼的API和显示都在同一个域名下，所以不存在跨域问题，但是我们开发的话，不在同一个域名下。如果我们要使用它，不可避免的链接就是跨域。由于服务器不支持跨域，只能做一次转发才能使用。我们先来了解一下跨域。同源策略同源策略限制从同源加载的文档或脚本如何与来自另一个源的资源交互。这是隔离潜在恶意文件的重要安全机制。也就是说http://www.baidu.com中的Js在没有跨域配置的情况下无法与http://juejin.im通信。服务端跨域配置无论后端使用什么语言，解决跨域就是在服务端的回复中添加如下header：Access-Control-Allow-Origin:*Access-Control-Allow-Methods:POSTAccess-Control-Allow-Headers:x-requested-with,content-typeAccess-Control-Allow-Origin表示可以请求的来源，*表示任意一个都可以。Access-CONtrol-Allow-Methods表示请求的方法，POST表示只有POST请求才能进行跨域请求，GEt、PUT、DELETE等不加标记则不允许。Access-Control-Allow-Headers表示允许跨域的headers。Vue中的配置对于本地开发，可以在Vue的配置文件中配置config/index.js。下面是配置好的开发环境的跨域请求：dev:{proxyTable:{'/api':{target:'http://localhost:8000/api',//设置你接口的域名callchangeOrigin:true,pathRewrite:{'^/api/':''//这里替换target中的内容，当使用'/api/demo'时相当于'http://localhost:8000/api/demo'.}}}}生产环境跨域：如果生产环境跨域不需要携带cookies认证，则服务器配置上述响应头，否则Access-Control-Allow-Credentials：true和Access-Control-Allow-Origin不能是*，*与凭据冲突。最后，使用axios请求时需要配置withCredentials=true。CSS布局项目中使用了flex布局。flex布局使用起来比较流畅，也容易编写。给任意一个元素添加.box{display:flex}，这样这个元素的内容就会按照默认的flex和默认的水平方向进行布局。不会换行，从容器的最左端开始。可以通过这些属性来设置容器中的元素如何排列：flex-directionarrangementdirectionrow|columnflex-wrap包装|开始|弹性端|中心|间隔|space-aroundalign-items指定元素横轴（corssaxis）到它的方式flex-start|弹性端|中心|基线|熟悉布局方式，只用上面的就可以搭建一个主页了。这里有更多关于flex的详细信息。请参阅GitHub以获取最终的完整项目。克隆后直接启动即可：gitclonegit@github.com:HuberTRoy/vue-shiyanlou.gitcdvue-shiyanlounpminstallnpmrundev如果对你有帮助，希望能得到你的Star~。(〃'▽'〃)如果有什么可以改进的，希望大家花点时间开个Issue或者直接PR~。φ(>ω<*)