saber框架详细说明.docxVIP

Saber框架详细说明

目录TOC\o1-3\h\z\u

1 Saber框架架构说明 1

1.1 架构说明 1

2 Saber框架使用库说明 1

2.1 Vue 1

2.1.1 简介 1

2.1.2 使用 1

2.2 VueRouter 2

2.2.1 简介 2

2.2.2 使用 2

2.3 Vuex 2

2.3.1 简介 2

2.3.2 使用 3

2.4 ElementUI与Avue 3

2.4.1 简介 3

2.4.2 使用 3

3 目录结构 3

3.1 Public文件 4

3.1.1 Cdn文件 4

3.1.2 Img文件 4

3.1.3 Svg文件 4

3.1.4 Util文件 4

3.2 Src文件 4

3.2.1 Api文件 4

3.2.2 Components文件 4

3.2.3 Config、Const、Lang、Mixins文件 4

3.2.4 Page、Views、Styles文件 4

3.2.5 Router文件 5

3.2.6 Store、Util文件 5

3.3 配置文件 5

Saber框架架构说明

架构说明

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一样，我们只需要参考文档，选择自己需要的组件即可。

Saber框架使用库说明

Vue

简介

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

使用

Vue框架，每个组件都是一个Vue实例，每个组件包括了三部分。第一部分就是组件的视图，在Vue内以Template标签包裹，HTML相关代码写在这部分里。第二部分则是组件的js部分，这部分以script标签包裹，用来操作组件的数据与js事件等。第三部分则是可选部分，以style标签包裹，是组件的css部分，可以通过scoped属性控制css仅对对应的组件起作用，或者在此部分引入外部的css文件。

VueRouter

简介

VueRouter是Vue官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

1、嵌套的路由/视图表

2、模块化的，基于组件的路由配置

3、路由参数，查询，通配符

4、基于Vue的过度系统的视图过度效果

5、细粒度的导航控制

6、带有自动激活的CSSclass链接

7、HTML5的历史模式或hash模式

8、自定义的滚动条行为

使用

在Saber框架内，在router文件夹内配置路由信息，声明路由的路径以及跳转的组件名，框架内部会将这个名字作为功能页面标签显示。再通过component引入预期的组件路径，便可以通过跳转这个设置的路由渲染此路由绑定的组件了。

Vuex

简介

Vuex是一个专为Vue.js应用程序开发的状态管理模式它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex也集成到V