Ser框架详明感谢会员--黄大帅 无偿提供

Saber框架详细说明目 录1Saber框架架构说明11.1架构说明12Saber框架使用库说明12.1Vue12.1.1简介12.1.2使用12.2Vue Router22.2.1简介22.2.2使用22.3Vuex22.3.1简介22.3.2使用32.4ElementUI与Avue32.4.1简介32.4.2使用33目录结构33.1Public文件43.1.1Cdn文件43.1.2Img文件43.1.3Svg文件43.1.4Util文件43.2Src文件43.2.1Api文件43.2.2Components文件43.2.3Config、Const、Lang、Mixins文件43.2.4Page、Views、Styles文件43.2.5Router文件53.2.6Store、Util文件53.3配置文件51 Saber框架架构说明1.1 架构说明Saber框架，基于现有的Avue+ElementUI进行二次封装。整个框架最为基础的部分就是Vue.js。使用Vue-cli搭建项目脚手架，主要则分为打包入口文件，src目录和一些配置文件，开发时，主要则用到public文件与src目录文件。Public文件内存放着框架一些公共资源，例如logo图与背景图等等，而src目录文件则主要存放我们的开发代码。Src文件内，主要的开发文件就是page、views、router和store文件。其中，page与views存放着我们开发的页面组件代码，各级组件都存放在这两个文件夹中。Router文件夹内则有着框架各级路由的配置，以及全局路由的方法和数据请求拦截配置。Store文件内存储着框架所有的组件状态与相关数据，同时还存在着每个组件module状态与数据的操作函数，组件之间的通信都是通过这个store进行的。框架的另一大组成部分，则是ElementUI。ElementUI是基于vue的视图组件库，与Vue.js有着良好的兼容效果。并且element组件库在框架内易于使用。框架已在根主页引入了ElementUI组件库，我们开发时只需要参考ElementUi官方文档，然后将自己需要的组件通过标签形式直接使用便可。Avue，则是对ElementUI的二次封装使用。与ElementUI对比，Avue的组件更具有针对性。在数据展示与表格表单方面的组件，Avue比ElementUI更加丰富具体，并且每个组件的动画效果也更加显著。而同样的，框架已在根页面引入了Avue资源，与ElementUI一样，我们只需要参考文档，选择自己需要的组件即可。2 Saber框架使用库说明2.1 Vue2.1.1 简介Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。2.1.2 使用Vue框架，每个组件都是一个Vue实例，每个组件包括了三部分。第一部分就是组件的视图，在Vue内以Template标签包裹，HTML相关代码写在这部分里。第二部分则是组件的js部分，这部分以script标签包裹，用来操作组件的数据与js事件等。第三部分则是可选部分，以style标签包裹，是组件的css部分，可以通过scoped属性控制css仅对对应的组件起作用，或者在此部分引入外部的css文件。2.2 Vue Router2.2.1 简介Vue Router是Vue官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：1、嵌套的路由/视图表2、模块化的，基于组件的路由配置3、路由参数，查询，通配符4、基于Vue的过度系统的视图过度效果5、细粒度的导航控制6、带有自动激活的CSS class链接7、HTML5的历史模式或hash模式8、自定义的滚动条行为2.2.2 使用在Saber框架内，在router文件夹内配置路由信息，声明路由的路径以及跳转的组件名，框架内部会将这个名字作为功能页面标签显示。再通过component引入预期的组件路径，便可以通过跳转这个设置的路由渲染此路由绑定的组件了。2.3 Vuex2.3.1 简介Vuex是一个专为 Vue.js应用程序开发的状态管理模式它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex也集成到Vue的官方调试工具，提供了诸如零配置的time-travel调试、状态快照导入导出等高级调试功能。Vuex可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。一个简单的store模式足够支撑我们完成简单应用了。但是当我们要构建一个中大型的应用，Vuex能够更好地在组件外部管理状态。2.3.2 使用Vuex通过store管理框架内的数据。我们在可以在store中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。每个store都可以定义mutation与action两个存放函数回调的对象。每个 mutation都有一个字符串的事件类型(type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，而我们可以在框架爱内通过$mit调用这些方法。Action与mutation类似，并且可以包含任意的异步操作。当我们构建稍微复杂的应用时，需要用到大量的store来存储组件状态，这时我们可以通过将store根据功能分割成数个模块，每个模块有自己独立的state、mutation和action等，以此来解决store过于臃肿的问题。2.4 ElementUI与Avue2.4.1 简介ElementUI是饿了么团队打造的一款基于Vue2.0的Web端组件库，包含了众多前端常用的UI组件可以使用npm方式或者cdn下载资源包至项目，就可以直接使用这些组件了。而Avue.js是对ElementUI的二次封装，更加针对数据展示与表单表格方面的组件升级，用法与ElementUI类似。2.4.2 使用浏览两者的官方文档，每个组件都有自己的vue源码，而在Saber框架的根页面上已经引入了ElementUI与Avue的资源包，以供我们全局使用。所以，开发时只需要直接使用相应组件的源码便可。3 目录结构框架目录主要由public文件，src文件以及一些配置文件组成。3.1 Public文件3.1.1 Cdn文件存放框架内所使用的库的资源包。3.1.2 Img文件存放框架内所使用的图片资源。3.1.3 Svg文件存放使用svg画出的资源。3.1.4 Util文件存放了判断展示页面屏幕的大小的函数以及浏览器版本过低时显示的页面。3.2 Src文件Src文件存放了框架的主要源码3.2.1 Api文件Api文件下存放了与各个组件相对应的请求地址，例如logs.js中对应着下面logs组件里的每个请求数据函数的请求地址。3.2.2 Components文件Components文件下存放了框架的基础容器组件basic-container和一些错误页面的组件。我们在二次开发时，将各个组件的公共可复用部分提取出来存放在这。3.2.3 Config、Const、Lang、Mixins文件这些文件都存储着框架内的一些公共静态信息。Config文件，存储了测试环境开发环境生产环境的baseUrl，以及公共图标的信息和一些页面信息。Const文件，配置了一些个人信息页面的基础信息。Lang文件夹内，存放了中文和英文两种配置语言。Mixins文件内配置了各种不同的颜色信息。3.2.4 Page、Views、Styles文件Page文件夹中，存放了框架的基础页面结构，存放了登录页面，锁屏页面，日志页面和主页的结构。主页中，存放着左侧菜单栏和上侧导航栏组件，菜单栏内的每个功能页面，则存放在下面的Views文件中。每个菜单内的功能模块则对应着Views里的分级目录，模块内的功能对应着每个目录下的组件。Styles文件则存放着这些组件的css样式。3.2.5 Router文件Router文件夹内，page与views这两个子文件夹分别对应着上述两个同名文件每个组件的路由。并且，框架内部定义了一个全局avueRouter，通过这个定义的全局对象的方法，可以方便灵活的对路由进行处理。除了关于路由配置的方法，此文件夹内还配置了请求数据的axios方法内的拦截器，使得在框架内每个请求发送都带着token值以保证用户权限，并且将状态码为非200的统一处理为请求失败。在src内还定义了一个permission.js，这个js文件内，配置了路由跳转前后的处理，保证了拥有权限时才能进行页面路由的跳转。3.2.6 Store、Util文件Util文件中，编写了框架内使用的JS方法，比如设置cookie的方法以及一些判断字符串，分离数组等方法。Store文件夹中，则存放着框架所有的状态以及数据，框架内的数据传递都是通过Store来进行的。Store文件下的modules存放着与组件相对应