前言：为了规范化项目管理，方便团队扩充后的新同事对项目的熟悉及自主入手开发，现决定将项目文档逐步规范化。
 
所有新增接口，按照规范格式撰写接口文档；
所有修改的接口，如果之前有对应的接口文档，则修改相应文档，若没有，则新建接口文档；
文档目录位置的选择，以类似“商户后台→对账中心（大板块）→所有账单（子板块）”的方式建立或选择；
同一个页面，一类功能的不同接口，可以放在同一个文档中；
文档应清晰包含每个接口的请求参数说明、正确返回示例、错误返回示例、返回参数说明。参数不同值有不同特殊意义的，应在说明中列举，或使用单独的表格列举；
不论前端工程师或后端工程师均可指定接口，只要商定好后即可撰写，双方各自按约定接口进行开发；
开发测试过程中，对接口有修改的，应及时修改对应文档；
任务下面需要进行接口对接的，直接贴文档地址进行交流。
 
Tips：接口调用可使用Postman，需要模拟浏览器环境（共享Cookie等），请打开Interceptor，如图所示
 

 
Pont - 搭建前后端之桥
 
  
 
pont 在法语中是“桥”的意思，寓意着前后端之间的桥梁。
 
介绍
 
Pont 把 swagger、rap、dip 等多种接口文档平台，转换成 Pont 元数据。Pont 利用接口元数据，可以高度定制化生成前端接口层代码，接口 mock 平台和接口测试平台。
 
其中 swagger 数据源，Pont 已经完美支持。并在一些大型项目中使用了近两年，各种高度定制化需求都可以满足。
 
 
沉浸式接口开发
 
接口检索：
 
 
接口开发： 
 
联调维护
 
实时发现后端接口更新： 
 
更新接口层后，可迅速定位接口调用代码，进行调用修改。 
 
快速开始
 
 
1、在 vscode 中安装 vscode 插件 pont。插件使用方法请参考：vscode-pont
 
 
2、确保服务端使用 Swagger（目前只支持 Swagger），提供的数据源接口是免登录的。如果不是，请后端帮忙简单配置一下即可。
 
 
3、在项目中任何位置添加 pont-config.json 文件，vscode-pont 检测到项目中有合法的 pont-config.json，插件马上启动。
 
pont-config.json 配置项
 
对于 pont-config.json 的配置，在 vscode-pont 插件中已经做了自动提示、自动补全、配置项描述提醒等功能。具体配置项介绍如下：
 
originUrl
 
值类型：字符串
 
描述： 接口平台提供数据源的 open api url（需要免登），目前只支持 Swagger。如 "https://petstore.swagger.io/v2/swagger.json"
 
outDir
 
值类型：字符串
 
描述： 生成代码的存放路径，使用相对路径即可。如："./src/api"
 
templatePath
 
值类型：字符串
 
描述：指定自定义代码生成器的路径（使用相对路径指定）。一旦指定，pont 将即刻生成一份默认的自定义代码生成器。自定义代码生成器是一份 ts 文件，通过覆盖默认的代码生成器，来自定义生成代码。默认的代码生成器包含两个类，一个负责管理目录结构，一个负责管理目录结构每个文件如何生成代码。自定义代码生成器通过继承这两个类（类型完美，可以查看提示和含义），覆盖对应的代码来达到自定义的目的。具体使用方法请参看自定义代码生成器文档。
 
示例：可以参看示例 demo 中的 template。
 
prettierConfig
 
值类型：object
 
描述：生成的代码会用 prettier 来美化。此处配置 prettier 的配置项即可，具体可以参考 prettier 文档。
 
usingMultipleOrigins
 
值类型：boolean
 
描述：pont 支持一个项目中配置多个 Swagger 来源。此处配置是否启用多数据源
 
origins
 
值类型：array
 
描述：配置每个数据来源
 
示例：
 
"origins": [{
  "name": "pet",
  "originUrl": "",
}, {
  "name": "fruit",
  "originUrl": ""
}]
 
transformPath
 
值类型：string
 
描述：可选项。指定数据源预处理路径（使用相对路径指定）。一旦指定，Pont 将生成一份默认的数据预处理器。
 
数据预处理器示例：
 
import { StandardDataSource } from 'pont-engine';

export default function(dataSource: StandardDataSource): StandardDataSource {
  dataSource.mods = dataSource.mods.filter(mod => mod.name !== 'user');

  return dataSource;
}
 
mocks
 
自动化 mocks 功能开始内测，https://github.com/alibaba/pont/issues/48
 
demo
 
参考下面的例子，来体验 pont。
 
pont-demo
nuxt-ts-pont-demo
持续丰富中...
 
命令行使用方法
 
目前 pont 以 vscode 扩展 —— vscode-pont 来提供 pont 的元数据能力。其它 IDE 的插件也将逐渐提供，这里非常渴望社区的力量。
 
为了避免一部分用户和技术团队不使用 vscode-pont，pont 可以以命令行命令的方式来提供服务。
 
命令行提供的命令目前还比较基础，提供命令如下：
 
pont check
 
校验本地的 pont-lock.json 文件是否缺失、损坏。建议用户在项目中，在 pre-commit 里加上 pont check 命令，以防止在团队协作过程中，pont-lock.json 被误删、解决该文件冲突时被损坏等情况。
 
pont ls
 
查看所有数据源
 
pont select [dsName]
 
切换当前数据源
 
pont diff
 
查看远程数据和本地数据在模块、基类上的差异，以作针对性、选择性同步。
 
pont updateBo [boName]
 
选择性更新本地的基类
 
pont updateMod [modName]
 
选择性更新本地的模块
 
最佳实践建议
 
 
项目 pre-commit hook 中，加上 pont check，防止本地数据源被研发人员损坏。
 
 
很多 Swagger 所有的接口返回的类型都类似是 Result，主要是囊括了约定的接口错误字段，类似 { errorCode: 0, data: T, errMessage: '' }。这里建议，让后端 Swagger 的接口返回类型，去掉这个 Result 外壳。只返回 data 的 T 类型。
 
 
vscode 配置 trigger suggest 的快捷键(cmd K + cmd S)，传参时，用快捷键触发提醒，非常好用；
 
 
pont template 配置 API、defs 为全局变量；这样不需要 import 任何接口、实体类；使用 API 直接触发建议找到 模块、接口，非常方便
 
 
快捷键 cmd + ctrl + p 进行接口查找，非常方便；
 
 
善于利用实体类（defs），可以当成类型用、也可以作为逻辑实现的辅助；实体类是后端写得实体类，前端自己写实体类，既没有必要，长期来看也会和后端的实现差异越来越大。如果有自定义逻辑，继承 defs 实体类即可。
 
 
redux 项目，建议结合 https://github.com/nefe/iron-redux，一个致力类型完美和去冗余的轻量化 redux 库。例如类型友好的，运行安全的 get 方法：https://github.com/nefe/iron-redux#safeget
 
 
待补充
 
常见答疑问题
 
 
1、demo中，生成代码的 pontFetch 函数，是要自己实现的吗？
 
答：pontFetch 是用户自己项目的请求公共方法。因为每个项目的接口有自己的业务逻辑，比如如何判断接口返回的结果是否正确，所以 pont 的默认模板并没有自己实现一套 fetch 方法。另外 Pont 生成的代码是可以用自定义模板配置的。可以在模板上更改 pontFetch 的引用路径和名字。
 
其它接口平台接入
 
目前 pont 暂时只支持 Swagger V2 数据源，V1 和 V3 正在开发中。目前只需要在 scripts 中添加对应的数据格式转换文件，把对应数据格式转换为 pont 标准格式，即可适配新的数据源类型。希望社区可以踊跃贡献代码，接入更多类型的数据源！

随着互联网的发展，前后端分离已成为互联网项目开发的业界标准使用方式。
 
由此而产生的前端开发工程师和后端开发工程师的沟通效率问题。
 
推荐一个应此而生的文档管理工具---showdoc
 
showdoc官网
 
一、介绍
 
1.ShowDoc是什么
 
 
每当接手一个他人开发好的模块或者项目，看着那些没有写注释的代码，我们都无比抓狂。文档呢？！文档呢？！Show me the doc ！！
 
 
程序员都很希望别人能写技术文档，而自己却很不希望要写文档。因为写文档需要花大量的时间去处理格式排版，想着新建的word文档放在哪个目录等各种非技术细节。
 
 
word文档零零散散地放在团队不同人那里，需要文档的人基本靠吼，吼一声然后上qq或者邮箱接收对方丢过来的文档。这种沟通方式当然可以，只是效率不高。
 
 
ShowDoc就是一个非常适合IT团队的在线文档分享工具，它可以加快团队之间沟通的效率。
 
2.功能
 
 
权限管理
 
  
公开项目与私密项目 
    
ShowDoc上的项目有公开项目和私密项目两种。公开项目可供任何登录与非登录的用户访问，而私密项目则需要输入密码验证访问。密码由项目创建者设置。
项目转让 
    
项目创建者可以自由地把项目转让给网站的其他用户。
项目成员 
    
你可以很方便地为ShowDoc的项目添加、删除项目成员。项目成员可以对项目进行编辑，但不可转让或删除项目（只有项目创建者才有权限）
团队管理 
    
利用showdoc的团队功能你可以更好地进行团队协作
 
编辑功能
 
  
 
markdown编辑
 
    
ShowDoc采用markdown编辑器，无论是编辑还是阅读体验都极佳很棒。如果你不了解Markdown，请在搜索引擎搜索”认识与入门 Markdown”
 
模板插入
 
    
在ShowDoc的编辑页面，点击编辑器上方的按钮可方便地插入API接口模板和数据字典模板。插入模板后，剩下的就是改动数据了，省去了很多编辑的力气。
历史版本 
    
ShowDoc为页面提供历史版本功能，你可以方便地把页面恢复到之前的版本。
 
多平台
 
showdoc支持网页版、手机app版和电脑客户端版。客户端地址可见：https://www.showdoc.cc/clients
 
 
 
二、示例
 
1.全局错误码
 
 
2.接口文档
 
 
 
 
3.api模板
 
 
4.接口调试
 
 
 

前言： 前端开发文档，目前自己正在开发的项目之前的个人准备，按照自己的开发习惯来编写，有问题或者不足的地方还望指出，谢谢~ 如有侵权，实属无意，请立即联系，立删。
 
环境搭建
 需要准备的软件
 a. Node.js + npm （可以去node官网下载最新的版本）
 https://nodejs.org/zh-cn/
 
 如上图：点击即可下载，下载成功后安装就可以了
 
安装成功后。启用cmd，使用node -v ,出现对应的版本信息，说明安装成功，而且node会自动将路径添加到环境变量中去，且安装node的同时，也会自动安装成功npm，可同样通过npm -v，显示版本号就代表成功。
 
 
也可以通过镜像cnpm 来安装后续项目需要的依赖，这个安装速度会比npm 快速很多
 步骤：
 打开cmd 输入命令行:
 npm install -g cnpm --registry=https://registry.npm.taobao.org
 即可
 
 
b． 编码软件 比如：（ vs code ， sublime ， notepad++ ， webstorm 等等 ）
 根据个人习惯选择使用， 我比较习惯使用sublime ,里面有自己安装的很多小插件，比较方便。
 
c. photoshop
 切图软件，方便使用UI给的psd 自己动手切需要的图片，来写页面。
 
d. git （代码管理工具）
 下载地址：https://git-scm.com/downloads
 
 直接下载即可，下载成功直接安装，一直next，然后安装成功后，安装完成后，在开始菜单里找到“Git”->“Git Bash”，蹦出一个类似命令行窗口的东西，就说明Git安装成功！
 
 
安装完成后，还需要最后一步设置，在命令行输入：
 
$ git config --global user.name "Your Name"
$ git config --global user.email "email@example.com"
 

 最后下载一些需要的浏览器，谷歌，火狐，360 等等就可以了。方便调试wap可以使用谷歌，方便调试pc可以使用火狐。
 
代码规范
 基本准则
 符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度
 总规范
 
忽略（Omit）协议：如 background: url(http://www.google.com/images/example); 应该写background: url(//www.google.com/images/example);以方便http与https协议切换，除非必须使用某个协议
书写时利用IDE实现层次分明的缩进。tab键用四个空格代替。
标签属性使用小写
尾部不要留有空格，以防diff
使用 UTF-8 (no BOM)，文档中也加入 <meta charset=”utf-8″>
文件命名统一使用小写”.js”，同时推荐”-”而不是”_”
TODO(contact) 以及TODO: action item，不要使用@@
 HTML 细化规范
使用html5的规范
标签默认缺省格式：<img src="xxx.png" alt="缺省时文字" /> 避免出现src="" 问题
标签缺省格式：xxx</> 注：target="_blank" 根据需求决定
标签预留链接占位符使用###，参见：a标签占位符问题
书写链接地址时, 必须避免重定向，例如：href=”http://taobao.com/”, 即须在URL地址后面加上“/”
所有标签需要符合XHTML标准闭合
一律统一标签结尾斜杠的书写形式：<br /> <hr /> 注意之间空格
避免使用已过时标签，如：<b> <u> <i> 而用 <strong> <em>等代替
使用data-xxx来添加自定义数据，如：<input data-xxx="yyy"/>
避免使用style="xxx:xxx;"的内联样式表
必须为含有描述性表单元素(input, textarea)添加label, 如
 
CSS 细化规范
 20. 每个样式属性后加 “;”
 方便压缩工具"断句"。
 21. Class命名，采用” - “[减号连接符] 对class中的字母分隔：
 用"-"隔开比使用驼峰是更加清晰。
 产品线-产品-模块-子模块，命名的时候也可以使用这种方式
 ID: 小驼峰式命名法 如：
 
firstName  newList
 
 
空格的使用，以下规则执行：
 .hotel-content {
 font-weight: bold;
 }
 选择器与 { 之前要有空格
 属性名的 : 后要有空格
 属性名的 : 前（禁止）加空格
 
 
属性的书写顺序, 举个例子:
 
/* 定位 /
 display: block;
 position: absolute;
 left: 0;
 top: 0;
 / 盒模型 */
 width: 50px;
 height: 50px;
 margin: 10px;
 border: 1px solid black;
 / 其他 /
 color: #efefef;
 
 
定位相关, 常见的有：display position left top float 等
 盒模型相关, 常见的有：width height margin padding border 等
 其他属性
 按照这样的顺序书写可见提升浏览器渲染dom的性能
 简单举个例子，网页中的图片，如果没有设置width和height，在图片载入之前，他所占的空间为0，但是当他加载完毕之后，那块为0的空间突然被撑开了，这样会导致，他下面的元素重新排列和渲染，造成重绘（repaint）和回流（reflow）。 我们在写css的时候，把元素的定位放在前头，首先让浏览器知道该元素是在文本流内还是外，具体在页面的哪个部位，接着让浏览器知道他们的宽度和高度，border等这些占用空间的属性，其他的属性都是在这个固定的区域内渲染的，差不多就是这个意思吧~
 
CSS注释用“/* */”表示，单行注释时，被注释对象与前后注释符各保留一个空格，且单独占一行；多行注释时，开始注释符和结束注释符各占一行。例如：
 // 注释CSS
 
table {
        border-collapse: collapse;
     }
 
js细化规范
 1.换行
 每行代码应少于120个字符，多于这个数量时，可以考虑换行，“.”或“+”这类操作符应放在行尾，换行后的代码必须在换行前多一层缩进。
 如果函数或方法中的参数较长，要进行适当的划分。
 禁止在return关键字及要返回的表达式之间换行。例如：
 
function test() {
return 1;
}
 
2.代码行
 禁止把多个短语句写在一行中，即一行只写一条语句。
 if、for、do、while、switch、case、default、break、continue等语句自占一行。
 if、for、do、while等所有的循环体和判断体的执行语句部分都需要用"{}"括起来，禁止省略花括号。例如：
 
if (i < 5) i += 1;
// 正确的
if (i < 5) {
i += 1
}
 
3.对齐
 代码块的分界符{}，“{”跟随在上一行，并且前边有一空格隔开，“}”应独占一行并且位于同一列，同时与引用它们的语句左对齐。
 在函数体的开始、类的定义以及if、for、do、while、switch、case语句中的程序都要采用如上的缩进方式。
 4.空格
 关键字之后必须有空格，以突出关键字。
 函数名、方法名与左括号“(”之间不能保留空格，例如：
 
// 错误的
function getInfo () {
// code
}
// 正确的
function getInfo() {
// code
}
 
在声明函数表达式时，function与左括号“(”之间不能保留空格，例如：
 // 错误的
 
var user = function () {
// code
}
// 正确的
var user = function() {
// code
}
 
逗号后面加空格。
 赋值操作符、比较操作符、算术操作符、逻辑操作符、位域操作符，如“=”、“+=” “>=”、“<=”、“+”、“*”、“%”、“&&”、“||”等二元操作符的前后应当加空格。
 “!”、"~"、"++"、"–"、"&"（地址运算符）等单目操作符前后不加空格。
 “.”、"[]"前后不加空格。
 
5.空行
 在每个类声明之后、每个函数定义结束之后都要加空行。
 在一个函数体内，逻揖上密切相关的语句之间不加空行，其它地方应加空行分隔。
 6.使用严格的条件判断符。用=代替，用!==代替!=
 7.避免额外的逗号。如：var arr = [1,2,3,]
 8.语句必须都有分号结尾，除了for，function，if，switch，try，while。
 9.左花括号置于行末，右花括号置于行首。
 10.下面类型的对象不建议用new构造：new Number，new String，new Boolean，new Object(用{}代替)，new Array(用[]代替)。
 11.数组成员间的“,”后面需要保留一个空格。
 12.禁止在js/json中使用javascript保留关键字词命名，在IE中容易造成错误。关键字（break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with），关键词（abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile）。
 13.建议使用“+”作为换行连接符，而不是使用“\”。
 14.提示信息禁止使用概括笼统的语言描述，应该简洁明了，看到信息立即能定位到错误，如提示用户信息报错用“该用户不存在”，而不是用“后台返回数据有误”、“网络超时”。
 
注释规范
 1.html注释
 注释格式： <!– 这儿是注释 –> , “-” 只能在注释的始末位置，不可置入注释文字区域
 2. css注释
 注释格式： /* ---- 这儿是注释 ----/
 3.javascript 注释
 单行注释使用 C++风格： //这儿是单行注释
 多行注释使用C风格: / 这儿有多行注释 */
 
框架选择 （vue.js + element UI）
 a. vue.js 介绍
 vue.js是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
 Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据所有 Vue.js的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。
 在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
 项目目录介绍
 
 

 build 项目构建(webpack)相关代码
 config 配置目录，包括端口号等。我们初学可以使用默认的。
 node_modules npm 加载的项目依赖模块
 Src 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
 assets: 放置一些图片，如logo等。
 components: 目录里面放了一个组件文件，可以不用。
 App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
 main.js: 项目的核心文件。
 
static 静态资源目录，如图片、字体等。
 .xxxx文件 这些是一些配置文件，包括语法配置，git配置等。
 index.html 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
 package.json 项目配置文件。
 README.md 项目的说明文档，markdown 格式
 使用方式
 举见的简单数据绑定：
 
 <span>Message: {{ msg }}</span>
 
由于vue是单页面应用，所有的html, css, js 都放置在同一个页面。 如下
 data 用于定义属性，
 methods 用于定义的函数，可以通过 return 来返回函数值。
 {{ }} 用于输出对象属性和函数返回值。
 
 查看运行的页面效果。在项目的文件夹按住shift后鼠标右击出现弹窗， 点击 “在此处打开命令窗口”，就直接出现命令窗口，然后输入运行命令， npm run dev 稍等几秒钟即可出现如下，则代表运行成功
 
 然后打开浏览器，输入http://localhost:8080/#/ 就能看到页面对应的效果。
 
 
打包方式
 同样是在项目的文件夹按住shift后鼠标右击出现弹窗， 点击 “在此处打开命令窗口”，就直接出现命令窗口，然后输入运行命令，npm run build，就会将项目中所有文件压缩到指定的文件目录下，一般是在dist目录下。
 

 然后将压缩的文件夹上传到服务器中即可。
 
Element UI
 
a. 使用方法
 
element-ui是一个ui库，它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的ui框架。
 Layout布局（el-row、el-col）
 element-ui借用了bootstrap框架的思想，使用了栅格布局。它把单一的分栏分为24列。基本的使用方式如下
 
<el-row>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
 
span属性：表示col所要占领的栅格占比个数。
 offset属性：表示col相对偏移的个数。
 Container布局容器
 这些布局容器，一般充当div来使用。
 el-container：外层容器。当子元素中包含 el-header 或 el-footer 时，全部子元素会垂直上下排列，否则会水平左右排列。
 el-header：顶栏容器
 el-footer：底部栏容器
 el-aside：侧边栏容器
 el-main：页面主视图
 
icons的使用
 在element-ui 中，图标是用class就可以搞定的。
 比如一个编辑的图标就可以如下表示：
 
 
按钮（el-button）
 按钮是el-button来表示的
 按钮是分类的，每一种类型就对应不同的button。
 按钮的类型type可取值：’primary’、’success’、’warning’、’info’、’danger’
 plain：决定了按钮是否使用素色系列。
 round：决定了按钮是不是圆角展示。
 
<div class="flex-box">
      <h2>各种button</h2>
      <el-row class="flex1 margin-left10">
        <el-col :span="3"><el-button>默认按钮</el-button></el-col>
        <el-col :span="3"><el-button type="primary">主要按钮</el-button></el-col>
        <el-col :span="3"><el-button type="success">成功按钮</el-button></el-col>
        <el-col :span="3"><el-button type="warning">警告按钮</el-button></el-col>
        <el-col :span="3"><el-button plain>默认按钮</el-button></el-col>
        <el-col :span="3"><el-button round>默认按钮</el-button></el-col>
      </el-row>
    </div>
 
级联选择（el-cascader）
 //组件
 
<el-cascader
 :options="options"
  v-model="selectedOptions"
  @change="handleChange">
</el-cascader>
 
//data数据
 
options: [{
  value:'1',
  label:'components',
  children: [{
    label:'input'
  },{
    label:'swiper'
  }]
},{
  value:'1',
  label:'views'
},{
  value:'1',
  label:'actions'
}]
 
TimePicker 时间选择器
 picker-options是一个对象。
 这个对象的属性有start、step、end、selectableRange等。
 当设置selectableRange属性时，它提供了一个时间选择的点。
 
<el-time-select
  v-model="value1"
  :picker-options="{
      start:'08:30',
      step:'00:15',
      end:'18:30'
  }"
  placeholder="选择时间"
></el-time-select>
 
日期选择器
 日期选择器的type属性，决定选择的类型，这个type可以是date、week、month、year。
 
<el-date-picker
  v-model="valueDate"
  type="date"
  placeholder="选择日期">
</el-date-picker>

<el-date-picker
    type='week'
    v-model='value'
    placeholder='选择周'
>
 
Table 表格
 el-table：element-ui的表格。
 el-table-column：element-ui的表格所对应的列。
 table属性中：stripe属性可以创建带斑马纹的表格。
 table属性中：border属性可以创建带斑马纹的表格。
 table属性中：height属性可实现固定表头的表格。
 
   <el-table
   :data="tableData"
   style="width: 100%"
   height="200">
   
   <el-table-column fixed width="120" label="日期" prop="date"></el-table-column>
   <el-table-column width="120" label="姓名" prop="name"></el-table-column>
   <el-table-column width="360" label="地址" prop="address"></el-table-column>
 
Carousel 走马灯
 其实就相当于一个轮播
 type属性：可以让轮播卡片化
 interval属性：定义轮播切换的周期
 
<el-carousel height="150px">
 <el-carousel-item v-for="item in 4" :key="item">
    <h3>{{ item }}</h3>
  </el-carousel-item>
 
Collapse 折叠面板
 折叠面板的el-collapse-item需要title属性。
 
<el-collapse-item title="一致性 Consistency" name="1">
<div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
 <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
</el-collapse-item>
 
el-menu
 el-menu：表示导航菜单的盒子。
 el-submenu：表示导航菜单的子盒子选项。
 el-menu-item：表示导航菜单的每一项。
 其中submenu和munuitem都是用于属性index。
 
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <el-menu-item index="1">处理中心</el-menu-item>
  <el-submenu index="2">
   <template slot="title">我的工作台</template>
    <el-menu-item index="2-1">选项1</el-menu-item>
    <el-menu-item index="2-2">选项2</el-menu-item>
    <el-menu-item index="2-3">选项3</el-menu-item>
  </el-submenu>
  <el-menu-item index="3">订单管理</el-menu-item>
</el-menu>
el-tabs
<el-tabs v-model="activeName">
    <el-tab-pane label="用户管理" name="first">
        用户管理
    </el-tab-pane>
</el-tabs>
 
Tree 树形控件
 data属性：代表着树形组件的渲染。
 
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
 
使用示范
 

 要求： 完成上图的效果，能在页面正确显示
 
a. 先在项目中的view文件夹中，新建一个vue文件，如下，
 
页面初始化结构如下：
 
 
 在template 中添加html代码，在script添加当前页面需要的js代码，例如，判断，计算，接口请求等，style中添加当前页面需要的css,或者也可以新建css文件，进行全局引用也可以，目前项目推荐引用新建css文件夹的方式。如下：
 然后在index.css中写入需要的样式，在common.css中import进入样式表就可以了。
 
 
 最后图片是也是放在assets 文件下面，其中有一个images 的文件夹，因为后期，项目模块很多，所以建议根据模块来分图片文件夹，在其中放入对应的图片即可，如下：
 
最后需要配置页面路径，这样方便在页面直接访问，或者根据链接进行页面间的跳转。
 
 配置成功后，地址端口号后面直接加配置的path就可以进入对应的页面。如：
 http://localhost:8080/#/
 注：路径path配置为 ‘/ ‘, 即代表首页。
 
简单的初始化操作完成，现在是在index.vue 中写入对应的html结构就可以了。
 
因为是导航栏，有logo 图片，右边是链接导航，所以需要div嵌套，布局如下：
 
 
Css写法如下：
 
 使用npm run dev 运行命令，运行项目后，
 
出现这样代表编译完成，且成功，没有问题。
 
此时页面就可以出现设计稿中的效果了。
 
 
以上就是简略的前端开发文档。有不足的可以随时补充。