注释说明-vue项目

【1】、单行属性，注释写在行尾

good:

bad:

【2】、多行属性，注释写在行上

good:

bad:

Array>Object结构的，只注释第一个对象内部属性接可。

good:

bad:

Object>简单类型的，每一个属性都进行说明，书写位置，规则如上。

good:

bad:

统一采用行上注释

方法分为两种类型：

1、无参型

2、有参型

[1]、无参型，需进行功能说明。格式采用 "//"

good:

bad:

[2]、有参型，需进行功能、参数、返回值说明。如果是单参的，可以采用双斜线在功能后追加说明。

good:

bad:

如果是多个参数的，采用多行注释

good:

bad:

统一行上注释，格式 //

good:

bad:

other

1.v-model 多用于表单元素实现双向数据绑定

2.v-for  循环数组

3.v-show 显示内容

4.v-hide 隐藏内容

5.v-if 显示与隐藏 （dom 元素的删除添加 同 angular 中的 ng-if 默认值为 false）v-else-if

必须和 v-if 连用 v-else 必须和 v-if 连用 不能单独使用 否则报错 模板编译错误

6.v-bind 属性绑定

7.v-on:click 给标签绑定函数，可以缩写为@ 

8.v-text 解析文本

9.v-html 解析 html 标签

10.v-bind:class 三种绑定方法 1、对象型 '{red:isred}' 2、三元型 'isred?"red":"blue"' 3、

数组型 '[{red:"isred"},{blue:"isblue"}]'

11.v-once 进入页面时 只渲染一次 不在进行渲染

12.v-cloak 防止闪烁

13.v-pre 把标签内部的元素原位输出

1、目录

vue-element-component

├─src

| ├─views 界面架构文件（layout）

| ├─stories组件生成文档文件

| ├─router

| | ├─index.js路由文件

| | └routerName.js路由菜单配置中文文件

| ├─components

| | ├─common组件文件

| | ├─autoRouterdev运行路由文件

├─.storybook storybook 配置文件

2、运行项目界面 npm run dev

2.1、组件写在common文件中

需要注意的是：

a、 .vue文件名不要用index.vue,因为在写单元测试的时候，覆盖率测试会检测不到，建议和文件目录名一样。

b、在每个组件下面写index.js文件，npm打包需要用到

2.2、 组件的展示界面写在autoRouter文件中

2.2.1、路由是根据autoRouter文件自动生成的，目前支持一级路由和二级路由。一级路由直接在autoRouter下建立.vue，二级路由需要在autoRouter下建文件目录。

生成路由的格式如下

路由路径根据autoRouter文件目录来解析

2.2.2、左侧菜单是根据路由来生成的。左侧菜单显示的名称就是解析autoRouter文件目录得来的。

如果是一级路由，显示的就是组件的名称。

如果是二级路由，父菜单名称对应的是组件在autoRouter目录下的文件夹名称。子菜单是组件的名称。

2.2.3、 配置左侧菜单名称和icon

左侧菜单显示想自定义名称，可以在router/routerName.js文件中配置，

自定义图标

默认是一级路由显示icon(component),二级路由不显示icon。

icon可以是svg图片 ，项目已经支持了svg图片格式，具体配置在vue.config.js里面。icon也可以是element-ui 的icon

2.3、views 文件

该文件下的内容是构建运行界面的Layout。包含了左侧菜单，顶部头导航，主内容展示。如果只需要写组件测试，生成文档，这个文件可以不需要改动。

3、运行项目文档 npm run storybook

3.1、文档支持scss配置

在.storybook/main.js文件下配置

3.2、配置storybook 左侧菜单以文件夹的形式展示

在.storybook/manager.js 下配置

3.3、组件生成文档

需要在stories文件下写对应的组件.stories.js 文件

3.3.1、属性介绍，可以快速上手，可查看 storybook官网

常用属性：

title：对应左侧菜单

component：组件本身

argTypes：对应props 和 events 属性名称 （需要保持一致）

如果需要配置formList里面的属性，需要在table中配置category：formList。

这时候doc界面展示就会分组

args：设置参数数据(有些组件需要必传一些props,需要用到args)

Template.bind({}):复制功能技术

4、运行打包npm

npm run lib

在本地会生成lib文件 引入打包文件测试，没问题才能上传npm

不是npm包引入

---