# 组件开发规范以及部分说明文档

---

#### 1.环境检查 node.js 8.9 及以上版本

#### 2.检查 vue-cli 版本,如版本低于 3.0 请卸载老版本并安装新版本

```
vue --version  
```

#### 3.如需卸载及安装

```
npm uninstall vue-cli -g
npm install -g @vue/cli
```

#### 4.项目初始化

```
npm install
```

#### 5.项目开发运行

```
npm run serve
```

#### 6.项目打包

```
npm run build
```

#### 7.项目代码校验

```
npm run lint
```

---

### 代码规范

1.默认使用 vue 官方推荐的最佳实践配置文档,具体配置位置在项目目录下 eslintrc.js 该配置主要用作详细的 vue 的语法呈现约束,包括部分 ES5-ES7 的代码编写约束.请查阅[官方风格推荐及约束](https://cn.vuejs.org/v2/style-guide/index.html).
2.语法检查:eslintrc.js 中的配置能约束常见的编写语法错误,及引用错误,因此推荐直接在编辑器中用 eslint 的自动修复功能(如用 vscode 则需要安装 eslint 插件,vetur 插件)

3.规则补充:由于规则的校验部分由两个重要插件完成 eslint-plugin-prettier eslint-plugin-vue 因此部分验证规则由 prettier 补充完成

---

### 代码风格

 关于代码风格这一块,由 prettier 约束,配置文件为项目根目录.prettierrc,这个可以自定义自己习惯的编码风格(使用空格或是tab,几个空格,是否双引号,是否尾部';',换行约束等),但建议保持一致.[配置参考文档](https://prettier.io/docs/en/options.html)

 补充:
 * 变量名称采用驼峰式,如 : helloWorld
 * css类名采用短横杆式,如: .tab-title
 * 函数或属性方法尽量保持最小原则,每个函数只实现单一功能
 * 按工程目录做好代码的细分
 * 如编写新的组件,请把该组件以目录的形式呈现,并配备readme.
 * 一定要写备注(变量命名,函数功能简介,流程说明) !!!
 * [带demo的补充文档说明.](https://github.com/pablohpsilva/vuejs-component-style-guide/blob/master/README-CN.md)


---

### 工程目录约定

1.根目录

| .vscode                      | public         | src          |
| ---------------------------- | -------------- | ------------ |
| 编辑器配置文件(如使用vscode) | 渲染模板及logo | 代码编写区域 |

2.src文件夹

| components     | docs         | router       |
| -------------- | ------------ | ------------ |
| 组件库开发目录 | 组件文档目录 | 组件路由目录 |

---

### 组件开发流程

1. 转换已编写好的组件(例子):<br>
已编写好的组件例如 en-tree的原目录结构为:<br>
![http://yanxuan.nosdn.127.net/70c067ebc51e7512d81127aeaa7a0d26.png](http://yanxuan.nosdn.127.net/70c067ebc51e7512d81127aeaa7a0d26.png)
<br>
自行转换后的目录结构:<br>
![http://yanxuan.nosdn.127.net/1e6841df45118566283e544e69ca518b.png](http://yanxuan.nosdn.127.net/1e6841df45118566283e544e69ca518b.png)
<br>
其中index.js文件可以统一为如下:<br>

```

import component from "./src";
component.install = function(Vue) {
  Vue.component(component.name, component);
};
export default component;

```

components目录下index.js


```

import enTree from "./packages/en-tree";
const components = { enTree };
const install = function(Vue, opts = {}) {
  const componentsList = Object.keys(components);
  componentsList.forEach(componentKey => {
    const component = components[componentKey];
    Vue.component(component.name, component);
  });
  // 如需注册this.$xxxx能直接调用的组件请参考如下:
  // 下面的写法能注册this.$message直接调用的组件
  // Vue.prototype.$message = Message;
};
if (typeof window !== "undefined" && window.Vue) {
  install(window.Vue);
}

export default {
  version: "1.0.0",
  install,
  ...components
};

```

总结转换规则如下:
 - (1).将原有已编写好的组件加入一个src目录下.
 - (2).并在src同级根目录增加如上代码的index.js文件.
 - (3).单独cd到components目录下(该目录为一个npm包),将组件的依赖在该目录下npm install xxx  -d or -s,这样在作为包引入的时候组件依赖的工具库将会被直接捕获.
 - (4).在components目录下的index.js中引入你开发的组件,并在components对象中添加引入的组件,如下:

 ```
 import enTree from "./packages/en-tree";
 const components = { enTree };
 ```

 **特别注意的是在转换过程中安装组件依赖不能是在该项目的根目录运行npm install xxx -d or -s 等相关包依赖安装管理操作,否则该开发项目虽能正常运行,单其他的实际工程项目将缺失相关包依赖.**

1. 编写新的组件流程:
  - (1) 在components/package目录下新建以en-开头的组件文件夹  
  - (2) 将组件的name改为引入时需要显示的名称,例如en-tree组件的name为EnTree,该名称的命名将会直接影响组件的注册名称:<br>
  ![http://yanxuan.nosdn.127.net/2b9113e1337ca871a56b4b3408ae2556.png](http://yanxuan.nosdn.127.net/2b9113e1337ca871a56b4b3408ae2556.png)
  <br>
  - (3) 将组件主体写在目录的src下,并添加index.js<br>
  ![http://yanxuan.nosdn.127.net/16ce6826b5dcdeb0bb1489c6911d71e8.png](http://yanxuan.nosdn.127.net/16ce6826b5dcdeb0bb1489c6911d71e8.png)
  <br>
  - (4).cd到components目录下,npm install -d or -s该组件依赖的外部npm包
  - (5).在components目录下的index.js完成组件的引入


---

### 组件文档编写流程
- 1.文档编写规则:参照原项目<br>
- 2.文档展示:<br>
  - (1). 在docs目录下新建组件对应的目录(具体参照src/docs/en-tree)
  - (2). 在router/index.js中添加路由路径,其中name和path名称要一致,meta.desc是左侧路由显示的文字描述为必填项.<br>
  ![http://yanxuan.nosdn.127.net/939964ee433c9f4066dab4a1cd348911.pngjs中添加路由](http://yanxuan.nosdn.127.net/939964ee433c9f4066dab4a1cd348911.png)
  <br>

---

### 组件的使用
组件在编写时,我们通过规则约束,已经做好了组件分割,因此我们可以按需引入(即只引入单独一个组件),也可以完整的引入整个组件库项目,使用如下:<br>
- 1.按需引入:<br>
  ```
  npm install enfry-components -s
  ```

  ```
  import enTree from "enfry-components/packages/en-tree";
  Vue.use(enTree)
  ```

- 2.完整引入:<br>
  ```
  npm install enfry-components -s
  ```

  ```
  import components from "enfry-components"
  Vue.use(components)
  ```

---

### vue 工程可视化工具的使用
当全局环境安装了 vue-cli3 及以上时,可用 vue ui 直接进入工程管理页面,导入当前项目,能可视化修改和管理项目,包含:

- 项目语法校验
- 部分错误自动修复
- 完整的依赖管理
- 项目编译,并查看相关性能分析(如模拟各种网络下的访问速度加载时间等)


---

### 相关文档查询

1. [vue基础教程](https://cn.vuejs.org/v2/guide/)
2. [vuex基础教程](https://vuex.vuejs.org/zh/)
3. [vue-router基础教程](https://router.vuejs.org/zh/)
4. [vue api查询](https://cn.vuejs.org/v2/api/)
5. [vue约定规范文档](https://cn.vuejs.org/v2/style-guide/index.html)
6. [ES6标准入门](http://es6.ruanyifeng.com/)
7. [git教程](https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/)
8. [gitlab使用教程](https://www.yiibai.com/gitlab/gitlab_git_commands.html)